Sort filter not applied when changing source ?

[punkrackParticipant]

Hi !

I don’t know if this is done correctly, but here it is :

I initialize a grid on document.ready. I click a button, and I change $(“#jqxgrid”).jqxGrid({ source: dataadapter});

I then change the columns order. The source.sortcolumn is not applied. In this example, source stays the same except for sorting, but in real world, it will change a lot.

Working example here :
http://colligedev.ccdmd.qc.ca/test-jqxwidgets/test.php

Just press change, you will see grid change but sorting on “Modele” is not applied.

Here is basic code :

 

$(document).ready(function() {
var source =
{
datatype: "json",
sortcolumn: 'titre_fiche',
sortdirection: 'asc',
datafields: [
{ name: 'chk_box', type: 'string'},
{ name: 'titre_fiche', type: 'string'},
{ name: 'titre_modele', type: 'string' },
{ name: 'type_acces', type: 'string' },
{ name: 'date_modification', type: 'date' },
{ name: 'suivi', type: 'string' }
],
cache: false,
url: 'abc.php',
filter: function()
{
// update the grid and send a request to the server.
$("#jqxgrid").jqxGrid('updatebounddata', 'filter');
},
sort: function()
{
// update the grid and send a request to the server.
$("#jqxgrid").jqxGrid('updatebounddata', 'sort');
},
root: 'Rows',
beforeprocessing: function(data)
{
if (data != null)
{
source.totalrecords = data[0].TotalRows;
}
}
};
var dataadapter = new $.jqx.dataAdapter(source, {
loadError: function(xhr, status, error)
{
alert(error);
}
}
);

// initialize jqxGrid
$("#jqxgrid").jqxGrid( {
width: '100%',
source: dataadapter,
theme: jqw_theme,
selectionmode: 'singlerow',
autosavestate: false,
autoloadstate: false,
filterable: true,
sortable: true,
pageable: true,
columnsresize: true,
autoheight: true,
virtualmode: true,
showdefaultloadelement: false,
pagesizeoptions: jqw_pagesizeoptions,
//pagesize: 20, /*Lignes visibles par défaut. Ex: 20.*/
rendergridrows: function(obj)
{
return obj.data;
},
ready: function()
{
},
columns: [
{ text: '', datafield: 'chk_box', sortable: false, filterable: false, editable: false, width: '5%',
renderer: function () {
return '<div id="jqxgrid_chkbox_all"></div>';
}
},
{ text: 'TITRE', datafield: 'titre_fiche', width: '45%' },
{ text: 'MODÈLE', datafield: 'titre_modele', width: '15%' },
{ text: 'ACCÈS', datafield: 'type_acces', width: '10%' },
{ text: 'DATE MODIFICATION', datafield: 'date_modification', filtertype: 'date', editable: false, cellsalign: 'left', cellsformat: 'd MMMM yyyy, HH:mm', width: '20%' },
{ text: '', datafield: 'suivi', sortable: true, filterable: false, editable: false, width: '5%',
renderer: function () {
return '<div id="jqxgrid_suivi_all"></div>';
}
},
]
});

});
 

function change() {
var source =
{
datatype: "json",
sortcolumn: 'titre_modele',
sortdirection: 'asc',
datafields: [
{ name: 'chk_box', type: 'string'},
{ name: 'titre_fiche', type: 'string'},
{ name: 'titre_modele', type: 'string' },
{ name: 'type_acces', type: 'string' },
{ name: 'date_modification', type: 'date' },
{ name: 'suivi', type: 'string' }
],
cache: false,
url: 'abc.php',
filter: function()
{
// update the grid and send a request to the server.
$("#jqxgrid").jqxGrid('updatebounddata', 'filter');
},
sort: function()
{
// update the grid and send a request to the server.
$("#jqxgrid").jqxGrid('updatebounddata', 'sort');
},
root: 'Rows',
beforeprocessing: function(data)
{
if (data != null)
{
source.totalrecords = data[0].TotalRows;
}
}
};

var dataadapter = new $.jqx.dataAdapter(source, {
loadError: function(xhr, status, error)
{
alert(error);
}
}
);

$("#jqxgrid").jqxGrid({ source: dataadapter});

$("#jqxgrid").jqxGrid({
columns: [
{ text: '', datafield: 'chk_box', sortable: false, filterable: false, editable: false, width: '5%',
renderer: function () {
return '<div id="jqxgrid_chkbox_all"></div>';
}
},

{ text: 'ACCÈS', datafield: 'type_acces', width: '10%' },
{ text: 'MODÈLE', datafield: 'titre_modele', width: '15%' },
{ text: 'TITRE', datafield: 'titre_fiche', width: '45%' },
{ text: 'DATE MODIFICATION', datafield: 'date_modification', filtertype: 'date', editable: false, cellsalign: 'left', cellsformat: 'd MMMM yyyy, HH:mm', width: '20%' },
{ text: '', datafield: 'suivi', sortable: true, filterable: false, editable: false, width: '5%',
renderer: function () {
return '<div id="jqxgrid_suivi_all"></div>';
}
},
]
});
}

I tried
$(“#jqxgrid”).jqxGrid(‘updatebounddata’);

$(“#jqxgrid”).jqxGrid(‘render’);

it does not work.

Also, it I press change, save the state and try to load the state, it will not save the “changed” state.
Thanks for checking this out.

[Peter StoevKeymaster]

Hi punkrack,

When you change the Grid’s Data Source, any previous sorts, filters, etc. will be removed by design.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[punkrackParticipant]

ok thanks for answering my question !

[Author]

Posts