Post
Ask Question

MVC Web Grid using Dynamic Data Table

Using Data table model in Razor view engine
 
1. Using Data table namesapce:
 
@model System.Data.DataTable
@using System.Data
 
2. In View page, pass Data table Controller to view using ViewBag data(converted into dynamic grid data)
  1.    
  2. List<dynamic> obj1 = new List<dynamic>();  
  3. obj1= ViewBag.Total;  
  4. var grid = new WebGrid(obj1);   
3. Using  @'List<WebGridColumn>'  generic column with editable link with ViewBag data
 
Controller: 
  1. DataTable dt = (DataTable) Session["dtResult"];  
  2. List < WebGridColumn > columns = new List < WebGridColumn > ();  
  3. foreach(DataColumn col in dt.Columns)  
  4. {  
  5.     columns.Add(new WebGridColumn()  
  6.     {  
  7.         ColumnName = col.ColumnName, Header = col.ColumnName  
  8.     });  
  9. }  
  10. columns.Add(new WebGridColumn()  
  11. {  
  12.     Format = (item) =>  
  13.     {  
  14.         return new HtmlString(string.Format("<a href= {0}>Edit</a>", Url.Action("Edit", "Home", new  
  15.         {  
  16.             Id = item.SSN  
  17.         })));  
  18.     }  
  19. });  
  20. ViewBag.Columns = columns;  
  21. //Converting datatable to dynamic list     
  22. var dns = new List < dynamic > ();  
  23. dns = ConvertDtToList(dt);  
  24. ViewBag.Total = dns;  
ConvertDtToList Method: 
  1. public List<dynamic> ConvertDtToList(DataTable dt)  
  2. {  
  3.    var data = new List<dynamic>();  
  4.    foreach (var item in dt.AsEnumerable())  
  5.    {  
  6.       // Expando objects are IDictionary<string, object>  
  7.       IDictionary<string, object> dn = new ExpandoObject();  
  8.   
  9.       foreach (var column in dt.Columns.Cast<DataColumn>())  
  10.       {  
  11.          dn[column.ColumnName] = item[column];  
  12.       }  
  13.   
  14.       data.Add(dn);  
  15.    }  
  16.    return data;  
  17. }   
4. Bind the grid
 
 Generic columns created in controller :ViewBag.Columns  
  1. @grid.GetHtml( columns: ViewBag.Columns,tableStyle: "table", footerStyle: "foot")  
 5. Style for table format, 
  1. <style>  
  2.     table  
  3.     {  
  4.         font-family: verdana,arial,sans-serif;  
  5.         font-size: 11px;  
  6.         color: #333333;  
  7.         border-width: 1px;  
  8.         border-color: #999999;  
  9.         border-collapse: collapse;  
  10.         width: 80% !important;  
  11.         max-width: 80% !important;      
  12.     }  
  13.     table th  
  14.     {  
  15.         background: #b5cfd2;  
  16.         border-width: 1px;  
  17.         padding: 8px;  
  18.         border-style: solid;  
  19.         border-color: #999999;  
  20.     }  
  21.     table td  
  22.     {  
  23.         background: #dcddc0;  
  24.         border-width: 1px;  
  25.         padding: 8px;  
  26.         border-style: solid;  
  27.         border-color: #999999;  
  28.     }  
  29.     .foot  
  30.     {  
  31.         text-align: center;  
  32.     }  
  33. </style>