Telerik blogs

Great news everybody! With its latest version and the addition of MVC3 specific build, you can now bind the MVC Grid to a collection of dynamic objects quite easily. Note that we will be using the new Razor view engine for extra fun.

  • Just declare the View’s model to be IEnumerable<dynamic>
  1: @using Telerik.Web.Mvc.UI
  2: @model IEnumerable<dynamic>
  3: @(
  4:     Html.Telerik().Grid(Model)
  5:                 .Name("Grid")
  6:                 .Columns(columns => 
  7:                 { 
  8:                     columns.Bound("ProductID");
  9:                     columns.Bound("ProductName");
 10:                     columns.Bound("UnitPrice").Format("{0:c}");
 11:                     columns.Bound("QuantityPerUnit");                    
 12:                 })                
 13: )
  • Pass the Model to the grid

  1: @using Telerik.Web.Mvc.UI
  2: @model IEnumerable<dynamic>
  3: @(
  4:     Html.Telerik().Grid(Model)
  5:                 .Name("Grid")
  6:                 .Columns(columns => 
  7:                 { 
  8:                     columns.Bound("ProductID");
  9:                     columns.Bound("ProductName");
 10:                     columns.Bound("UnitPrice").Format("{0:c}");
 11:                     columns.Bound("QuantityPerUnit");                    
 12:                 })                
 13: )
  • And declare which properties to be shown as columns

  1: @using Telerik.Web.Mvc.UI
  2: @model IEnumerable<dynamic>
  3: @(
  4:     Html.Telerik().Grid(Model)
  5:                 .Name("Grid")
  6:                 .Columns(columns => 
  7:                 { 
  8:                     columns.Bound("ProductID");
  9:                     columns.Bound("ProductName");
 10:                     columns.Bound("UnitPrice").Format("{0:c}");
 11:                     columns.Bound("QuantityPerUnit");                    
 12:                 })                
 13: )

You can download a runnable sample by clicking here.

Enjoy.

p.s. I almost forgot, for all you “classic” ADO.NET fans, you now can bind the Grid component to a DataTable too. A quick demo can be found here.


About the Author

Atanas Korchev

 is Team Leader in Kendo UI Team

Related Posts

Comments

Comments are disabled in preview mode.