This is a migrated thread and some comments may be shown as answers.

Kendo UI with Javascript Modular Pattern

1 Answer 122 Views
Grid
This is a migrated thread and some comments may be shown as answers.
HarisJayadev
Top achievements
Rank 1
HarisJayadev asked on 28 Apr 2014, 07:20 AM
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 bolded error lines. 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());
    };

    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();
});





1 Answer, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 29 Apr 2014, 11:52 AM
Hello,

It seems somebody answered your question on stackoverflow.

Regards,
Atanas Korchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
HarisJayadev
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Share this question
or