Searching in Infragistics jQuery Hierarchical Grid

This article will show you how to load the IG jQuery hierarchical grid with data and enable you to search it from a small external form. It will also show you how to expand the rows that match your search results.

Creating the Hieararchical Grid and Loading it with data

Lets start with creating the hierarchical grid and load it with data. If you know how to do that you can safely jump to the next section “Creating the Search UI and Logic” The first thing that we need to do is set up the environment in which we’ll create the grid. That includes providing the required JS scripts and CSS files. We need the jQuery and the jQuery UI scripts. In addition to them we need the IG UI base JS file. The easiest way to start using those scripts is to provide links to the respective CDN locations. Here is how to do that for an HTML page.

You also need some basic css styles to get the default look of the Infragistics combo box. Again for an HTML page here is what you need to include

Note that the URL for the Infragistics CDN includes format of the type …jquery/xxxxx/yyyy/js…. the xxxxx is the release version, 20112 is the latest as of the time of writing this article. The other number is the build that you want to use. By the time you read this there might be a newer version and you might want to change that number if you want to use it instead. Note also that all those files come with the product download and you are not required to use the CDN.

Once we have all this in place we can add a div that will be our hierarchical grid and work on it. I’ll set its id to hierarchicalGrid. Before we transform this div in a hierarchical grid we need to figure out what data we’ll fill the grid with. For this demo I’ll use the free odata service that exposes the Nortwind database in a JSONP format. 

So far we have code that looks something like this:

To load the grid with data we have to subscribe to the load event of the window and then do some initializing. I’ll show you the script code to do that first and then I’m going to explain what everything does:

The first few lines of the script define the data source the grid will use. The url points to the service’s address that returns some data in the proper format. The jsonp variable will be assigned later as a dataSource.

The $("#hierarchicalGrid").igHierarchicalGrid() method transforms the div to a hierarchical grid and initializes it with the properties needed to load it with the data. The format is specified, the data source and columns are defined, including the hierarchical ones.

On the main level of the hierarchical grid we’ll have order records and the sub level we’ll have employees that are associated with those orders. The primary keys and foreign key that define the hierarchy are present too.

Note that those are the columns don’t expose all the properties of the records that we receive. Those are used just for the demo. You can include as many as you want in your real app.

With this we have a working hierarchical grid loaded with data and set up to hierarchize it appropriately. The next step will implement the search logic and interface.

Creating the Search UI and Logic

The first thing to do to implement the searching in the grid is to create a small form that will allow us to input text to search, and will provide two buttons: search and clear search.

Here is the code for it:

 

 

When we click on the btnSearch we will do the actual search with the contents of inpSearch and when we click on btnClear we will remove the filtering. For each search result we will expand the grid’s row and for all the rows that are not a match we’ll collapse them. Lets throw some style for that code before we go into the interesting code logic that does the search and expand/collapse.

 

 

To handle the search and clear button clicks we need to hock up to the click event of each of those elements with an appropriate handler.

 

 

Now we have to implement the clearSearch and findRows functions. The general logic that we’ll follow is that for each row in the grid we will call a method searchCells with parameters the row’s cells as an array and the search value. If one of the cells’ value contains the search value the row is expanded, if not – collapsed. This could be replaced with some other logic, like counting matches, filtering of the data source, etc. The clear function will go and collapse all expanded rows. Here is the code:

 

 

Note that the actual cells are located in the cells property of each row and the collection with rows allParentRows is initialized with the parentGrid.allRows() method in the hierarchical grid initialization in the beginning of the article.

This is all you need in order to implement searching in the hierarchical grid. The last thing I want to mention is that if you want to make the buttons look as nice as in the screenshot in the beginning of the article you can make them IG Buttons by calling the igButton() and setting the appropriate labelText at the lines where you attach to the click events. Here is how the button and click event handler code will look like for the btnSearch:

 

 

Here is a working demo of the whole sample. You can view the complete code by looking at the source of the page.

I hope this article has been interesting and useful.

Have a great day!