title: Kendo ASP.NET MVC helper Grid generic class
body: <p>I have the following dilemma:</p>
  
  <p>I am trying to make a Kendo UI Grid inside a partial View that will be used with different types of objects and that can support actions such as Delete or Create.</p>
  
  <p>The object looks like this:</p>
  
  <pre><code>public class GridViewModel
  {
      public Type ObjectType { get; set; }
      public IEnumerable&lt;object&gt; Items { get; set; }
  
      public GridViewModel(Type type, IEnumerable&lt;object&gt; items)
      {
          Items = items;
          ObjectType = type;
      }
  }
  </code></pre>
  
  <p>ObjectType is a variable of type Type that retains the type of a class. For example Employee, Product, Invoice or anything. </p>
  
  <p>Items is an IEnumerable list of objects of the type previously mentioned.</p>
  
  <p>Lets say we have an Employee View and we call inside the following:</p>
  
  <pre><code>@model IEnumerable&lt;Employee&gt;
  @{
      GridViewModel gridModel = new GridViewModel(typeof(Employee), Model);
  }
  @{
      Html.RenderPartial("_AdvancedGrid", gridModel);
  }
  </code></pre>
  
  <p>This way we load a partial view with the specified object as model.</p>
  
  <p>Now the Kendo UI Grid inside the partial view:</p>
  
  <pre><code>@model XMLProject.Models.GridViewModel
  @{
       System.Reflection.PropertyInfo[] propertyArray = Model.ObjectType.GetProperties();
  }
  @(Html.Kendo().Grid&lt;Employee&gt;()
      .Name("Grid")
      .Columns(columns =&gt;
      {
          foreach (var property in propertyArray)
          {
              columns.Bound(property.Name);
          }
          columns.Command(c =&gt; c.Destroy());
      })
      .ToolBar(toolbar =&gt; toolbar.Create())
      .Groupable()
      .Pageable()
      .Sortable()
      .Scrollable()
      .Filterable()
      .Editable(editable =&gt; editable.Mode(GridEditMode.InLine))
      .DataSource(dataSource =&gt; dataSource
          .Ajax()
          .Model(model =&gt; model.Id("Id"))
          .Destroy(update =&gt; update.Action("Delete", "Products"))
          .Read(read =&gt; read.Action(ViewBag.PageLayout.ReadDataActionName, ViewBag.PageLayout.ControllerName))
          .Update(update =&gt; update.Action("Products_Update", "Home"))
          .Create(create =&gt; create.Action("Products_Create", "Home"))
          )
  )
  </code></pre>
  
  <p>As you can see I am using Grid &lt; Employee >.</p>
  
  <p>But this is incorrect as I want to use Grid&lt;'any type of object'>, but the syntax will not let me give it a string and then change it to class type.
  I tried things like:</p>
  
  <pre><code>Html.Kendo().Grid&lt;(Type)Model.ObjectType&gt;
  Html.Kendo().Grid&lt;typeof(Model.ObjectType)&gt;
  </code></pre>
  
  <p>... and other stupid ways.</p>
  
  <p>My final question is whether I can somehow trick the compiler into seeing a string or something like that as a Class from the project.</p>
  
  <p>I also tried something like:</p>
  
  <pre><code>Html.Kendo().Grid&lt;IProduct&gt;
  </code></pre>
  
  <p>This kinda works, but it means that ANY object that I want to use in a grid MUST have all the fields of the Product interface.</p>
  
  <p>As a final observation, I made this work, but without implementing any Delete/ Create / Update actions built into the grid by using a different syntax like:</p>
  
  <pre><code>@(Html.Kendo().Grid(Model.Items)    
      .Name("Grid")
      .Columns(columns =&gt;
      {
          foreach (var property in propertyArray)
          {
              columns.Bound(property.Name);
          }
      })
      .Groupable()
      .Pageable()
      .Sortable()
      .Scrollable()
      .Filterable()
      .DataSource(dataSource =&gt; dataSource
          .Ajax()
          .Read(read =&gt; read.Action(ViewBag.PageLayout.ReadDataActionName, ViewBag.PageLayout.ControllerName))
      )
  )
  </code></pre>
  
  <p><em><strong>UPDATE:</em></strong></p>
  
  <p>I found a solution.</p>
  
  <pre><code>@model GridViewModel
  @using Kendo.Mvc.UI;
  
  @{
      System.Reflection.PropertyInfo[] propertyArray = Model.ObjectType.GetProperties();
      List&lt;object&gt; mockList = new List&lt;object&gt;();
  }
  
  @(Html.Kendo().Grid(mockList)
      .Name("Grid")
      .Columns(columns =&gt;
      {
          foreach (var property in propertyArray)
          {
              columns.Bound(property.Name);
          }
          columns.Command(c =&gt; c.Custom("Delete").Click("kendoGrid.onDeleteButtonClicked"));
          columns.Command(c =&gt; c.Custom("Edit").Click("kendoGrid.onEditButtonClicked"));
      })
      .Groupable()
      .Pageable()
      .Sortable()
      .Scrollable()
      .Filterable()
      .DataSource(dataSource =&gt; dataSource
          .Ajax()
          .Read(read =&gt; read.Action(Model.ReadDataActionName, ViewBag.PageLayout.ControllerName))
      )
  )
  </code></pre>
  
  <p>What I did was to get rid of all the useless standard function like Destroy or Create provided by Kendo because they required the synthax with Grid &lt; 'object type' >.</p>
  
  <p>The GridViewModel object now looks like this :</p>
  
  <pre><code>public class GridViewModel
  {
      public Type ObjectType { get; set; }
      public string ReadDataActionName { get; set; }
  
      public GridViewModel(Type type, string actionName)
      {
          ObjectType = type;
          ReadDataActionName = actionName;
      }
  }
  </code></pre>
  
  <p>where ReadDataActionName is the action name responsible for returning a list of Json objects that the Kendo grid can read.</p>
  
  <p>Then I made custom commands that point to custom functions made in Jquery that sends as a parameter a pretty complex object that has (besides all other things) the Json object from the grid that I clicked on.</p>
  
  <p>The esential thing in the end is the .Read function in the Datasource. That must point to a function that returns a special type of Json (go see the Kendo documentation for type of Json your action must return on their demos examples).</p>
  
  <p>So then you don't need an array of objects as you've seen:</p>
  
  <pre><code>@(Html.Kendo().Grid(mockList)
      ...
  )
  </code></pre>
  
  <p>where mocklist is a list of objects (empty and lonely - just to trick the function that won't work otherwise).</p>
  
  <p>And the FINAL result is that I have a general grid that accepts any array of Objects with Delete and Edit buttons that point to functions that one can customize based on his preferences - it can open a pop-up with data from a partial view, a full view or anything you want. I even customized a delete function to make a delete Ajax post without any confirmation required from the user and it totally works.</p>