Monday 15 April 2013

Kendo Grid- Binding the JSON Data after getting response from the Ajax Call.

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