MVC KendoGrid Data retrieval sample implemented

Recently I got task to implement KendoGrid for one of my implementation and thought to share the experiences gained while researching about Kendo (DevCraft).

Task : Create Notes (plain text) with some other parameters (which were already populated while main view is loading). So I have to integrate my Notes section in a partial view and avoid postback the page and refresh KendoGrid, with the new notes added by the user.

My approach:

I have created a div with id = "grid". So my ultimate target is to update KendiGrid to this div.

<div id="grid"></div>

then I have gone through several samples mentioned in KendoGrid documentation and learnt special points regarding the changes I need to apply and match with the configurations.

(KendoGrid samples : http://docs.telerik.com/kendo-ui/api/javascript/ui/grid and http://demos.telerik.com/kendo-ui/grid/index)

So I have started like below:

$("#grid").kendoGrid({
})

We should configure a datasource for the grid. So I have able to create datasource like below

$("#grid").kendoGrid({
             dataSource: {
                    type: "json",
                    transport: {
                        read: { url: '@Url.Action("YOURACTION", "YOURCONTROLLER")', dataType: "json", type: "GET", cache: false },
                        parameterMap: function (data, operation) {
                            if (operation == "read") {                              
                                data["YOURPARAMETERTOPASSTOACTION"] = PARAM1;
                            }
                            return data;
                        }
                    }

})

(I just reading the data and pumping into the grid. I also pushing one parameter to the Action and I'm using json calls)

I need to show an error message when KendoGrid facing a issue on loading data. So it's like below after update.

$("#grid").kendoGrid({
             dataSource: {
                    type: "json",
                    transport: {
                        read: { url: '@Url.Action("YOURACTION", "YOURCONTROLLER")', dataType: "json", type: "GET", cache: false },
                        parameterMap: function (data, operation) {
                            if (operation == "read") {                              
                                data["YOURPARAMETERTOPASSTOACTION"] = PARAM1;
                            }
                            return data;
                        }
                    },
                    error: function (e) {
                        ShowGeneralErrorMsg('ERROR TO SHOW');
                    }
               }

})

Also I need to define the schema to show.

$("#grid").kendoGrid({
             dataSource: {
                    type: "json",
                    transport: {
                        read: { url: '@Url.Action("YOURACTION", "YOURCONTROLLER")', dataType: "json", type: "GET", cache: false },
                        parameterMap: function (data, operation) {
                            if (operation == "read") {                              
                                data["YOURPARAMETERTOPASSTOACTION"] = PARAM1;
                            }
                            return data;
                        }
                    },
                    error: function (e) {
                        ShowGeneralErrorMsg('ERROR TO SHOW');
                    },
                     schema: {
                        model: {
                            id: "FIELD1",
                            fields: {
                                OTHERFIELD1: { type: "string" },
                                OTHERFIELD2: { type: "string" },
                                OTHERFIELD3: { type: "date" }
                            }
                        }
                    },
                     batch:false
               }
})

After defining the schema, I have updated the columns configurations with custom template definitions for several columns. Disable sorting.

$("#grid").kendoGrid({
                dataSource: {
                    type: "json",
                    transport: {
                        read: { url: '@Url.Action("YOURACTION", "YOURCONTROLLER")', dataType: "json", type: "GET", cache: false },
                        parameterMap: function (data, operation) {
                            if (operation == "read") {                              
                                data["YOURPARAMETERTOPASSTOACTION"] = PARAM1;
                            }
                            return data;
                        }
                    },                  
                    error: function (e) {
                        ShowGeneralErrorMsg('ERROR TO SHOW');
                    },

                    schema: {
                        model: {
                            id: "FIELD1",
                            fields: {
                                OTHERFIELD1: { type: "string" },
                                OTHERFIELD2: { type: "string" },
                                OTHERFIELD3: { type: "date" }
                            }
                        }
                    },
                    batch: false
                },
                navigatable: true,
                dataBound: function () {

                },
                sortable: false,
                toolbar: kendo.template('<div class="dropdown milestone-add-btn">' +
                            '<a href="javascript:void(0);" onclick="javascript:ShowAddForm();" class="action-btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"><i class="icon icon-add icon-accent"></i><span>add</span></a>' +
                                        '</div>')

                       ,
                columns: [{
                    field: "OTHERFIELD1",
                    headerTemplate: '<div><label class="grid_header_label">OTHERFIELD1</label></div>',
                    template: '<a class="text_ellipsis" style="float:left; width:400px;" href="javascript:void(0);" title="#=OTHERFIELD1#">#=OTHERFIELD1#</a>'

                },
                {
                    field: "OTHERFIELD2",
                    headerTemplate: '<label class="grid_header_label">OTHERFIELD2</label>',
                    template: "#= kendo.toString(kendo.parseDate(OTHERFIELD2, 'yyyy-MM-dd'), 'MM/dd/yyyy') #"
                },
                {
                    field: "User",
                    headerTemplate: '<div><label class="grid_header_label">OTHERFIELD3</label></div>',
                    editor: OTHERFIELD3Editor,
                    template: "#=OTHERFIELD3#"
                },
                {
                    command: [
                    {
                        name: "destroy",
                        text: "&nbsp;",
                        iconClass: "icon icon-accent icon-remove icon-align icon-2x",

                    }
                    ]
                }],
                editable: false
            });

            $("#grid").find(".k-grid-toolbar").insertAfter($("#grid .k-grid-content"));