Keep selectFilter value when page is refersh

Webix JS
1

Hi all,

I’m looking for a solution to save the last value of a selectFilter and to ra-apply it to the header filter dropbox when the page is refresh (using location.reload()).



In the following snippet,

http://webix.com/snippet/91b13385

I can store the current value of the filter in an event onAfterFilter using the method getFilter).

And when the page is refreshed, the stored value is available in the event onBeforeLoad or in the property Ready.

But I don’t find the way to copy this value to the filter dropbox to use it directly.



Anyone can help me to fix this request.

Thanks you for your help.

Stéphane

2

Hi, you can use state API for datatable to save and restore filter value: http://webix.com/snippet/ea9350a7

3

Thank you Helga.

But the methods getState / setState are only available in the PRO version, and I used the GPL Licence for the moment.



So I can’t use this method in my application. Or maybe I made a mistake when I copy the piece of code into my page.



//Generate Truck List

webix.ready(function(){

this.formatReg = function(value, row){};
this.formatTrailer = function(value, row){};
this.formatBay = function(value, row){};
this.setActions = function(row){};
this.formatActions = function(value, row){};
this.dspCoMan = function(co, man){};
this.dspSplitted = function(act, man){};
this.formatSplitted = function(value, row){};
this.convertRemaining = function(val){};
this.formatRemaining = function(value, row){};

var grid = webix.ui({
	container:"DataContainer",
	id:"trkList",
	view:"datatable",
	tooltip:{dx: -100, dy: 15},
	columns:[
		{ id:"ELB",				tooltip:false, width:80,  header:"ELB",	sort:"string"},
		{ id:"ETD",				tooltip:false, width:80,  header:"ETD",	sort:"string"},
		...
		{ id:"CUST",            tooltip:false, width:60,  header:["Cust", {content:"selectFilter"}]},
		...
	],
	select:"cell",
	clipboard:"repeat",
	resizeColumn:true,
	autowidth:true,
	navigation:true,
	math:true,
	on:{
		onBeforeLoad:function(){
			this.showOverlay("Loading, please be patient...");
		},
		onAfterLoad:function(){
			this.hideOverlay();
		}
	},
	url:"get_dashboard_data.php?Q=LD_TruckImport_01_1&C=DEV&P=AWB_PREF%3D%26SEL_RFS_DDX%3D<?php echo $mode; ?>"
});

webix.attachEvent("unload", function(){
	webix.message("State saved");
	webix.storage.local.put("stateDt", grid.getState());
});

var stateDt = webix.storage.local.get("stateDt");
if(stateDt)
{
	grid.setState(stateDt);
	webix.message("State loaded");
	webix.message(stateDt);
};

});


I added some messages into your piece of code, the message "State saved" is never displayed, and stateDt is always Undefined.
My webix.ready seems to be OK for you ?
4

To close the topic, I just remark that there’s 2 kinds of of API getState/setState.

When I used the free version, restoring the filter value works fine.

Piece of code to use them (works for me) :

`
grida = new webix.ui({
        container:"DataContainer",
		id:"trkList",
		view:"datatable",
        tooltip:{dx: -100, dy: 15},
		columns:[
			{ id:"ELB",				tooltip:false, width:80,  header:"ELB",	sort:"string"},
			{ id:"ETD",				tooltip:false, width:80,  header:"ETD",	sort:"string"},
			...
			{ id:"CUST",            tooltip:false, width:60,  header:["Cust", {content:"selectFilter"}]},
			...
		],
		select:"cell",
		ready: function(){
			var state = webix.storage.local.get("state");
			if (state)
				grida.setState(state);
		},
		on:{
			onAfterFilter(){
				webix.storage.local.put("state", grida.getState());
			}
		},
		url:"..."
	})
`
5

Right you are, there’s 2 kinds of state API, and only one of them, the UIManager’s one, is PRO-only. So getState/setState methods of the datatable are available in GPL.

And it’s makes no difference where in the app flow you apply these methods. Your code is ok as well.

But it seems unnecessary to memorize state on each filtering - it’s better to do it just before page reloading, on theunload event.

The message is not displayed because the page is refreshed during unload and stateDt is undefined because webix.message cannot display objects, and stateDt is an object. But you can use JSON.stringify or log it to console: http://webix.com/snippet/e728165c

6

after grid.parse(//some data//), i want to restore the state of filters.
because i’ve serverfilters and is getting fired after restoring the state. and this goes into infinite loop. how can i avoid this? i’ve tried refreshcolumns on grid, but state is not restoring.

7

calling setState with filter values will start filtering, which in case of server-side filtering, will lead to the data reloading. Normally you need not call setState as values must stay in filters on data reloading without any extra efforts.