Update data in Grid

I am using Kendo grid to display the search results to used. I doing it following way but it is always giving error " Unable to get value of the property 'length': ". I checked and my json string is in correct format.

var pagePath = "Default.aspx";
 var fn = "getMenuData"
            var dataSource = new kendo.data.DataSource({
                
                transport: {
                    read: {
                        dataType: "json",
                        url: pagePath + "/" + fn,
                        contentType: "application/json; charset=utf-8",
                        type: "POST"
                    }
                },
                schema: {
                    data: "data"
                }
            });

           $("#grid").kendoGrid({
                dataSource: dataSource,
                height: 350,
                scrollable: true,
                sortable: true,
                filterable: true,
                pageable: true,
                groupable: true,
                columns: [{ title: "Menu ID", field: "MenuID" },
                    { title: "Menu Name", field: "MenuName"}]
            });

Also, how can I make it to that when user enter any value in the textbox on the page and clicks search button, the kendo grid updates its data to show search results. I tried rebind but it didn't work.

Thank you,
J