Kendo Grid Foreign key column bind dynamically

Question

@(Html.Kendo().Grid((IEnumerable<Doc.Web.Models.Common.ContactModel>)Model.contact_lst)  
    .Name("grid")
    .Columns(columns =>
    {

        columns.Bound(o => o.ContactID).Visible(false);
        columns.Bound(o => o.ContactName).Title("Contact Name");
        columns.ForeignKey(p => p.CPOID, (System.Collections.IEnumerable)ViewData["CPOs"], "cpo_id", "contract_po")
                .Title("Company - Contact/Purchase Order");
        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(182);
    })
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Pageable()
    .Sortable()
    .Filterable()
    .ToolBar(toolbar =>
    {
        toolbar.Template(@<text>
           <div class="toolbar">
               <a href="/Contact/EditingInline_Read?grid-mode=insert" class="k-button k-button-icontext k-grid-add">
    <span class="k-icon k-add"></span>Add New Record
</a>
                    <label class="category-label" for="category">Site:</label>
                       @(Html.Kendo().DropDownListFor(m => m.SiteID)
                            .Name("SiteID")
                            .DataTextField("Text")
                            .DataValueField("Value")
                            .Events(e => e.Change("categoriesChange"))
                            .Value(Model.SiteID.ToString())
                            .DataSource(ds =>
                            {
                                ds.Read("ToolbarTemplate_Categories", "Contact");
                            })
                        ) 

                        </div>

        </text>);
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Events(events => events.Error("error_handler"))
        .Model(model => model.Id(p => p.ContactID))
        .Create(update => update.Action("EditingInline_Create", "Contact").Data("additionalInfo"))
        .Read(read => read.Action("EditingInline_Read", "Contact").Data("additionalInfo"))
        .Update(update => update.Action("EditingInline_Update", "Contact").Data("additionalInfo"))
        .Destroy(update => update.Action("EditingInline_Destroy", "Contact").Data("additionalInfo"))

    )
)

I want to rebind the foreign key column values on change event of SiteID dropdown, which is on the header template. I tried within “EditingInline_Read” event but ViewBag values does not update. Any suggestions?

Answer 1

Kendo grid does not support dynamic rebinding. The closest thing you can get is to define a custom Editor Template which binds data using AJAX.

columns.ForeignKey(p => p.CPOID, 
(System.Collections.IEnumerable)ViewData["CPOs"], "cpo_id", "contract_po")
.Title("Company - Contact/Purchase Order")
.EditorTemplateName("RemoteForeignKey");

RemoteForeignKey Editor Template

@model int

@(Html.Kendo().DropDownListFor(m => m)
  .DataSource(source =>
  {
      source.Read(read =>
      {
          read.Action("actionName", "controllerName").Type(HttpVerbs.Post).Data("dataFunc");
      }).ServerFiltering(false);
  })
  .DataValueField("cpo_id")
  .DataTextField("contract_po")
)

dataFunc javascript function

function dataFunc () {
    return {
        SiteID: $("#SiteID").val() // here we pass the site ID to server
    };
}

and your server function

[AcceptVerbs(HttpVerbs.Post)]
public JsonResult actionName(int? SiteID)
{
    if (SiteID != null)
    {
        var objects = (from obj in db.tableName
                       where obj.SiteID == SiteID.Value
                       select new
                       {
                           cpo_id = obj.cpo_id,
                           contract_po = obj.contract_po
                       }).ToList().Distinct().OrderBy(obj => obj.contract_po);
            return Json(objects);
    }
    return null;
}

Then the values in your dropdown will be filtered by the current value of SiteID input.