save state after refresh data with applied filter

[wpdParticipant]

i want to save the state when user apply filter, column resize or sort.
when the clicks refresh data new data should come in and apply the previous state(filter,sort condition what user applied before)
HTML Code:

<div id=”jqxgrid”></div>
<input type=”button” value=”Refresh Data” />

JS Code:

var state = null;
var data = generatedata(500);
var source = {
localdata: data,
datafields: [{
name: ‘firstname’,
type: ‘string’
}, {
name: ‘lastname’,
type: ‘string’
}, {
name: ‘productname’,
type: ‘string’
}, {
name: ‘date’,
type: ‘date’
}, {
name: ‘quantity’,
type: ‘number’
}, {
name: ‘price’,
type: ‘number’
}],
datatype: “array”
};
var addfilter = function () {
var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = ‘Beate’;
var filtercondition = ‘contains’;
var filter1 = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
filtervalue = ‘Andrew’;
filtercondition = ‘starts_with’;
var filter2 = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
filtergroup.addfilter(filter_or_operator, filter1);
filtergroup.addfilter(filter_or_operator, filter2);
// add the filters.
$(“#jqxgrid”).jqxGrid(‘addfilter’, ‘firstname’, filtergroup);
// apply the filters.
$(“#jqxgrid”).jqxGrid(‘applyfilters’);
}
var adapter = new $.jqx.dataAdapter(source);
$(“#jqxgrid”).jqxGrid({
width: 500,
theme: ‘energyblue’,
showfilterrow: true,
source: adapter,
filterable: true,
sortable: true,
ready: function () {
addfilter();
},
autoshowfiltericon: true,
columns: [{
text: ‘First Name’,
datafield: ‘firstname’,
width: 90
}, {
text: ‘Last Name’,
datafield: ‘lastname’,
width: 90
}, {
text: ‘Product’,
datafield: ‘productname’,
width: 170
}, {
text: ‘Order Date’,
datafield: ‘date’,
width: 160,
cellsformat: ‘dd-MMMM-yyyy’
}, {
text: ‘Quantity’,
datafield: ‘quantity’,
width: 80,
cellsalign: ‘right’
}, {
text: ‘Unit Price’,
datafield: ‘price’,
cellsalign: ‘right’,
cellsformat: ‘c2’
}]
});

$(“#jqxgrid”).on(“filter”, function (event)
{
state = $(“#jqxgrid”).jqxGrid(‘savestate’);

});

$(‘#jqxgrid’).on(‘columnresized’, function (event) {
state = $(“#jqxgrid”).jqxGrid(‘savestate’);
});

$(‘#jqxgrid’).on(‘sort’, function () {
state = $(“#jqxgrid”).jqxGrid(‘savestate’);
});

// refresh Grid data.
$(‘input’).click(function () {

var data = generatedata(50);
var source = {
localdata: data,
datafields: [{
name: ‘firstname’,
type: ‘string’
}, {
name: ‘lastname’,
type: ‘string’
}, {
name: ‘productname’,
type: ‘string’
}, {
name: ‘date’,
type: ‘date’
}, {
name: ‘quantity’,
type: ‘number’
}, {
name: ‘price’,
type: ‘number’
}],
datatype: “array”
};
var adapter = new $.jqx.dataAdapter(source);
$(“#jqxgrid”).jqxGrid({ source: adapter });
$(“#jqxgrid”).jqxGrid(‘loadstate’);
});

[HristoParticipant]

Hello wpd,

Please, take a look at this topic:
http://www.jqwidgets.com/community/topic/updatebounddata-with-sort-and-filter/

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts