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

  1. public class DisplayViewEntity
  2. {
  3. public List<Dictionary<string, string>> DisplayData { get; set; }
  4. public int TotalRecord { get; set; }
  5. public DisplayCommand DisplayArg { get; set; }
  6. }
  8. public class DisplayCommand
  9. {
  10. public string DisplayFieldText { get; set; }
  11. public string DisplayFieldName { get; set; }
  12. public string DisplayFieldWidth { get; set; }
  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<string, string>> asd = new List<Dictionary<string, string>>();
  4. Dictionary<string, string> a = new Dictionary<string, string>();
  5. for (int i = 1; i <= 10; i++)
  6. {
  7. a = new Dictionary<string, string>();
  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. }
  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";
  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. }
  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. });
  14. function fnCreate_Grid(gridData) {
  15. debugger;
  16. var a = JSON.parse('@Html.Raw(Json.Encode(Model.DisplayArg))');
  18. var DispFieldName = a.DisplayFieldText.split(",");
  19. var DispCaption = a.DisplayFieldName.split(",");
  20. var FieldWidth = a.DisplayFieldWidth.split(",");
  22. var columns = [];
  23. $.each(DispCaption, function (i) {
  24. columns.push({ field: DispFieldName[i], title: DispCaption[i], width: FieldWidth[i] + "%" });
  25. });
  27. var colData = JSON.stringify(columns);
  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>