In Kendo UI while you are getting the data as a JSON object and you want to bind into a grid, so follow the method below :
<script type= "text/javascript">
$(document).ready(
function( )
{
InitializeGrid( );
}
function InitializeGrid() {
$.ajax({
async: false,
type: "POST",
url: "/Employee/GetEmployeeByFilter",
data: $('#frmSearch').serialize(),
}).success(function (result) {
grid = $("#grid").kendoGrid({
dataSource: { data: result.Data, total: result.Total, pageSize: 30 },
schema: { data: "Data", total: "Total" },
type: "POST",
serverPaging: false,
serverFiltering: false,
serverSorting: false,
height: gridHeight,
toolbar: kendo.template($("#template").html()),
change: function () {
var selectedRows = this.select();
selectedElement = this.dataItem(selectedRows[0]);
},
selectable: "single",
filterable: true,
sortable: true,
pageable: true,
resizable: true,
columns: [
{ field: "Name", title: "Name", width: 65 },
{ field: "Emp_No", title: "Emp No", type: 'string', width: 62 },
{ field: "Salary", title: "Salary", type: 'string', width: 78 },
]
});
});
}
</script>
View:
<div id="EmployeeReport">
<h1 id="employeeReport">EmployeeReport</h1>
<div id="grid"></div>
</div>
In the controller side:
public ActionResult GetEmployeeByFilter( Receive the Parameters from the client side )
{
// Do the processing......
return Json(new { Data =List of object you want to Pass to client side,
Total = List's Count }, JsonRequestBehavior.AllowGet);
}
Happy coding!
No comments:
Post a Comment