Populate Generic Grid at Run Time Using Kendo UI and Jqeury

For doing these, we first create the model class as below:

  1. public class DisplayViewEntity      
  2. {      
  3.     public List<Dictionary<stringstring>> DisplayData { getset; }      
  4.     public int TotalRecord { getset; }      
  5.     public DisplayCommand DisplayArg { getset; }      
  6. }      
  7.   
  8. public class DisplayCommand      
  9. {              
  10.     public string DisplayFieldText { getset; }      
  11.     public string DisplayFieldName { getset; }      
  12.     public string DisplayFieldWidth { getset; }      
  13. }   
After it, we create action method in controller which return the specified data which will bind to the grid:
  1. public ActionResult GenericGrid()      
  2. {      
  3.     List<Dictionary<stringstring>> asd = new List<Dictionary<stringstring>>();      
  4.     Dictionary<stringstring> a = new Dictionary<stringstring>();      
  5.     for (int i = 1; i <= 10; i++)      
  6.     {      
  7.         a = new Dictionary<stringstring>();      
  8.         a.Add("A""A" + i.ToString());      
  9.         a.Add("B""B" + i.ToString());      
  10.         a.Add("C""C" + i.ToString());      
  11.         a.Add("D""D" + i.ToString());      
  12.         a.Add("E""E" + i.ToString());      
  13.         asd.Add(a);      
  14.     }      
  15.   
  16.     DisplayCommand fc = new DisplayCommand();      
  17.     fc.DisplayFieldName = "First Name,2nd Name,Third Name,Last Col";      
  18.     fc.DisplayFieldText = "A,B,C,D";      
  19.     fc.DisplayFieldWidth = "50,20,0,50";      
  20.   
  21.     DisplayViewEntity fve = new DisplayViewEntity();      
  22.     fve.DisplayData = asd;      
  23.     fve.DisplayArg = fc;      
  24.     return View(fve);      
  25. }  
Now below is the code for view:
  1. @model  TelerikMvcRndProject.Models.DisplayViewEntity    
  2. @{    
  3.     ViewBag.Title = "GenericGrid";    
  4.     Layout = "~/Views/Shared/_Layout.cshtml";    
  5. }    
  6.     
  7. <h2>Generic Grid</h2>    
  8. <div id="grid"></div>    
  9. <script>    
  10.     $(document).ready(function () {    
  11.         fnCreate_Grid(JSON.parse('@Html.Raw(Json.Encode(Model.FindData))'));    
  12.     });    
  13.     
  14.     function fnCreate_Grid(gridData) {    
  15.         debugger;    
  16.         var a = JSON.parse('@Html.Raw(Json.Encode(Model.DisplayArg))');    
  17.     
  18.         var DispFieldName = a.DisplayFieldText.split(",");    
  19.         var DispCaption = a.DisplayFieldName.split(",");    
  20.         var FieldWidth = a.DisplayFieldWidth.split(",");    
  21.     
  22.         var columns = [];    
  23.         $.each(DispCaption, function (i) {    
  24.             columns.push({ field: DispFieldName[i], title: DispCaption[i], width: FieldWidth[i] + "%" });    
  25.         });    
  26.            
  27.         var colData = JSON.stringify(columns);    
  28.     
  29.         $('#grid').kendoGrid({    
  30.             dataSource: {    
  31.                 type: 'json',    
  32.                 data: gridData,    
  33.                 pageSize: 7    
  34.             },    
  35.             selectable: "single",    
  36.             serverPaging: true,    
  37.             height: 300,    
  38.             pageSize: 10,    
  39.             pageable: {    
  40.                 refresh: false,    
  41.                 pageSizes: false,    
  42.                 buttonCount: 10    
  43.             },    
  44.             columns: columns,    
  45.         });    
  46.     }    
  47. </script>