Create and Bind datasource to Kendo Grid from Jquery

Question

Hello guys,

 

i am working on Asp.Net MVC Project. i have to creted and initialize kendo grid from jquery file. the function that create kendo grid in jquery is as below

function initializeGrid(gridName, url, onSelectFunction) {
    onSelectFunction = onSelectFunction || null;
    var transport = {
        read: {
            //type: "POST",
            url: url,
            dataType: "json"
        }
    };
    var dataSource = new kendo.data.DataSource({
        transport: transport,
        pageSize: 30,
        schema: {
            model: {
                id: "ClientID",
                fields: {
                    ClientID: { type: "number", editable: false },
                    ClientName: { type: "string", validation: { required: true } }
                }
            }
        }
    });

    $("#" + gridName).kendoGrid({
        dataSource: dataSource,
        scrollable: true,
        height: 550,
        selectable: "multiple cell",
        filterable: true,
        columns: [
        {
            field: "ClientID",filterable: false,width:100
        },
        { Template: ("") },
        {
            field: "ClientName",title: "Client Name",width: 200
        }
    ]
    });
    $("#" + gridName).data("kendoGrid").bind();
    //$("#" + gridName).attr("data-val-number", "Invalid input.");
}

using this code i am trying to create a grid that will have two columns,   1 is client id which will be of check box type and second will be client name. i am passing the URL of controller in the function syntax as parameter from where the data should be loaded. in another jquery file i am calling this function like this 

initializeGrid("client", "/Clients/GetDataForCombo", null);

the end result is not what i wanted. it is not showing grid with the datasource instead it is showing grid area with white background.

 

 

Regards,

 

Savan Parmar