title: Kendo Grid with DropdownList
body: <p>Hi I'm using Kendo grid with dropdownlist, I followed the demo in <a href="http://demos.kendoui.com/web/grid/foreignkeycolumn.html" rel="nofollow">http://demos.kendoui.com/web/grid/foreignkeycolumn.html</a> 
  but Im recieving this error "DataBinding: 'System.Web.Mvc.SelectListItem' does not contain a property with the name 'Id'".</p>
  
  <p>Could anyone help me to make my code work without error?</p>
  
  <p>here is my viewModel :</p>
  
  <pre><code>public class AccountingViewModel
  
  {
      private string _code = string.Empty;
  
      private string _description = string.Empty;
  
      public int Id
      {
          get;set;
      }
  
      public string Code
      {
          get { return _code; }
          set { _code = value; }
      }
  
      public string Description
      {
          get { return _description; }
          set { _description = value; }
      }
  
      public int MajorCategoryId
      {
          get;set;
      }
  
      public SelectList MajorCategories
      {
          get;set;
      }
  }
  </code></pre>
  
  <p>Here is my Controller :</p>
  
  <pre><code> public ActionResult Index()
  
      {
          var majorCategory = new SelectList(new[]
                                        {
                                            new {Id="1",Name="Category1"},
                                            new{Id="2",Name="Category2"},
                                            new{Id="3",Name="Category3"},
                                        },
                          "Id", "Name", 1);
  
          ViewData["majorCategories"] = majorCategory;
  
          return View(accountingService.GetAllAccountings());
  
      }
  </code></pre>
  
  <p>Here is my Index View:</p>
  
  <pre><code> @model IEnumerable &lt; PPMS.Model.ViewModels.AccountingViewModel &gt;
   &lt; br/ &gt;
  
  &lt; div class="k-grid" &gt;
  
   @(Html.Kendo().Grid(Model)
  .Name("grid")
  .Columns(columns =&gt;
         {
               columns.Bound(p =&gt; p.Code);
               columns.Bound(p =&gt; p.Description).Width(150);
                columns.ForeignKey(p =&gt; p.MajorCategoryId, (System.Collections.IEnumerable)ViewData["majorCategories"], "Id", "Name")
                             .Title("MajorCategory").Width(150);
  
           columns.Command(command =&gt; command.Destroy()).Width(110);
                     })
        .ToolBar(toolBar =&gt;
                     {
                         toolBar.Save();
                         toolBar.Create();
                     })
        .Editable(editable =&gt; editable.Mode(GridEditMode.InCell))
        .Filterable()
        .Groupable()
        .Pageable()     
        .Scrollable()
        .HtmlAttributes(new { style = "height:430px;" })    
        .DataSource(dataSource =&gt; dataSource
                      .Ajax()
                      .Batch(true)
                      .PageSize(20)
                      .ServerOperation(false)
                      .Events(events =&gt; events.Error("errorHandler"))
                       .Model(model =&gt;
                                      {
                                          model.Id(p =&gt; p.Id);
                                          model.Field(p =&gt; p.Id).Editable(false);
                                     model.Field(p =&gt; p.MajorCategoryId).DefaultValue(1);       
                                                 })
  
                         .Create(create =&gt; create.Action("Create", "Accounting"))
                         .Read(read =&gt; read.Action("Index", "Accounting"))  
                         .Update(update =&gt; update.Action("Edit", "Accounting")) 
                         .Destroy(destroy =&gt; destroy.Action("Delete", "Accounting"))
         )
        )
  &lt;/div&gt;
  &lt;br/&gt;
  
  
  &lt;script type="text/javascript"&gt;
  
  
  function errorHandler(e) {
      if (e.errors) {
          var message = "Errors:\n";
          $.each(e.errors, function (key, value) {
              if ('errors' in value) {
                  $.each(value.errors, function () {
                      message += this + "\n";
                  });
              }
          });
          alert(message);
      }
   }
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I have updated my view into and is now binding the selectlist the problem now its displaying textbox inside the grid instead of a dropdownlist.. here is my updated Index view:</p>
  
  <p>Here is my Index View:</p>
  
  <pre><code> @model IEnumerable &lt; PPMS.Model.ViewModels.AccountingViewModel &gt;
   &lt; br/ &gt;
  
  &lt; div class="k-grid" &gt;
  
   @(Html.Kendo().Grid(Model)
  .Name("grid")
  .Columns(columns =&gt;
         {
               columns.Bound(p =&gt; p.Code);
               columns.Bound(p =&gt; p.Description).Width(150);
                columns.ForeignKey(p =&gt; p.MajorCategoryId, (System.Collections.IEnumerable)ViewData["majorCategories"], "Value", "Text")
                             .Title("MajorCategory").Width(150);
  
           columns.Command(command =&gt; command.Destroy()).Width(110);
                     })
        .ToolBar(toolBar =&gt;
                     {
                         toolBar.Save();
                         toolBar.Create();
                     })
        .Editable(editable =&gt; editable.Mode(GridEditMode.InCell))
        .Filterable()
        .Groupable()
        .Pageable()     
        .Scrollable()
        .HtmlAttributes(new { style = "height:430px;" })    
        .DataSource(dataSource =&gt; dataSource
                      .Ajax()
                      .Batch(true)
                      .PageSize(20)
                      .ServerOperation(false)
                      .Events(events =&gt; events.Error("errorHandler"))
                       .Model(model =&gt;
                                      {
                                          model.Id(p =&gt; p.Id);
                                          model.Field(p =&gt; p.Id).Editable(false);
                                     model.Field(p =&gt; p.MajorCategoryId).DefaultValue(1);       
                                                 })
  
                         .Create(create =&gt; create.Action("Create", "Accounting"))
                         .Read(read =&gt; read.Action("Index", "Accounting"))  
                         .Update(update =&gt; update.Action("Edit", "Accounting")) 
                         .Destroy(destroy =&gt; destroy.Action("Delete", "Accounting"))
         )
        )
  &lt;/div&gt;
  &lt;br/&gt;
  
  
  &lt;script type="text/javascript"&gt;
  
  
  function errorHandler(e) {
      if (e.errors) {
          var message = "Errors:\n";
          $.each(e.errors, function (key, value) {
              if ('errors' in value) {
                  $.each(value.errors, function () {
                      message += this + "\n";
                  });
              }
          });
          alert(message);
      }
   }
  
  
  &lt;/script&gt;
  </code></pre>