load jquery kendo grid based on search textbox not in page load

Question

I have one jquery kendo grid in my application where i want that if search textbox has value then only it should load the grid not in page load. But i don't know where should i put my grid either in inside document.ready function or outside of this function.

Below is my jquery grid code:

$("#grid").kendoGrid({
            autoBind:false,
            dataSource: {
                transport: {
                    read: {
                        url: "/Home/GetSearchData",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        data: { searchTerm: firstSearchVal }
                    },
                    parameterMap: function (data, operation) {
                        return kendo.stringify(data);
                    }
                },
                pageSize: 10,
                schema: {
                    data: "data",
                    total: "total"
                },

            },
            dataBound: function () {
                DisplayNoResultFound($("#grid"));
            },
            serverPaging: true,

            pageable: {
                refresh: true,
                pageSizes: true
            },
            rowTemplate: kendo.template($("#rowTemplate").html()),
        });
    });

This code loads data if put manual data in that and put this grid inside document.ready function. but i want here it should not heat on document.ready function only when textbox will have data then only kendo grid get called and for every different data it should refresh the grid based on the data.

Answer 1

you can do the following

$(document).ready(function(){
   $('#firstSearchVal').on('change',function(e){
      var value = $(this).val();
      if(value.length>=3) // search when the user provide at least 3 characters
      {
         // only refresh the datasource of the grid by passing the user search text entered.
         $('#grid').dataSource.read({searchTerm: value});
      }
   })
})

hope it will help you

Answer 2

You should create the grid in document.ready, but do not include the dataSource (or the dataBound-function). Instead when you want to load the grid (when there is a search text) then you use the setDataSource-function on the grid with your search result.
See http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-setDataSource for info on setDataSource.

Here is a complete snippet from the above link:

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
      { name: "Jane Doe", age: 30 }
  ]
});
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "John Doe", age: 33 }
  ]
});
var grid = $("#grid").data("kendoGrid");
grid.setDataSource(dataSource);
</script>

In your case you would create a DataSource based on the search text and then call setDataSource.