jQuery Grid Plugin - jqGrid - Topic: Problem with initial column sort in treegrid http://www.trirand.com/blog/?page_id=393/treegrid/problem-with-initial-column-sort-in-treegrid Simple:Press Version 5.7.5.3 tony on Problem with initial column sort in treegrid http://www.trirand.com/blog/?page_id=393/treegrid/problem-with-initial-column-sort-in-treegrid#p29847 TreeGrid http://www.trirand.com/blog/?page_id=393/treegrid/problem-with-initial-column-sort-in-treegrid#p29847 Hello,

You use jsonstring as data. In this case jqGrid expect that the initial data is sorted in appropriate way.

This is the same case as you use data from server - i.e the data should be sorted before it is send to the grid.

In order to solve the problem you can programatically use the sortGrid method to sort the data in a way you want.

Of course you will need to wait until the data is loaded in the grid and then sort it.

See docs.

Regards

]]> Thu, 14 Nov 2013 08:59:22 +0200 ddmo75 on Problem with initial column sort in treegrid http://www.trirand.com/blog/?page_id=393/treegrid/problem-with-initial-column-sort-in-treegrid#p29841 TreeGrid http://www.trirand.com/blog/?page_id=393/treegrid/problem-with-initial-column-sort-in-treegrid#p29841 I have this code but the first time I load the grid data are not sorted. Arfer this if I do click in the header of the column the sort runs good.

<!DOCTYPE html>

<html>

<head>

<title>MAPA VERSION 2.2</title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<!--Hojas de estilos que implementan la funcionalidad del grid-->

<link rel="stylesheet" href="css/jquery-ui-1.10.3.custom.css" />

<link rel="stylesheet" href="css/ui.jqgrid.css">

<!--Ficheros javascript que implementan la funcionalidad del grid-->

<script src="js/jquery.js" ></script>

<script src="js/grid.locale-es.js" ></script>

<script src="js/jquery.jqGrid.min.js" ></script>

<script src="js/jquery-ui-1.10.3.custom.min.js"></script>

<script type="text/javascript">

$(window).load(function(){

//definimos el vector JSON que va a formar la tabla inicial. Tiene campos especiales para poder construir el arbol

//esos campos especiales son los que van a partir del campo relevancias

//Datos del arbol inicial con los contadores de registros y sumas de relevancias

var mydata = [

{ nodo:"ANALITICA", registros:"9", relevancias:"250.10",

level:"0", parent:null, isLeaf:false, expanded:false, loaded:true },

{ nodo:"2013", registros:"5", relevancias:"175.00",

level:"1", parent:"1", isLeaf:true, expanded:false, loaded:true },

{ nodo:"2010", registros:"3", relevancias:"50.10",

level:"1", parent:"1", isLeaf:true, expanded:false, loaded:true },

{nodo:"2000", registros:"1",relevancias:"25.00",

level:"1", parent:"1", isLeaf:true, expanded:false, loaded:true },

{ nodo:"RADIOLOGIA", registros:"3", relevancias:"25.15",

level:"0", parent:null, isLeaf:false, expanded:false, loaded:true },

{ nodo:"2013", registros:"1", relevancias:"14.00",

level:"1", parent:"5", isLeaf:true, expanded:false, loaded:true },

{ nodo:"2008", registros:"2", relevancias:"11.15",

level:"1", parent:"5", isLeaf:true, expanded:false, loaded:true },

{ nodo:"PRUEBAS ESPECIALES", registros:"4", relevancias:"100.00",

level:"0", parent:null, isLeaf:false, expanded:false, loaded:true },

{ nodo:"2013", registros:"1", relevancias:"25.00",

level:"1", parent:"8", isLeaf:true, expanded:false, loaded:true },

{ nodo:"2011", registros:"1", relevancias:"25.00",

level:"1", parent:"8", isLeaf:true, expanded:false, loaded:true },

{ nodo:"2012", registros:"1", relevancias:"25.00",

level:"1", parent:"8", isLeaf:true, expanded:false, loaded:true },

{ nodo:"2010", registros:"1", relevancias:"25.00",

level:"1", parent:"8", isLeaf:true, expanded:false, loaded:true }

];

jQuery("#lista").jqGrid({

datatype: "jsonstring",

datastr: mydata,

colNames: ["Elemento", "Registros", "Relevancias"],

colModel: [

{name: 'nodo', index: 'nodo', width: 200, },

{name: 'registros', index: 'registros', width: 200, sortable:'false', align:'right'},

{name: 'relevancias', index: 'relevancias', width: 200, sortable:'false', align:'right'}

],

height: 'auto',

rowNum: 10000,

treeGrid: true,

treeGridModel: 'adjacency',

treedatatype: "local",

ExpandColumn: 'nodo',

sortable:true,

pager: "#plista",

toppager:true,

viewrecords: true,

caption: 'MAPA VERSION 2.2',

pgtext:null,

recordtext:'{2} registros de ' + mydata.length,

});

//jQuery("#lista").jqGrid('filterToolbar',{searchOperators : true});

//habilitamos la barra de navegación y paginacion en el pie de tabla

jQuery("#lista").jqGrid('navGrid','#plista',{del:false,add:false,edit:false,search:false,refresh:false,cloneToTop:true});

//añadimos el boton de expandir todo en la barra de navegacion inferior

jQuery("#lista").jqGrid('navButtonAdd', '#plista', { caption: "Expandir todo",

onClickButton: function() {

$("#lista .ui-icon-triangle-1-e").trigger("click");

}

});

//añadimos el boton de contraer todo en la barra de navegación inferior

jQuery("#lista").jqGrid('navButtonAdd', '#plista', { caption: "Contraer todo",

onClickButton: function() {

$("#lista .ui-icon-triangle-1-s").trigger("click");

}

});

//añadimos el boton de expandir todo en la barra de navegacion superior

jQuery("#lista").jqGrid('navButtonAdd', '#lista_toppager', { caption: "Expandir todo",

onClickButton: function() {

$("#lista .ui-icon-triangle-1-e").trigger("click");

}

});

//añadimos el boton de contraer todo en la barra de navegación superior

jQuery("#lista").jqGrid('navButtonAdd', '#lista_toppager', { caption: "Contraer todo",

onClickButton: function() {

$("#lista .ui-icon-triangle-1-s").trigger("click");

}

});

});

</script>

</head>

<body>

<table id="lista"><tr><td/></tr></table>

<div id="plista"></div>

</body>

</html>

Thank you,

]]> Tue, 12 Nov 2013 15:39:27 +0200