Kendo Grid

Telerik Kendo Grid With .Net MVC Problem's Solutions(Also supported with Internet Explorer 8/ IE8)


Create a grid using "kendoGrid()" function in java script with ajax call which fetch data from "MVC Action" method


1. Generating a simple Kendo Grid

2. Sorting in a Group using client side paging

3. Customized excel export functionality for "Kendo Grid" with "excelExport" event in "KendoGrid()" function (also supported in IE 8)

4. For MVC application, server side pagging in kendo grid, sorting in group, excel export with all   data (also supported in IE 8)         
Or 
Server side pagging using MVC application to display only sliced data for selected page



1. Generating a simple Kendo Grid:


Code for Grid.cshtml page:


Additional css references:



<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.material.mobile.min.css" />



Additional java script references:




<script src="//kendo.cdn.telerik.com/2016.3.914/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.js"></script>



Style Code:

.customer-photo {
display: inline-block; width: 32px;
height: 32px; border-radius: 50%;
background-size: 32px 35px;
background-position: center center;
vertical-align: middle; line-height: 32px;
box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
margin-left: 5px;
}

.customer-name {
display: inline-block; vertical-align: middle; line-height: 32px; padding-left: 3px;
}

html {
font-size: 14px; font-family: Arial, Helvetica, sans-serif;
}


Script code:


$(document).ready(

 function () {
      setFetchDataForGrid();
 });


Function to fetch data from MVC controller by ajax get call:



function setFetchDataForGrid() {
   $.ajax({
      url: "/Home/GetEmployeeList",
      type: "Get", 
      success: function (retData) { 
                     bindDataWithKendoGrid(retData); 
                    }
  });
}


Function which binds data fetched from controller:


function bindDataWithKendoGrid(data){
   $("#grid").kendoGrid({
      dataSource: {
         pageSize: 5, data: data
      },
      height: 450,
      pageable: {
      refresh: true, pageSizes: true, buttonCount: 5
      },
      columns: [
        { field: "EmpId", title: "Employee Id" },
        { field: "OfficeId", title: "Office Id" },
        { field: "EmployeeName", title: "Employee Name" },
        { field: "Designation", title: "Designation", },
        { field: "Department", title: "Department" }
      ]
});
}


Home Controller with Action Method:




public JsonResult GetEmployeeList()
{
  List list = GetEmployeeListData();
  return new JsonResult()
  {
      Data = list, MaxJsonLength = int.MaxValue,
      JsonRequestBehavior =  JsonRequestBehavior.AllowGet
  };
}


Action Method which return list of "EmployeeModel" Class:



private List GetEmployeeListData()
{
   return new List()
  {
       new EmployeeModel
       {
        EmpId=1, EmployeeName = "Sajid",    Designation = "SE",
        Department = "Dev",    Mobile = "1234567890", OfficeId = "OFF12345"
        },
     
        new EmployeeModel
       {
          EmpId=2, EmployeeName = "Ram", Designation = "BA",
          Department = "Dev", Mobile = "123434890", OfficeId = "OFF12365"
        },
 
      new EmployeeModel
      {
       EmpId=3, EmployeeName = "Mohan", Designation = "BA",
       Department = "Dev", Mobile = "1234343890", OfficeId = "OFF12435"
       },
     
      new EmployeeModel
      {
       EmpId=4, EmployeeName = "Sameer", Designation = "NE",
       Department = "IT",    Mobile = "1234555890", OfficeId = "OFF12389"
       },
     
      new EmployeeModel
      {
       EmpId=5, EmployeeName = "Sumit", Designation = "CA",
       Department = "Account", Mobile = "1234567433", OfficeId = "OFF12364"
       },
     
       new EmployeeModel
      {
       EmpId=6, EmployeeName = "Rajeev", Designation = "CA", Department = "Account",
       Mobile = "4334567433", OfficeId = "OFF12465"
       }
   };
}



EmployeeModel Class:




public class EmployeeModel
{
    public int EmpId { get; set; }
    public string EmployeeName { get; set; }
    public string Designation { get; set; }
    public string OfficeId { get; set; }
    public string Department { get; set; }
    public string Mobile { get; set; }
}





2. Sorting in a Group using client side paging:


Grid grouped with "Department" and within group sorted with "OfficeId" ascending.


  kendo-sortingingroup


Note: Refer to above code and change for sorting in group is given below:





function bindDataWithKendoGrid(data) {
    $("#grid").kendoGrid({
        dataSource: {
        pageSize: 5,
        data: data,
        group: { 
        field: "Department" 
        },
       sort: { 
       field: "OfficeId", dir: "asc" 
       },
       },
       height: 450,
       groupable: true,
       sortable: true,
       pageable: {
       refresh: true,
       pageSizes: true, buttonCount: 5
       },
       columns: [
      { field: "EmpId", title: "Employee Id" },
      { field: "OfficeId", title: "Office Id" },
      { field: "EmployeeName", title: "Employee Name" },
      { field: "Designation", title: "Designation" },
      { field: "Department", title: "Department" }
      ]
  });
}






3. Customized excel export functionality for "Kendo Grid" with "excelExport" event in "KendoGrid()" function (also supported in IE 8):


This is the solution for excel export functionality of Kendo Grid which uses the "excelExport" event (for customizing the excel export code) of "kendoGrid()" function and "kendo.saveAs()" function using "proxyUrl". Note: This is the solution supported with "Internet Explorer 8/ IE 8".




kendo-sorting-ie8-supported-export


Below are the highlighted changes in "bindDataWithKendoGrid()" function:


function bindDataWithKendoGrid(data) { 
$("#grid").kendoGrid({ 
toolbar: ["excel"], 
excelExport: function (e) { 
e.preventDefault();
var worksheet = new kendo.ooxml.Workbook({ 
sheets: e.workbook.sheets });
kendo.saveAs({
dataURI: worksheet.toDataURL(),
fileName: "ExportedExcelFile.xlsx",
proxyURL: "/Home/Excel_Export",
forceProxy: true
});
},
dataSource: {
pageSize: 5,
data: data,
group: {
field: "Department"
},
sort: {
field: "OfficeId", dir: "asc"
}
},
height: 450,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{ field: "EmpId", title: "Employee Id" },
{ field: "OfficeId", title: "Office Id" },
{ field: "EmployeeName", title: "Employee Name" },
{ field: "Designation", title: "Designation"},
{ field: "Department", title: "Department" }
] });
}




Action method in HomeController: 


Add Action method named "Excel_Export" in "HomeController" with same as given below:


[HttpPost]
public ActionResult Excel_Export(string contentType, string base64, string fileName)
{
    var fileContents = Convert.FromBase64String(base64);
    return File(fileContents, contentType, fileName);
}


4. For MVC application, server side pagging in kendo grid, sorting in group, excel export with all data (also supported in IE 8):

Or

Server side paging using MVC application to display only sliced data for selected page:


Change for data binding function for server side paging: 



For server side paging change the "bindDataWithKendoGrid()"  as given:



function bindDataWithKendoGrid()
{
var frmData = new object();
frmData.EmpId = 1;
frmData.EmployeeName ="Sameer";

$("#grid").kendoGrid({
toolbar: ["excel"],
excel: { allPages: true },
excelExport: function (e) {
e.preventDefault();
var worksheet = new kendo.ooxml.Workbook({
sheets: e.workbook.sheets
});

kendo.saveAs({
dataURI: worksheet.toDataURL(),
fileName: "ExportedExcelFile.xlsx",
proxyURL: "/Home/Excel_Export",
forceProxy: true
});
},
data: null,
dataSource: {
transport: {
read: {
url: "Home/GetEmployeeListData",
dataType: "json",
data: frmData
}
},
type: 'aspnetmvc-ajax',
schema: {
data: 'Data',
total: 'Total',
errors: 'Errors'
},
 group: {
field: "Department",
sort: {
field: "OfficeId",
dir: "asc"
}
},
pageSize: 2,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
serverGrouping: true
},
attributes: {
style: "height:50px;"
},
showGroupedColumn: false,
sortable: true,
groupable: false,
pageable: true,
scrollable: true,
resizable: true,
reorderable: false,
filterable: true,
columnMenu: true,
draggable: true,
columns: [{
field: "EmpId",
title: "Employee Id"
},
{ field: "OfficeId", title: "Office Id" },
{ field: "EmployeeName", title: "Employee Name" },
{ field: "Designation", title: "Designation"},
{ field: "Department", title: "Department" }
],
dataBound: function(e) {
// event can be called at the time of dataBound with grid
}
});
}



Action method "GetEmployeeListData" in HomeController: 


Add action method in "HomeController" with same as given below:



[HttpPost]
public ActionResult GetEmployeeListData([DataSourceRequest] DataSourceRequest request, FilterModel model)
{
   List list = new List();
   return new JsonResult()
  {
     Data = list.ToDataSourceResult(request),
     MaxJsonLength = Int32.MaxValue
   };
}




"FilterModel" class to pass additional class: 


Add given code as below:


public class FilterModel
{
   public int EmpId { get; set; }
   public string EmployeeName { get; set; }
}

No comments:

Post a Comment

Static Keyword in .Net

Static Class: Ø    A static class  cannot  be  instantiated Ø    Only  contains   static members  (property/methods/fields) ...