Guriddo » Topic: Filter Toolbar Multi-Pick

Filter Toolbar Multi-Pick

Guriddo
filters
Filter Toolbar Multi-Pick

Tagged: filters

This topic has 22 replies, 4 voices, and was last updated 10 years, 1 month ago by tony.

Creator

Topic
January 18, 2016 at 1:05 pm #124688
trevrobwhite
Participant
Hi all,

I’m hoping someone can help, I have two issues (hopefully small) that I’m having trouble with.
1. From the Search toolbar I have used setSelect to give me a dropdown, but I want the user be be able to check multiple items they want to appear in the grid instead of just one
2. I then want the ability to save the filter (not the data) to be reloaded later, perhaps to a URL bookmark or MySQL database but I’m open to other methods.
Any ideas?

Many thanks in advance.
Creator

Topic

Viewing 7 replies - 16 through 22 (of 22 total)

← 1 2

Author

Replies

February 2, 2016 at 11:13 am #124768

guriddo.support

Participant

Hello,

We are glad to hear that everything is working as expected.
Thank you for the code posted.
The new release will be published very soon.

Thank you.

Kind Regards,

Will

Guriddo Support Team

February 10, 2016 at 3:28 pm #124829

trevrobwhite

Participant

Hi Guriddo,
Sorry to bother you again, this solution was going really well, but when I started using it against a database which has new records added, when I press the Refresh button to bring in more records the filter isn’t respected and new records outside the filter appears in the grid.

Is there a way I can call an event to apply the filter after the grid reload from a jQuery call, basically simulate the onclick event of the filter.

Many thanks.

February 11, 2016 at 11:26 am #124836

guriddo.support

Participant

Hello,

Which refresh button you push and what do this action. If you reload the page, then you should have the new records.

If you refresh via ajax you may need to put maybe again the multiselect(‘refresh’) method.

All depend what you do with this refresh button.

Could you please post a test for this purpose?

Thank you.

Kind Regards,

Will

Guriddo Support Team

February 11, 2016 at 11:53 am #124837

trevrobwhite

Participant

There are two ways to activate this issue either:
1. Save the Layout and Reload it
2. Refresh the grid and new records get inserted

Here is what I did, load the Grid inside a new browser window (sorry I have to blank some data)

Now I tick High the system correctly filters the grid. When I press this High checkbox an event it fired that refreshes the grid in a different way to jQuery(‘#grid’).trigger(“reloadGrid”); that I want to mimic.

I save the layout and press F5 to reload the entire browser window, then press load, my filters are correctly applied however the data in the grid doesn’t reload correctly.

However if I uncheck High from the priority dropdown and choose it again the data displays correctly.

I get the same issue if I press the refresh button on the lower toolbar and new records have been added to the database outside the filter.

So what I want to do is manually trigger the refresh in the same way the multipick does it, then attach this to my load function and the refresh function of the grid.

Here is the code from my load/save functions, you will notice I also tried to Save the layout (not the data) of the grid, I wanted to save the width and order of the columns, the sorting order, I’ve commented this out because I couldn’t get it to work, but I’ve left it in below, in case you notice some easy fixes in that code as well.

function savelayout() {
var schema = {};
schema[&#039;postdata&#039;] = jQuery(&#039;#grid&#039;).jqGrid(&#039;getGridParam&#039;,&#039;postData&#039;);
//schema[&#039;colmodel&#039;] = jQuery(&#039;#grid&#039;).jqGrid(&#039;getGridParam&#039;,&#039;colModel&#039;);
//$.jgrid.saveState(&quot;grid&quot;);

schema[&#039;sortname&#039;] = jQuery(&#039;#grid&#039;).jqGrid(&#039;getGridParam&#039;,&#039;sortname&#039;);
schema[&#039;sortorder&#039;] = jQuery(&#039;#grid&#039;).jqGrid(&#039;getGridParam&#039;,&#039;sortorder&#039;);

console.log (schema);

jQuery.post(&quot;alertprocessor_ajax.php?mode=savelayout&quot;, { data: JSON.stringify(schema) })

.done(function() {
alert(&quot;Layout Saved Successfully.&quot;);
})
.fail(function (){
alert(&quot;Layout Save Failure&quot;);
});
};

function loadlayout() {

jQuery.get(&quot;alertprocessor_ajax.php?mode=loadlayout&quot;, function (data) {

console.log (&quot;Data is - &quot; + data + &quot;That is it&quot;);
var obj = JSON.parse(data);
console.log (obj);
jQuery(&#039;#grid&#039;).jqGrid(&#039;setGridParam&#039;,{
postData: obj[&#039;postdata&#039;],
//sortname: obj[&#039;sortname&#039;],
//sortorder: obj[&#039;sortorder&#039;]

}).trigger(&quot;reloadGrid&quot;);
// TODO: Need to debug the column widths, why the don&#039;t save and reload
//jQuery(&#039;#grid&#039;).jqGrid(&#039;setGridParam&#039;,{colModel: obj[&#039;colmodel&#039;]}).trigger(&quot;reloadGrid&quot;);
jQuery(&#039;#grid&#039;).jqGrid(&#039;refreshFilterToolbar&#039;, {filters: obj[&#039;postdata&#039;].filters});
// finally refresh the multiselect plugin

var items = jQuery(&quot;[aria-multiselectable=true]&quot;);
jQuery.each(items,function () {
var obj = jQuery(&#039;#&#039; + this.id);
obj.multiselect(&#039;refresh&#039;);
obj.siblings(&#039;button.ui-multiselect&#039;).css({
width: &quot;100%&quot;,
marginTop: &quot;1px&quot;,
marginBottom: &quot;1px&quot;,
paddingTop: &quot;3px&quot;
});
});
// Disabled as it hides the toolbar due to an error
//$.jgrid.loadState(&quot;grid&quot;);
alert(&quot;Layout Loaded Successfully.&quot;);
});
};

function savelayout() {

var schema = {};

schema['postdata'] = jQuery('#grid').jqGrid('getGridParam','postData');

//schema['colmodel'] = jQuery('#grid').jqGrid('getGridParam','colModel');

//$.jgrid.saveState("grid");

schema['sortname'] = jQuery('#grid').jqGrid('getGridParam','sortname');

schema['sortorder'] = jQuery('#grid').jqGrid('getGridParam','sortorder');

console.log (schema);

jQuery.post("alertprocessor_ajax.php?mode=savelayout", { data: JSON.stringify(schema) })

.done(function() {

alert("Layout Saved Successfully.");

})

.fail(function (){

alert("Layout Save Failure");

});

};

function loadlayout() {

jQuery.get("alertprocessor_ajax.php?mode=loadlayout", function (data) {

console.log ("Data is - " + data + "That is it");

var obj = JSON.parse(data);

console.log (obj);

jQuery('#grid').jqGrid('setGridParam',{

postData: obj['postdata'],

//sortname: obj['sortname'],

//sortorder: obj['sortorder']

}).trigger("reloadGrid");

// TODO: Need to debug the column widths, why the don't save and reload

//jQuery('#grid').jqGrid('setGridParam',{colModel: obj['colmodel']}).trigger("reloadGrid");

jQuery('#grid').jqGrid('refreshFilterToolbar', {filters: obj['postdata'].filters});

// finally refresh the multiselect plugin

var items = jQuery("[aria-multiselectable=true]");

jQuery.each(items,function () {

var obj = jQuery('#' + this.id);

obj.multiselect('refresh');

obj.siblings('button.ui-multiselect').css({

width: "100%",

marginTop: "1px",

marginBottom: "1px",

paddingTop: "3px"

});

// Disabled as it hides the toolbar due to an error

//$.jgrid.loadState("grid");

alert("Layout Loaded Successfully.");

});

};

Many thanks

This reply was modified 10 years, 1 month ago by trevrobwhite.
This reply was modified 10 years, 1 month ago by trevrobwhite. Reason: images didn't display

February 12, 2016 at 10:37 am #124845

tony

Keymaster

Hello Trevor,

As far as I can remember we have a similar example – search upon loading.

This can be found here.

The idea is simple – you should tell the script to perform the search. This is done with serch set to true.

In your example code you can try this:

jQuery(&#039;#grid&#039;).jqGrid(&#039;setGridParam&#039;,{
postData: obj[&#039;postdata&#039;],
search : true
}).trigger(&quot;reloadGrid&quot;);

jQuery('#grid').jqGrid('setGridParam',{

postData: obj['postdata'],

search : true

}).trigger("reloadGrid");

Best Regards,

February 12, 2016 at 4:48 pm #124850

trevrobwhite

Participant

That works a lot better thanks, just a final piece of the puzzle to solve.

When loading this way the sorting and column widths don’t reload. I’d rather have all the information stored in the database, but tried using:

schema['colmodel'] = jQuery('#grid').jqGrid('getGridParam','colModel');

then

jQuery('#grid').jqGrid('setGridParam',{colModel:obj['colmodel']}).trigger("reloadGrid");

But it doesn’t seem to work, so plan B, use load storage:
$.jgrid.saveState("grid");

then
$.jgrid.loadState("grid");

I have a lot more success with this, as the grid loads all the preferences, but all the icons in the “pager” toolbar disappear, looking in the console there is a JavaScript error:

Uncaught TypeError: Cannot read property 'beforeProcessing' of undefined$.ajax.$.extend.success @ jquery.jqGrid.min.js:10j @ jquery.min.js:2k.fireWith @ jquery.min.js:2x @ jquery.min.js:4(anonymous function) @ jquery.min.js:4

Get this working then everything is good, thanks again for the extended support.

February 15, 2016 at 10:35 am #124855

tony

Keymaster

Hello,

If you want to preserve the sortname and order you will need to specify them before triggering – with parameters sortname sortorder. You will need of course to store them before this

jQuery(&#039;#grid&#039;).jqGrid(&#039;setGridParam&#039;,{
postData: obj[&#039;postdata&#039;],
search : true,
sortname : &#039;mystoredname&#039;,
sortorder: &#039;mystoredorder&#039;
}).trigger(&quot;reloadGrid&quot;);

jQuery('#grid').jqGrid('setGridParam',{

postData: obj['postdata'],

search : true,

sortname : 'mystoredname',

sortorder: 'mystoredorder'

}).trigger("reloadGrid");

If you want to preserve the width, I think you will need to put the stored colModel before creating the grid. After the grid is created setting a new colModel will not re size the columns.

Another option is to use resizeColumn method, but it will go too complicated.

As for the second problem with save/load state this is strange.

Do you have definition of beforeProcessing event?

Can you please send us grid definition which causes the problem?

Note that save/load state is working locally (using Storage) – this mean that the user stored the state on its computer will not restore it on another.

Best Regards,

Filter Toolbar Multi-Pick

Search Forum

Recent Replies

Forum Statistics

UserOnline