Kendo UI Grid dropdown with Foreign key

2
votes

I should have asked this question on the Telerik forum but having browsed through many answers there, with due respect to Telerik, I feel it will be futile and I can expect better and quicker answers here. So here I go:

I am using Kendo UI Grid control and displaying the values in an editable dropdownlist cell.But that has taken away the in built filtering capability as it is not provided out of the box. Now I am stuck on the only way to achieve this which is using foreign keys; http://demos.telerik.com/aspnet-mvc/grid/foreignkeycolumn

There are some bits missing in the example like the PopulateCategories() function and what code to put in the MVC EditorTemplate.

Has anyone tried and successfully able to display the filters? I can provide my code but I think thats not part of the question as there is nothing wrong in the code. What I am asking is how I can achieve filtering with dropdownlist templates using the solution provided by Telerik.

1
kendo-uikendo-grid

1 Answers

1
votes

Hope it may help someone.The following bits are missing from the example as provided in the link above (I have used my code to convey the missing bits):

First

Instead of: 

columns.ForeignKey(p => p.CategoryID, (System.Collections.IEnumerable)ViewData["categories"], "CategoryID", "CategoryName")
            .Title("Category").Width(150)

Use EditorTemplateName property too:

columns.ForeignKey(p => p.Region.RegionId, (System.Collections.IEnumerable)ViewData["Regions"], "RegionId", "RegionName").Title("Region").EditorTemplateName("RegionsTemplate");

Second

Keep using the complex model otherwise the Add New Record functionality would not work:

So instead of 

.Model(model =>
        {
            model.Id(p => p.ProductID);
            model.Field(p => p.ProductID).Editable(false);
            model.Field(p => p.CategoryID).DefaultValue(1);       
        })

Use both the Foreign key model and the complex model:

.Model(model => { 
                model.Id(p => p.FunctionLevelRegionMappingId);
                model.Field(p => p.FunctionLevelRegionMappingId).Editable(false);
                model.Field(p => p.Region.RegionId).DefaultValue(1);
                model.Field(p => p.Region).DefaultValue(
                    ViewData["DefaultRegion"] as GlobalLossAnalysisTool.Web.Areas.Administration.Models.RegionDto);
            })

Third

In the example ProductViewModel is missing. This can be referred from http://demos.telerik.com/aspnet-mvc/grid/editing-custom. There is no change to this model.

Fourth

Changes to template:

The templates are missing in the example but can in inferred from the link http://demos.telerik.com/aspnet-mvc/grid/editing-custom. Change the template from :

@model Kendo.Mvc.Examples.Models.CategoryViewModel

@(Html.Kendo().DropDownListFor(m => m)
        .DataValueField("CategoryID")
        .DataTextField("CategoryName")
        .BindTo((System.Collections.IEnumerable)ViewData["categories"])
)

To:

@using Kendo.Mvc.UI

@(Html.Kendo().DropDownListFor(m => m)
    .BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"]))