Kendo UI with Javascript Modular Pattern

Question

I'm in the process of creating a big business application using kendo ui. Since application is big. we have started to follow modular patter in javascript code.

When using modular pattern wtih kendo ui. i'm getting some errors.

i have created hierarchy grid. Each grid code will be modular object. like below:

But i'm getting below error: (I have commented error lines like this //error. Please see below)

SCRIPT5007: Unable to get property 'find' of undefined or null reference.

Reason for error is "this" object is referred to window object. But it should refer kendo grid object.. how to resolve this

   var Customer = (function ($,window) {
var gridCustomer = null;
var dataSource = null;
var createColumns = function () {
    return [
                {
                    field: "FirstName",
                    title: "First Name",
                    width: "110px"
                },
                {
                    field: "LastName",
                    title: "Last Name",
                    width: "110px"
                },
                {
                    field: "Country",
                    width: "110px"
                },
                {
                    field: "City",
                    width: "110px"
                },
                {
                    field: "Title"
                }
    ]
};
var setDataSource = function () {
    if (customerGridDataSource != undefined) {
        return dataSource = new kendo.data.DataSource({
            data: customerGridDataSource,
            schema: {
                data: function (response) {
                    return response;
                },
                total: function (response) {
                    return response.length;
                },
                model: {
                    id: "CustomerID",
                    fields: {
                        CustomerID: { editable: false, nullable: false, type: "int" },
                        FirstName: { editable: true, nullable: false, type: "string" },
                        LastName: { editable: true, nullable: true, type: "string" },
                        Country: { editable: true, nullable: true, type: "string" },
                        City: { editable: true, nullable: true, type: "string" },
                        Title: { editable: true, nullable: true, type: "string" }
                    }
                }
            },
            pageSize: 5,
            serverPaging: false,
            serverSorting: false
        });
    }
    else {
        alert("Data Source undefined. Please Contact Administrator.")
    }
};
var onDataBound = function () {        
    this.expandRow(this.tbody.find("tr.k-master-row").first());//error
};
var init = function () {
    gridCustomer = $("#gridCustomer").kendoGrid({
        sortable: true,
        filterable: true,
        pageable: {
            pageSize: 5,
            pageSizes: true
        },
        columns: createColumns(),
        dataSource: setDataSource(),
        dataBound: onDataBound(),
        detailInit: Order.Init()
    });
};

return {
    Init: function () {
        init();
    }
}
})(jQuery,window);

var Order = (function ($,window) {
var gridOrder = null;
var dataSource = null;
var createColumns = function () {
    return [
            { field: "OrderID", width: "70px" },
            { field: "ShipCountry", title: "Ship Country", width: "110px" },
            { field: "ShipAddress", title: "Ship Address" },
            { field: "ShipName", title: "Ship Name", width: "200px" }
    ]
};
var setDataSource = function () {
    if (customerGridDataSource != undefined) {
        return dataSource = new kendo.data.DataSource({
            data: customerGridDataSource,
            schema: {
                data: function (response) {
                    return response;
                },
                total: function (response) {
                    return response.length;
                },
                model: {
                    id: "CustomerID",
                    fields: {
                        OrderID: { editable: false, nullable: false, type: "int" },
                        ShipCountry: { editable: true, nullable: false, type: "string" },
                        ShipAddress: { editable: true, nullable: true, type: "string" },
                        ShipName: { editable: true, nullable: true, type: "string" }                            
                    }
                }
            },
            pageSize: 5,
            serverPaging: false,
            serverSorting: false,
            serverFiltering: false,
            filter: { field: "CustomerID", operator: "eq", value: e.data.CustomerID }
        });
    }
    else {
        alert("Data Source undefined. Please Contact Administrator.")
    }
};    
var init = function (e) {
    gridOrder = $("<div/>").appendTo(e.detailCell).kendoGrid({            
        scrollable: false,
        sortable: true,
        pageable: true,
        columns: createColumns(),
        dataSource: setDataSource()
    });
};

return {
    Init: function (e) {
        init(e);
    }
}
})(jQuery,window);

 $(function () {
    Customer.Init();
 });

Answer 1

Kendo ui provides a parameter called e for dataBound event. e.sender is the grid. So your code should seems to this:

var onDataBound = function (e) {
    var grid = e.sender;
    grid.expandRow(grid.tbody.find("tr.k-master-row").first());
};

As I mention in comments: It seems the problem is with the dataBound: onDataBound(), because you should set the function onDataBound to the dataBound event not the result of execution onDataBound().The e is undefined because kendo executing the onDataBound() when it wants to set the initial value of dataBound event, not the time the dataBound event has occurred. replace dataBound: onDataBound() with dataBound: onDataBound and try again:

var init = function () {
gridCustomer = $("#gridCustomer").kendoGrid({
    sortable: true,
    filterable: true,
    pageable: {
        pageSize: 5,
        pageSizes: true
    },
    columns: createColumns(),
    dataSource: setDataSource(),
    dataBound: onDataBound, //Not immediately execution
    detailInit: Order.Init //Not immediately execution
});

};