Please custom the click event handler on the datagrid header.
$('#dg').datagrid({
multiSort: true,
headerEvents: $.extend({}, $.fn.datagrid.defaults.headerEvents, {
click: function(e){
var target = $(e.target).closest('div.datagrid-view').children('.datagrid-f')[0];
var opts = $(target).datagrid('options');
var cell = $(e.target).closest('.datagrid-cell');
if (cell.length){
var p1 = cell.offset().left + 5;
var p2 = cell.offset().left + cell._outerWidth() - 5;
if (e.pageX < p2 && e.pageX > p1){
var field = cell.parent().attr('field');
if (e.metaKey || e.ctrlKey){
$(target).datagrid('sort', field);
} else {
if (opts.sortName != field){
opts.sortName = '';
opts.sortOrder = '';
}
$(target).datagrid('sort', field);
}
}
}
}
})
})