Siebel OpenUI: Adding FilterToolbar in List Applet using JqGrid

Hope you guys like my last post, exploring further I got more interesting feature we can have in our Siebel List Applets with a single line of code only.

For all new buddies, let me explain here that with Siebel OpenUI upgrade we have a lot of jQuery plugins used as vanilla files in Siebel. JQGrid is one of them to render our List applets.

Now, best part of this post is we are not adding any extra JS file. Just using those JQGrid library to get this.

Requirement:

We have search given in applets where we can search any column value from server side. Now, we want a filter where we can quickly filter our data from a long list. Remember there is no server interaction. Its only filter data available on UI.

 

Solution:

In my last post, I already explained how to use JQGrid methods in PR files. Same way we will get an instance of JQGrid and call its method “FilterToolbar“. This method construct searching creating input elements just below the header elements of the grid.

Lets do it one by one…

Step 1:

Inside Bind data function, we will write this line to get grid object.

this.GetGrid();

Step 2:

Using this object, will call filter method.

this.GetGrid().jqGrid(‘filterToolbar’);

Step 3:

Now we have filter option below all column headers. If we want it as live search then we have to use this option.

this.GetGrid().jqGrid(‘filterToolbar’,{searchOnEnter:false});

Thats all !!!

Enjoy Filtering, just type any name to filter a long list of data.

 

 

 

How it is helpful, only you can tell this.

Watch its video at this link

[su_youtube url=”http://youtu.be/dtJey0iehNk”]

[su_divider]

@AskmeSiebel