CODEWITHSUNDEEP
c#asp.net-mvckendo-uikendo-grid
Darendal
Darendal

Reputation: 863

Dropdown in Kendo grid tied to enum

I'm working in MVC, and using Kendo for our front end. We've got a model that has a Enum value. In our front end, I'm trying to generate a Kendo grid and be able to modify the value of the Enum from a dropdown in the grid.

Model:

public class TankModel:FieldDeviceModel
{
    //Other properties not shown
    public TankLevel Level { get; set; }
}

Controller:

public class FieldSimulationController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

   //Other methods not shown

    public ActionResult TanksTab()
    {
        return PartialView("Tanks");
    }
}

View:

 @(Html.Kendo().Grid<TankModel>()
  .Name("TanksGrid")
  .Columns(maincolumns =>
  {
          maincolumns.ForeignKey(t => t.Level,
             new SelectList(EnumHelper.GetSelectList(
             typeof(TankLevel)))).EditorTemplateName("ClientLevel").Width(200);
      })
      .HtmlAttributes(new { style = "height: 550px; width:auto; text-align:center" })
      .Sortable()
      .Editable(editable => editable.Mode(GridEditMode.InCell))
      .Pageable(pageable => pageable
          .Refresh(true)
          .PageSizes(true)
          .ButtonCount(5))
      .DataSource(dataSource => dataSource
          .Ajax()
          .Batch(true)
          .Read(read => read
              .Action("Devices_Read", "FieldSimulation") // Set the action method which will return the data in JSON format
              .Data("GetTankType") // Specify the JavaScript function which will return the data
          )
          .Update(update => update.Action("Devices_Update", "FieldSimulation").Type(HttpVerbs.Post))
          .PageSize(20)
          .Model(model =>
          {
              model.Field(t => t.Level);
          })
      )
    )

Right now, I'm using Kendo's ForeignKey column type. That doesn't seem to be giving any errors, but the grid doesn't show a dropdown

I've also tried solutions from elsewhere in SO, such as here with the same results of no column appearing in the grid.

Also, I'm not seeing any JS error that would indicate what the problem is.

Thanks for your time, and any help.

Upvotes: 3

Views: 1986

Answers (1)

Darendal
Darendal

Reputation: 863

I found out I had 2 problems, both easily overlooked but fairly easy to fix.

My first problem is with my ForeignKey column:

maincolumns.ForeignKey(t => t.Level,
             new SelectList(EnumHelper.GetSelectList(
             typeof(TankLevel)))).EditorTemplateName("ClientLevel").Width(200);

First, I don't need to create a new SelectList, since EnumHelper is already returning one. I also never specified what the grid should use as its display/value. Because of this, it was never populating the column at all. To fix this, I used the Value and Text properties of the SelectList returned by EnumHelper.

maincolumns.ForeignKey(t => t.Level,
            EnumHelper.GetSelectList(
            typeof(TankLevel)).ToList(),"Value","Text").Width(200);

I also found out that my project was missing all the Kendo EditorTemplates, including the GridForeignKey template. By including this in my project, I was able to remove the .EditorTemplateName("ClientLevel") call and just use the default editor template

Upvotes: 2

Related Questions