How to bind the Grid data using Dictionary collection in ASP.NET MVC Grid

[Avi Segal]

Hi,

In my model I have a property which is a dictionary.

What is the best way to get the values from the dictionary & display them in the grid?

Many Thanks,

[Mohammed Farook J]

Hi Avi Segal, 

 

Thanks for contacting Syncfusion support. 

 

Essential JS2 Grid supports IEnumerable collection of data. We have converted the Dictionary to List and bind into Grid. Please find the code example and sample for your reference. 

 

 

[Controller] 

 

public ActionResult Index() 

        {             

            Dictionary<int, OrderTable> gridData = new Dictionary<int, OrderTable>(); 

            int code = 1000; 

          

            for (var i =1; i < 11; i++) 

            { 

                gridData.Add(code+ 1, new OrderTable() { OrderID = code + i, CustomerID = "VINET", ShipCountry = "France", EmployeeID = i }); 

                gridData.Add(code+2, new OrderTable() { OrderID = code + i, CustomerID = "TOMSP", ShipCountry = "Germany", EmployeeID = i }); 

                gridData.Add(code+3, new OrderTable() { OrderID = code + i, CustomerID = "RONALD", ShipCountry = "Brazil", EmployeeID = i }); 

                gridData.Add(code+4, new OrderTable() { OrderID = code + i, CustomerID = "KARIN", ShipCountry = "USA", EmployeeID = i }); 

                gridData.Add(code+5, new OrderTable() { OrderID = code + i, CustomerID = "MARIO", ShipCountry = "Maxico", EmployeeID = i }); 

                code += 5; 

            } 

 

            var data = gridData.Select(d => d.Value).ToList(); 

 

 

            ViewBag.dataSource = data; 

            return View(); 

        } 

 

 

[Cshtml] 

 

 

  @Html.EJS().Grid("Grid").DataSource((IEnumerable<Object>)ViewBag.dataSource).Columns(col => 

{ 

    col.Field("OrderID").HeaderText("Order ID").Width("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

    col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add(); 

    col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("150").Add(); 

    col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add(); 

}).AllowPaging(true).Render() 

 

 

 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication14-514080168.zip  

 

 

Data-binding : https://ej2.syncfusion.com/16.1.37/aspnet/documentation/grid/databinding.html?syntax=razor 

 

Regards, 

J Mohammed Farook