Kendo UI ASP.Net MVC ForeignKey column DataSource in InCell Edit mode

Question

I have Kendo Grid and a ForeignKey column on a page. ForeignKey column is populated using ViewData as described below.

column.ForeignKey(x => x.ProductID, (List<Product>)ViewData["products"], "ID", "ProdName");

The Grid is editable in batch(InCell) mode as show below...

.Editable(editable => editable.Mode(GridEditMode.InCell)

I want to modify collection of ProductID column in the grid after page is loaded based on value selected on other drop-down defined outside of the Grid.

How can I achieve that? Can I do it using jQuery?

Similar example I found here... http://www.telerik.com/community/forums/aspnet-mvc/grid/cascading-dropdowns-in-grid-edit---foreignkey-columns.aspx

Thanks.

tpatel tpatel · Accepted Answer · 2013-08-07T21:20:14

I figured out how to filter the Product drop-down using an EditorTemplate for the foreign key column.

Here is my column definition for the Product.

c.ForeignKey(x => x.ProductID, (List<Product>)ViewData["products"], "ID", "ProdName").EditorTemplateName("ProductIDEditor");

Here is the editor template for Product, ProductIDEditor.cshtml

@using Kendo.Mvc.UI

@(Html.Kendo().DropDownListFor(m => m)
    .AutoBind(false)
    .OptionLabel("Select a value...")
    .DataTextField("ProdName")
    .DataValueField("ID")
    .DataSource(dataSource =>
    {
        dataSource.Read(read => read.Action("FilterProducts", "Home").Data("filterProducts"))
        .ServerFiltering(true);
    })                                   
)
@Html.ValidationMessageFor(m => m)

In my main VIEW Index.cshtml, I added filterProducts JavaScript handler, that passes JSON object for productID to controller.

function filterChargeTypes()
{
    return {
        productID: $("#ProductID").val()
    };
}

Here is the controller that listens to filtering event...

public ActionResult FilterProducts(string productID)
{
    // do your filtereing based on productID.
}

FilterProducts will be called every time when user hits the drop-down to get filtered value.

Kendo UI ASP.Net MVC ForeignKey column DataSource in InCell Edit mode

2 Answers