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 }
];
},
};
//.............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 }
];
},
};
0 Comments