Uncaught TypeError : cannot read property 'pager' of undefined In KendoGrid

Question

Im trying to keep option "All" for showing all the data in grid by using following code. but when the code reaches grid.pager.element its showing error as "pager" undefined.

at first when i click on search with group "TBU" there is no option for All.When i click again "All" appears as how many times i have clicked.

  $.ajax({
         type: "POST",
         url: "Report_Services/Report.asmx/BindKendoAvailableList",
         data: "{'groupId':" + $('#cboGroupName option:selected').val() + "}",        
         contentType: "application/json; charset=utf-8",
         dataType: "json",
         success: function (result) {

             data = result.d;
             $("#grid").kendoGrid({
                 dataSource: {
                     transport: {
                         read: function (options) {
                             options.success(data);
                         }
                     },
                     schema: {
                         type: "xml",
                         data: "/NewDataSet/myTable",
                         model: {
                             // configure the fields of the object                                  
                             fields: {
                                 AssetCode: "AssetCode/text()",
                                 AssetName: "AssetName/text()"
                                 AssetStatusName: "AssetStatusName/text()"
                             }
                         }
                     },
                     pageSize: 10
                 },
                 sortable: true,
                 filterable: true,
                 reorderable: true,
                 navigatable: true,
                 selectable: "multiple",
                 columnMenu: true,
                 resizable: true,
                 pageable: {
                     refresh: true,
                     pageSizes: true,
                     buttonCount: 8
                 },
                 columns:
                    [{
                        field: "AssetCode",
                        title: "Asset Id"
                    }, {
                        field: "AssetName",
                        title: "Asset Name"
                    },{
                        field: "AssetStatusName",
                        title: "Status"
                    }]
             });
         }
    });

    debugger;
    var grid = $("#grid").data("kendoGrid");
    var dropdown = grid.pager.element
                        .find(".k-pager-sizes [data-role=dropdownlist]")
                        .data("kendoDropDownList");

    var item = {};
    item[dropdown.options.dataTextField] = "All";
    item[dropdown.options.dataValueField] = 1000000;
    dropdown.dataSource.add(item);

    dropdown.bind("change", function (e) {
        if (this.text() == "All") {
            grid.one("dataBound", function () {
                setTimeout(function () {
                    dropdown.span.text("All");
                });
            });
        }
   });

Answer 1

In your case it sounds like the grid variable is undefined not the pager. Make sure that you execute this code after the Grid is actually initialized and also make sure the selector is right.