Dictionary Binding in Kendo Grid Dynamically

Question

I have a kendo grid. This kendo grid's view model contains a Dictionary object which has minimum 5 items. By the way these items should be dynamic. Items occasionally may be more than 5.

So, Must be done :

• I want to show these 5 items like each seperate column

• I want to feed this grid via ajaxcall (in kendo read function.)

• And I want to inline edit this grid.

---

@(Html.Kendo().Grid<TariffDetailViewModel>()
  .Name("grd_Tariff")
  .Columns(columns =>
  {
      columns.Bound(c => c.Commissions);
      columns.Command(c => { c.Edit().Text("Edit"); }).Width(200);
  })
  .ToolBar(t => t.Create().Text("New").HtmlAttributes(new {@id = "newTariffDetail"}))
  .Editable(e => e.Mode(GridEditMode.InLine))
  .Resizable(resizing => resizing.Columns(true))
  .Reorderable(reorder => reorder.Columns(true))
  .Scrollable(s => s.Height("auto"))
  .Pageable(x => x.Enabled(true).ButtonCount(ReportPageSize).Refresh(true))
  .AutoBind(false)
  .DataSource(dataBinding => dataBinding
      .Ajax()
      .PageSize(DefaultPageSize)
      .Model(m => m.Id(t => t.TariffId))
      .Read(a => a.Action(MVC.Tariff.ActionNames.GetTariffDetails, MVC.Tariff.Name))
      .Update(update => update.Action(MVC.Tariff.ActionNames.UpdateTariffDetails, MVC.Tariff.Name))
      .Create("Create", "Tariff")
      .Events(events => events.Error("grd_TariffDetail_OnError"))
  )

)

My dictionary object:

public class TariffDetailViewModel
{
   public Dictionary<string, object> Commissions { get; set; }
}

Thanks in advance.

Answer 1

Your question is similar to this, except for you want a dynamic one. Yours:

A Dictionary object which has minimum 5 items. By the way these items should be dynamic. items occasionally may be more than 5.

For your case, i think you must know all field that may be stored on your dictionary. For example your dictionary may has max of 10 field like :

1. field1, field2, field3, field4, field5, field6, field7, field8, field9, field10.
2. Then define your schema to make a same level field (not nested) since kendo doesn't support nested field like dictionary. Fill them accordingly, add if condition to handle empty/null (this because your dictionary is dynamic)

Take a look at this dojo as example

Answer 2

If a list of possible commission types is available, you may dynamically define a column per each commission type:

@(Html.Kendo().Grid<TariffDetailViewModel>()
  .Name("grd_Tariff")
  .Columns(columns =>
  {
      foreach(var commisionType in Model.CommissionTypes)
      {
          columns.Bound(typeof(double), "Commissions['" + commissionType.Name + "'].Value")
              .Title(commissionType.Name);
      }

      columns.Command(c => { c.Edit().Text("Edit"); }).Width(200);
  })

There is a similar question on their web site: http://www.telerik.com/forums/dictionary-keys-binding