An easy way to sort groups in datagrid groupview [SOLVED]

[Juan Antonio Martínez]

I'm looking for a solution to show datagrid groups sorted in an specific order provided by evaluating some fields from group members

My groupFormater() function comes here:

Code:

// value: Team name
// rows: competitor's group members. Best results comes first
function myGroupFormatter( value , rows ) {
    var time=0;
    var penal=0
    for (n=0;n<3;n++) { // get the three best competitor's and sum their results
        if ( typeof(rows[n])==='undefined') { penal+=200;}
        else {penal+=parseFloat(rows[n].Penalization); time+=parseFloat(rows[n].Time);}
    }
    return  '<table><tr><td style="width:325px">Team's name: '+value+
            '</td><td style="width:200px">Time: '+time+
            '</td><td style="width:200px">Penalization: '+penal+
            '</td></tr></table>';
}

... And I want datagrid groups gets shown ordered by evaluated group time/penalization

¿Any suggestion?. Looking at groupview code, I figure some kind of sorting once the datagrid elements have been parsed and group list composed, but unsure about right way to do in a generic way
Thanks in advance.

Juan Antonio

[stworthy]

A possible way to solve this issue is to extend the group view and define your own sorting rules. The code below shows how to achieve this:

Code:

var gview = $.extend({}, groupview, {
	onBeforeRender: function(target, rows){
		groupview.onBeforeRender.call(this, target, rows);

		var state = $.data(target, 'datagrid');
		var opts = state.options;
		if (opts.sortName != opts.groupField){
			return;
		}
		var groups = this.groups;
		groups.sort(function(a,b){
			var v1 = sumValue(a.rows, 'listprice');
			var v2 = sumValue(b.rows, 'listprice');
			return (opts.sortOrder=='asc'?1:-1)*(v1>v2?1:-1);
		});
		var index = 0;
		var newRows = [];
		for(var i=0; i<groups.length; i++){
			var group = groups[i];
			group.startIndex = index;
			index += group.rows.length;
			newRows = newRows.concat(group.rows);
		}
		state.data.rows = newRows;
		
		function sumValue(rows,field){
			var v = 0;
			$.map(rows, function(row){
				v += row[field];
			});
			return v;
		}
	}
})

$(function(){
	$('#dg').datagrid({
		view: gview,
		//...
	})	
})

[Juan Antonio Martínez]

Thanks!
With a minor changes it works for me

Code:

/**
 * Extension del datagrid groupview para ordenar los grupos
 */
var gview = $.extend({}, groupview, {
    onBeforeRender: function(target, rows){
        groupview.onBeforeRender.call(this, target, rows);

        var state = $.data(target, 'datagrid');
        var opts = state.options;
        var groups = this.groups;
        groups.sort(function(a,b){
            var p1 = sumValue(a.rows, 'Penalizacion');
            var p2 = sumValue(b.rows, 'Penalizacion');
            var t1 = sumValue(a.rows, 'Tiempo');
            var t2 = sumValue(b.rows, 'Tiempo');
            // compare penalization
            if (p1!=p2) return (opts.sortOrder=='asc'?1:-1)*(p1>p2?1:-1);
            // on equal penalization compare time
            return (opts.sortOrder=='asc'?1:-1)*(t1>t2?1:-1);
        });
        var index = 0;
        var newRows = [];
        for(var i=0; i<groups.length; i++){
            var group = groups[i];
            group.startIndex = index;
            index += group.rows.length;
            newRows = newRows.concat(group.rows);
        }
        state.data.rows = newRows;

        function sumValue(rows,field) {
            var v = 0;
            for (var n = 0; n < 3; n++) {
                if (typeof(rows[n]) === 'undefined') { v += 200; } // if less than 3 participants
                else { v+=parseFloat(rows[n][field]); }
            }
            return v;
        }
    }
})

A last two questions:

- "rownumbers" options affect data rows, not group rows. Any way to change this behaviour?

- Today Upgraded to easyui-1.4.2... and my group formatter method doesn't run anymore :-(
I'd like groupFormatter to generate a table-like text info, but seems that datagrid css styles overrides mine when group rows are expanded. ¿Any way to solve this?

Thanks in advance
Juan Antonio

[stworthy]

What happen with your 'groupFormatter' function? Please describe your issue in more detail.

[Juan Antonio Martínez]

sure:

groupFormatter relevant code:

Code:

   // this works, but I want to tabulate output
   // return "Equipo: "+value+" Tiempo: "+time+" Penalización: "+penal;

   // this only works when at least one group row is collapsed
    return '<table class="team-results"><tbody><tr>'+
        '<td>Team: '+value+'</td><td>Time: '+time+'</td><td>Penalization:'+penal+'</td>'+
        '</tr></tbody></table>';

CSS style used:

Code:

.team-results {display:inline-block;table-layout:fixed; width:725px;}/*Setting the table width is important!*/
.team-results td {overflow:hidden;}/*Hide text outside the cell.*/
.team-results td:nth-of-type(1) {width:325px;}/*Setting the width of column 1.*/
.team-results td:nth-of-type(2) {width:200px;}/*Setting the width of column 2.*/
.team-results td:nth-of-type(3) {width:200px;}/*Setting the width of column 3.*/

When at least one group row is collapsed, every thing works as expected. Here comes my capture showing DOM inspector:



But when all group rows are expanded, text dissappears... but DOM Inspector says it is still there:



I suspect any issue on groupview renderer code , but unsure..

Juan Antonio

[Juan Antonio Martínez]

Finally I found the problem: groupFormatter's table width and datagrid scrollbar

When scrollbar appears, the group header width becomes greater than available space...  and inline-block's display attributes, makes it to be rendered at next line... and thus not shown.
Just setting up the right width value, gets allways displayed as expected

I'll investigate how to automagically expand table width to fit available space, but not now :-)

Thanks.
Juan Antonio

[vencelylalas]

var gview = $.extend({}, groupview, {
   onBeforeRender: function(target, rows){
      groupview.onBeforeRender.call(this, target, rows);

      var state = $.data(target, 'datagrid');
      var opts = state.options;
      if (opts.sortName != opts.groupField){
         return;
      }
      var groups = this.groups;
      groups.sort(function(a,b){
         var v1 = sumValue(a.rows, 'listprice');
         var v2 = sumValue(b.rows, 'listprice');
         return (opts.sortOrder=='asc'?1:-1)*(v1>v2?1:-1);
      });
      var index = 0;
      var newRows = [];
      for(var i=0; i<groups.length; i++){
         var group = groups;
         group.startIndex = index;
         index += group.rows.length;
         newRows = newRows.concat(group.rows);
      }
      state.data.rows = newRows;
      
      function sumValue(rows,field){
         var v = 0;
         $.map(rows, function(row){
            v += row[field];
         });
         return v;
      }
   }
})

$(function(){
   $('#dg').datagrid({
      view: gview,
      //...
   })   
})