Setting the initial datagrid column sort icons [Solved]

[devnull]

The up down arrow is not shown in my datagrids (v1.40) even though it is set to sortable and the order is set:

Code:

{field:'CREATE_DATE',title:'Doc Date', width:80, fixed:true, sortable:true, order:'asc'},

In order to make this visible I need to override the css with:

Code:

div.datagrid-cell > span {
  width: auto;
}

but the next problem is, when the datagrid is loaded, the sort icon for all columns EXCEPT FOR THE ONE DEFINED IN THE 'sortName' are not displayed.

It is only when you click on the header that the icon appears, and so the user does not know that the column is sortable.

Is it possible to show an 'up-down' icon for all columns that are sortable ?

[jarry]

Please try the code below to add a class 'datagrid-sort' to the sortable column.

Code:

<style>
  .datagrid-sort .datagrid-sort-icon{
    display: inline;
    padding: 0 13px 0 0;
    background: url('updown.png') no-repeat center center;
  }
  .datagrid-sort-desc .datagrid-sort-icon {
    display: inline;
    padding: 0 13px 0 0;
    background: url('../../themes/default/images/datagrid_icons.png') no-repeat -16px center;
  }
  .datagrid-sort-asc .datagrid-sort-icon {
    display: inline;
    padding: 0 13px 0 0;
    background: url('../../themes/default/images/datagrid_icons.png') no-repeat 0px center;
  }
</style>

var dg = $('#dg');
var header = dg.datagrid('getPanel').find('.datagrid-header');
var fields = dg.datagrid('getColumnFields',true).concat(dg.datagrid('getColumnFields',false));
for(var i=0; i<fields.length; i++){
  var field = fields[i];
  var col = dg.datagrid('getColumnOption', field);
  if (col.sortable){
    header.find('td[field="'+field+'"] .datagrid-cell').addClass('datagrid-sort');
  }
}

[devnull]

Jarry - thanks so much for your help with this.

I used your idea, but I needed to modify it a bit as I need it to work for all themes, and the asc and desc arrows were not showing in my system after clicking the column.

I set the opacity to 0.5 on the updown button, so that it does not make the column head look too cluttered, and it looks great. I have attached the icon should someone else need it.

Code:

// css
div.datagrid-sort:not(.datagrid-sort-asc):not(.datagrid-sort-desc) .datagrid-sort-icon {
  display: inline;
  padding: 0 13px 0 0;
  background: url('../icons/datagrid_updown.png') no-repeat center center;
  opacity:0.5;
}

// JS code
var dg = $(this);
var header = dg.datagrid('getPanel').find('.datagrid-header');
var fields = dg.datagrid('getColumnFields',true).concat(dg.datagrid('getColumnFields',false));
fields.map(function(field){
	var col = dg.datagrid('getColumnOption', field);
	if (col.sortable) header.find('td[field="'+field+'"] .datagrid-cell').addClass('datagrid-sort');
})

But one more question....

How can I extend the datagrid to include this code so that it can be applied to all datagrids without affecting any of the onX events ?

[devnull]

I added this to the datagrid panel, not sure if it's the best place for it but it works:

Code:

$.extend($.fn.datagrid.defaults.view,{
  onAfterRender: function(e){
    var dg = $(e);
    var header = dg.datagrid('getPanel').find('.datagrid-header');
    var fields = dg.datagrid('getColumnFields',true).concat(dg.datagrid('getColumnFields',false));
    fields.map(function(field){
      var col = dg.datagrid('getColumnOption', field);
      if (col.sortable) header.find('td[field="'+field+'"] .datagrid-cell').addClass('datagrid-sort');
    })
  }
  
})

[jarry]

Overriding the datagrid view is a better solution, another way to solve this issue is to download the patch from http://www.jeasyui.com/download/downloads/jquery-easyui-1.4.3-patch.zip.

[devnull]

Thanks, but I am running 1.40 and I have a lot of hacks and work-arounds, upgrading to 1.43+ is going to be very time consuming and not something I can attempt any time soon.

But thanks for your help