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:

```html
$("#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.