Searching The KendoUI Grid using a Form

By dlewis On August 23, 2012 · 1 Comment

The KndoUI grid (http://demos.kendoui.com/web/grid/index.html) is defiantly proving it’s self to be one of the best javascript grid systems I have worked with. That being said they realy have missed the mark on a few things. One big one is no exposed on row click event that I explored and showed you how to work around here : http://sympletech.com/adding-on-row-click-to-the-kendoui-grid/. Another which I will dive into today is the lack of an easy way to bind the grid to an on-page form.

For everything I love about the grid – it’s built in filtering and editing is just weak and an unacceptable solution for any type of grown up application.

As another pre-cursor before we get started here – this solution is setting everything up to be based on server side paging, however I’m not going to be demonstrating any back end code. If you want to see my solution on how to get backend server side paging for the KendoUI Grid set up you can check out this post here : http://sympletech.com/hacking-on-the-kendo-ui-grid-enabling-server-side-sorting-and-paging-in-asp-net-mvc/

And with that let’s get started. Below you will find a basic kendoUI Grid backed by server side data source. This is where we left off here : http://sympletech.com/hacking-on-the-kendo-ui-grid-enabling-server-side-sorting-and-paging-in-asp-net-mvc/ with the addition of a form we want to use for searching our grid.

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>KendoGrid </title>
    
    <link rel="stylesheet" type="text/css" href="/Content/kendo/2012.2.710/kendo.common.min.css" />
    <link rel="stylesheet" type="text/css" href="/Content/kendo/2012.2.710/kendo.metro.min.css" />
    <script type="text/javascript" src="/Scripts/kendo/2012.2.710/jquery.min.js"></script>
    <script type="text/javascript" src="/Scripts/kendo/2012.2.710/kendo.web.min.js"></script>
    
    <script type="text/javascript">
        $(function () {
            var gridDataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: '/Home/GridData/',
                        type: "POST"
                    }
                },
                schema: {
                    data: function (data) {
                        return data.Items;
                    },
                    total: function (data) {
                        return data.TotalCount;
                    }
                },
                serverSorting: true,
                serverFiltering: true,
                serverPaging: true,
                pageSize: 5
            });

            $("#kGrid").kendoGrid({
                dataSource: gridDataSource,
                pageable: {
                    refresh: true,
                    pageSize: 5
                }
            });
        });
    </script>        
</head>
<body>
    <div>
        <div id="kGrid"></div>
    </div>

    <form id="frmSearch">
        Search For : <input name="searchTerm" /> <br />
        Some Checkbox : <input name="somecheckbox" type="checkbox" /><br />
        Some DropDownList : 
            <select name="somedropdown">
                <option>va1 1</option>
                <option>Val 2</option>
            </select>
        <input type="submit" />
    </form>
</body>
</html>

So the first thing to get our head around is that we don’t want to just try and submit the form and somehow push the results over to the grid’s data source. This was my initial attack plan and once I got it working I found that as soon as you would page or sort the grid it would revert back to the base data source with none of the form params included in the paging and sorting posts.

What we need to do is to marry the form to the kendoUI Grid’s data source so that every time it makes a call out to the server to change the page or to sort it includes all of the form fields in that request. Also as we set up this relationship, it’s not good enough to just set the data source params (ie. param1 = $(“#searchTerm”).val()) as that is only a one time lookup – we need to bind a function to the param so that every time it’s going to query the data source it recheck the param.

Ok have I lost you yet?

Lets look at some code I think it will make more sense.

            //Lookup the form and serialize it
            var $form = $("#frmSearch");
            var formData = $form.serialize().split('&');

            //Iterate over each form element and add it to an object collection
            var formParams = {};
            $(formData).each(function () {
                var nvp = this.split('=');

                //Instead of setting a value to the param we set up a function to get the value
                formParams[nvp[0]] = function () {
                    var $inputEl = $form.find('*name=[' + nvp[0] + ']').first();
                    return $inputEl.val();
                };
            });

And now to link our new form param data source provider we simply have to add it to the grid datasource. (also as a note of clarity – the above code needs to come BEFORE the kendo grid definition. (The complete code will be posted at the bottom)

            var gridDataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: '/Home/GridData/',
                        type: "POST",
                        data: formParams
                    }
                },
                ....

If you refresh the page now you will see your form params are now being sent every time the grid calls out for its data source – and they change to match the value in the form with each call.

However if you hit the submit button on the form it does a standard post back and you end up on your page with a long get in the url.

The final piece of our little project is to wire up the onSubmit to tell the KendoUI Grid to go out and reload it’s data source. We do this part AFTER the the kendo grid definition. And we need to work against the variable returned by the $(“#kGrid”).kendoGrid() jquery extension method.

This part is pretty easy and looks like this:

            var kGrid = $("#kGrid").kendoGrid({
                dataSource: gridDataSource,
                pageable: {
                    refresh: true,
                    pageSize: 5
                }
            });

            $("#frmSearch").submit(function (e) {
                e.preventDefault();
                gData.dataSource.page(1);                kGrid.data("kendoGrid").dataSource.read();
            });

And with that we can hit the submit button and it will reload the grid.

Here is a full copy of the code:

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>KendoGrid </title>
    
    <link rel="stylesheet" type="text/css" href="/Content/kendo/2012.2.710/kendo.common.min.css" />
    <link rel="stylesheet" type="text/css" href="/Content/kendo/2012.2.710/kendo.metro.min.css" />
    <script type="text/javascript" src="/Scripts/kendo/2012.2.710/jquery.min.js"></script>
    <script type="text/javascript" src="/Scripts/kendo/2012.2.710/kendo.web.min.js"></script>
    
    <script type="text/javascript">
        $(function () {

            //Lookup the form and serialize it
            var $form = $("#frmSearch");
            var formData = $form.serialize().split('&');

            //Iterate over each form element and add it to an object collection
            var formParams = {};
            $(formData).each(function () {
                var nvp = this.split('=');

                //Instead of setting a value to the param we set up a function to get the value
                formParams[nvp[0]] = function () {
                    var $inputEl = $form.find('*[name=' + nvp[0] + ']').first();
                    return $inputEl.val();
                };
            });



            var gridDataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: '/Home/GridData/',
                        type: "POST",
                        data: formParams
                    }
                },
                schema: {
                    data: function (data) {
                        return data.Items;
                    },
                    total: function (data) {
                        return data.TotalCount;
                    }
                },
                serverSorting: true,
                serverFiltering: true,
                serverPaging: true,
                pageSize: 5
            });

            var kGrid = $("#kGrid").kendoGrid({
                dataSource: gridDataSource,
                pageable: {
                    refresh: true,
                    pageSize: 5
                }
            });

            $("#frmSearch").submit(function (e) {
                e.preventDefault();
                gData.dataSource.page(1);
                kGrid.data("kendoGrid").dataSource.read();
            });
        });
    </script>        
</head>
<body>
    <div>
        <div id="kGrid"></div>
    </div>

    <form id="frmSearch">
        Search For : <input name="searchTerm" /> <br />
        Some Checkbox : <input name="somecheckbox" type="checkbox" /><br />
        Some DropDownList : 
            <select name="somedropdown">
                <option>va1 1</option>
                <option>Val 2</option>
            </select>
        <input type="submit" />
    </form>
</body>
</html>

If you like this functionality it’s all baked into my ever growing SympleLib Library you can find over on GIT Hub here : https://github.com/sympletech/SympleLib

Question, Comments, And Suggestions are always welcome!

Tagged with → KendoUI grid

One Response to Searching The KendoUI Grid using a Form

devi says:

January 23, 2013 at 5:26 am

I had create kendo grid,and created button to select data and copy the data from kendo grid.
my issue is here grid footer also selecting without footer how to select data?
http://jsfiddle.net/MG89G/242/#run

Searching The KendoUI Grid using a Form

Share this:

One Response to Searching The KendoUI Grid using a Form

Leave a Reply Cancel reply