Adding a generic search box to Teleriks ASP.Net MVC Grid

In the new version of the MDT Web FrontEnd, I make use of some components from Teleriks extensions for ASP.Net MVC. Especially the grid, as it comes with all the necessary stuff like sorting, filtering, paging, etc. There is also a free/open source version available, that can easily be added to your own projects using NuGet.

So enough marketing , however, one of the things that I miss in the default implementation is the ability to have a single text box that can be used for searching. On default,  the grid adds the ability to search per column with different operators (contains, Begins with, Ends with, etc.). What is nice and enables some more complex searches. But it takes a couple more clicks to use them and pretty often I just want to type in some text and have it search over all content, maybe including columns that aren’t visible or even over content that isn’t even available to the grid at all.

As I’ve seen a couple similar questions and requests about this, I thought it might be helpful to write down and publish a solution on how that could be implemented. I’ve published a working demo project to Teleriks Code library so that you can just Copy&Paste the stuff you need and implement it in your own projects. It’s based on the Default ASP.Net MVC 3 template. I just added the Telerik ASP.Net MVC extensions via NuGet. However it’s written in VB.Net, mainly as I prefer this language and also because there aren’t many examples in VB.Net. So be nice with me

OK, let’s start. The first thing we need is a textbox, where we can type in the string we would like to search for.

Now we need a controller action, that can take a search string and returns our objects based on that search string. Let’s call it “_Select”

As you can see, we take an optional string (avoids dealing with nothing) and pass this string to a different function that returns our objects based on that string. How we implement this search, what properties etc. is completely up to ourselves and doesn’t really matter at the moment. In my case I just do a search about all properties/columns. Additionally we decorate this function with the “GridAction” attribute and return a GridModel. That’s Telerik specific and will just enable all the magic for sorting, paging, etc. I’m not digging deeper into this as its already well documented.

Now all we need to do is hook into each call from the grid and add our custom search string to the list of parameters before they are send to our controller. For refresh, sorting, paging and filtering (yes, we could combine this with column based filtering), we can make use of the “onDataBinding” event. This is the necessary code to have the Grid call a javascript function at runtime:

and the corresponding javascript function

Here we just get any value from our search box and add it to the data sent to our action method. If the grid shall also support insert, update and delete operations, we need to hook into two additional events, as “onDataBinding” isn’t called for them. For Insert and Update its “OnSave” and for Delete it’s “OnDelete”. For our purposes, we can target them to a single function. Let’s call it “Grid_onChange”:

and the corresponding Javascript function

As you can see, there is a small difference in the way how we add the search string information, as we add it to the list of values this time. This would actually be enough to get it working. If we type anything in the search box and click on the grid to refresh, sort, whatever, it would immediately filter the results. We could also add a search button to have it explicitly filter the results. But how about a nicer solution? I want it to automatically filter the values, whenever someone types something in there. We could hook into the onChange event of the textbox, but that doesn’t cover all possible scenarios. Let’s try a different approach.

We define a local variable in our Javascript, that stores the search text that has been used the last time the grid has been updated. Now we just need to regularly check if that value differs from the value in the textbox and if so, force the Grid to refresh.

This function will ensure, that if the text in the search box has changed, it will force the grid to update the data. If not, it will call itself again after the specified timeout to check for changes again. I use 200 ms which “feels” like almost immediately but just tweak it to whatever feels appropriate to you.

Now we need to initiate this function at least one time, so it can call itself after that. The most appropriate time for this is, when the grid has finished loading its data for the first time. For this, we have another Client event, we could hook into called “onComplete”. This will also ensure, that it re-starts this process every time it has been updated. So our Client events definition now looks like

and the Javascript function

Now to make it pretty, I want to have the search box within the Toolbar on top of the grid. Currently the grid doesn’t allow you to mix standard buttons like “Insert” with a custom template to add a textbox. So let’s use some jQuery magic here and simply move the textbox to the toolbar. Normally one would use the Page “load” or “ready“ event, but if you get the grid dynamically via AJAX call, that might not work. Instead we will use the “OnLoad” event of the Grid, that gets called when the grid itself is ready.

and the Javascript function

I also add a custom class “search” to the textbox, so that we can configure a “float: right;” via CSS. This will move it nicely to the right of the toolbar, without to interfere with any of the other buttons in the toolbar. If there is no button in the toolbar, the toolbar won’t be rendered at all and we would be able to move the search box then. In this case just add a custom button to it as a placeholder. And instead of moving the textbox, we replace the placeholder with it. The final view could now look like this:

This is just an initial implementation that can be extended in a lot of ways. As mentioned, a sample project, where you can see all this in action, has been published on Teleriks Code library. It also contains the methods that implement the same for Insert, Update and Delete. And in case you don’t want to download it and just want to see all samples above at once, here the full source of the view. It’s based on a list of computers that will be generated at runtime: