How to populate a kendo Grid?

How Can you populate a kendoGrid?

//.............html.........

<div id="gridSummary"></div>
  
 <script src="~/Scripts/jquery-1.8.2.min.js"></script>
 <script src="~/kendo/kendoui.web/js/kendo.web.min.js"></script>
.....kendo jquery.............

$(document).ready(function () {
    SummaryHelper.GenerateGrid();
}



  
var SummaryManager={
    gridDataSource: function () {

        var gridDataSource = new kendo.data.DataSource({
            type: "json",
            serverPaging: true,

            serverSorting: true,

            serverFiltering: true,

            allowUnsort: true,

            pageSize:15,

            transport: {
                read: {
                    url: '../Employee/GetEmployeeData/',

                    type: "POST",

                    dataType: "json",

                    contentType: "application/json; charset=utf-8",
                    cache: false,
                    async: false,
                },
             
                parameterMap: function (options) {

                    return JSON.stringify(options);

                }
            },
            schema: { data: "Items", total: "TotalCount" }
        });
        return gridDataSource;
    },
};

var SummaryHelper={
GenerateGrid: function () {
        $("#gridSummary").kendoGrid({
            dataSource: SummaryManager.gridDataSource(),
            pageable: {
                refresh: true,
                serverPaging: true,
                serverFiltering: true,
                serverSorting: true
            },
            xheight: 450,
            filterable: true,
            sortable: true,
            columns: SummaryHelper.Columns(),
            editable: false,
            navigatable: true,
            selectable: "row"

            //selectable: false

        });
    },

     Columns: function () {
        return columns = [
             { field: "Id", title: "Id", width: 50, hidden: true },
             { field: "Name", title: "Name", width: 80 },
             { field: "Designation", title: "Designation", width: 80 }

        ];
    },
};


   

Post a Comment

0 Comments