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 15 replies - 1 through 15 (of 22 total)

1 2 →

Author

Replies

January 19, 2016 at 6:19 pm #124700

MymsMan

Participant

I am also interested in the same,
I would also like to be able to filter on a value range e.g. age between 20 and 30

MymsMan

January 19, 2016 at 10:48 pm #124701

guriddo.support

Participant

Hello,

We prepare a article with demo. It will be available tomorrow.

Kind Regards

Will

Guriddo Support Team

January 19, 2016 at 11:10 pm #124702

trevrobwhite

Participant

Many thanks.

January 20, 2016 at 3:17 pm #124704

guriddo.support

Participant

Hello,

It was not so easy as we suggest initially. We have some technical issues.
For now we have prepared a pre build demo of this feature. This is not official and contain code not published in the web.

The demo uses a jquery ui multiselect plugin.

The demo can be seen here .

Please let us know if you have recommendations and new ideas.

We will try to extend toolbar search with more controls and features for the next release including range.

Kind Regards,

Will

P.S. We hope to finish this to the end of week.

This reply was modified 10 years, 2 months ago by guriddo.support.

Guriddo Support Team

January 20, 2016 at 3:56 pm #124708

guriddo.support

Participant

Hello,

About the second question.

Basically you ca get the filter using the javaScript method getGridParam.

This is a string anf you can seve it wher you want – database, cookie, or localStorage.

To load the grid upon loading with the filter you may need to consider this demo:

Kind Regards,

Will

Guriddo Support Team

January 20, 2016 at 7:25 pm #124709

trevrobwhite

Participant

That looks like exactly what I need, the “all” looks a bit buggy but as you mention it’s work in progress.

Am I right to think that getGridParam will support the multi-select option when it’s done?

Thanks again for this effort.

January 25, 2016 at 11:28 am #124730

guriddo.support

Participant

Hello,

Please look at the updated demo here

To use this feature you will need to complete the following steps.

Download and install multiselect plugin
Download the last last source of jqGrid from github and replace it in your project.
In setColProperties set the searchoptions – multiple=true and dataInit as show into the example.
Use setFilterOptions to fine tune the multiselect in serching using the onClearSearchValue and beforClear events as show into the example.

Please let us know if you have difficulties with this.

Again with this we have implemented a range operator in toolbar searching, but it will be available in the next release.

Kind Regards

Guriddo Support Team

January 25, 2016 at 1:13 pm #124733

trevrobwhite

Participant

Many thanks for this, I’m using Guriddo jqGrid PHP can you detail which files need to be replaced in here as there are more files in the jqGrid distribution compared to mine.

Or is replacing the jquery.jqGrid.min.js enough.

Again many thanks.

January 25, 2016 at 2:01 pm #124734

guriddo.support

Participant

Hello,

jquery.jqGrid.min.js or jquery.jqGrid.js is fine.

Please, let us know about the result.

Thank you.

Kind Regards,

Will

Guriddo Support Team

January 25, 2016 at 4:43 pm #124737

trevrobwhite

Participant

Had a play around, this is looking great, many thanks.

January 27, 2016 at 7:45 pm #124747

trevrobwhite

Participant

Is it possible to save and load the filters?

I’ve tried:

jQuery(&#039;#grid&#039;).jqGrid(&#039;getGridParam&#039;,&#039;colModel&#039;);
jQuery.post(&quot;alertprocessor_ajax.php?id=savelayout&quot;, { data: JSON.stringify(schema) })

1 2	jQuery('#grid').jqGrid('getGridParam','colModel'); jQuery.post("alertprocessor_ajax.php?id=savelayout", { data: JSON.stringify(schema) })

with:

var obj = JSON.parse(data);
jQuery(&#039;#grid&#039;).jqGrid(&#039;setGridParam&#039;,{colModel: obj}).trigger(&quot;reloadGrid&quot;);

var obj = JSON.parse(data);

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

and also
var schema = jQuery('#grid').jqGrid('getGridParam','postData');
with

var obj = JSON.parse(data);
jQuery(&#039;#grid&#039;).jqGrid(&#039;setGridParam&#039;,{postData: obj}).trigger(&quot;reloadGrid&quot;);

var obj = JSON.parse(data);

jQuery('#grid').jqGrid('setGridParam',{postData: obj}).trigger("reloadGrid");

But I cannot seem to get the layout to hold for the multi-select, is the data somewhere I can access so I can save the layout and reload it later?

In the background I stringify the data and store it in the database then reload using jQuery after sending through JSON.parse.

Many thanks.

January 28, 2016 at 11:10 am #124748

guriddo.support

Participant

Hello,

Should we think that the grid is already constructed and on a existing grid you load the the stored filters and try to apply them?

Also I suppose that a toolbar searching is used.

Kind Regards,

Will

Guriddo Support Team

January 28, 2016 at 11:14 am #124749

trevrobwhite

Participant

Correct, the grid is constructed, I set the filters, sort etc and hit save, this runs a jQuery to store the sorting/filtering/column widths etc.

Then the grid is fully loaded, the user presses “Load” and the grid is loaded with there setup.

However if there is an easier way to achieve the same thing by going a full page refresh that works for me.

Correct the toolbar is on, below is what is looks like (sorry I had to hide the data), I’m hoping in the action column to have a button or link to do some custom actions (I’m working on that part)

Layout

Many thanks.

This reply was modified 10 years, 2 months ago by trevrobwhite.

January 29, 2016 at 11:11 am #124755

guriddo.support

Participant

Hello,

The multiselect is a external plugin and you should upfdate it manually.

Loading the filtered data and trigerring the grid does not refresh the data on filter toolbar.

Especially for your case we have created the new method called refreshFilterToolbar.

To this method you can pass the filters as string or as object.

You can call it after the loading the and triggering the grid.

Note that you should manually refersh the multiselect plugin after this operation.

Download the the last build from github and replace the jqquery.jqGrid.js file.

the code can look like this

var obj = JSON.parse(data);
jQuery(&#039;#grid&#039;).jqGrid(&#039;setGridParam&#039;,{postData: obj}).trigger(&quot;reloadGrid&quot;);
jQuery(&#039;#grid&#039;).jqGrid(&#039;refreshFilterToolbar&#039;, {filters: obj.filters});
// finally refresh the multiselect plugin

var elem = $(&quot;#gs_CustomerID&quot;); // this is the element
elem.multiselect(&#039;refresh&#039;);
elem.siblings(&#039;button.ui-multiselect&#039;).css({
	width: &quot;100%&quot;,
        marginTop: &quot;1px&quot;,
	marginBottom: &quot;1px&quot;,
	paddingTop: &quot;3px&quot;
})

var obj = JSON.parse(data);

jQuery('#grid').jqGrid('setGridParam',{postData: obj}).trigger("reloadGrid");

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

// finally refresh the multiselect plugin

var elem = $("#gs_CustomerID"); // this is the element

elem.multiselect('refresh');

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

width: "100%",

marginTop: "1px",

marginBottom: "1px",

paddingTop: "3px"

})

Hope this helps

Kind Regards
Will

Guriddo Support Team

January 29, 2016 at 1:03 pm #124759

trevrobwhite

Participant

Many thanks, this works well.
I did find it a pain naming all the multi selects manually so, modified the jQuery code slightly.

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;
		    });
		});

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"

});

I’m sure the initial jQuery select can be tidied a bit so it returns an object not a string, but I struggled to get an object back.

Filter Toolbar Multi-Pick

Search Forum

Recent Replies

Forum Statistics

UserOnline