Kendo Grid for MVC

[Marco Beyer]

Deat staff,

in my solution, I have a bound grid with the following code:

@(Html.Kendo().Grid<FITiN.Web.Areas.Manufacturers.Models.ManufacturerViewModel>()
                .Name("manufacturerGrid")
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Read(read => read.Action("Manufacturers_Read", "Manufacturers"))
                )
                .Columns(columns =>
                {
                    columns.Bound(manufacturer => manufacturer.Name).Filterable(false);
                    columns.Bound(manufacturer => manufacturer.LegalFormID).Width("200px").ClientTemplate("#=LegalFormName#").Filterable(false); 
                    columns.Bound(manufacturer => manufacturer.ManufacturerTradeID).Width("200px").ClientTemplate("#=ManufacturerTradeName#").Filterable(filterable => filterable.UI("manufacturerTradeNameFilter"));
                    columns.Bound(manufacturer => manufacturer.Id).Title(Language.Administration.LegalFormManagement.Column_Options).Template(@<text></text>)
                            .ClientTemplate(string.Format("{0} | {1} | {2}",
                                @Html.ActionLink(Language.Buttons.Common.Edit, "Edit", new { id = "manufacturerId" }).ToHtmlString().Replace("manufacturerId", "#=Id#"),
                                @Html.ActionLink(Language.Buttons.Common.Details, "Details", new { id = "manufacturerId" }).ToHtmlString().Replace("manufacturerId", "#=Id#"),
                                @Html.ActionLink(Language.Buttons.Common.Delete, "Delete", new { id = "manufacturerId" }).ToHtmlString().Replace("manufacturerId", "#=Id#")
                                ));
                })
            .Sortable()
            .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
            .Filterable(filterable => filterable
                .Extra(false)
                .Operators(operators => operators
                    .ForString(str => str.Clear()
                        .StartsWith("Starts with")
                        .IsEqualTo("Is equal to")
                        .IsNotEqualTo("Is not equal to")
                    ))
                )
            )            

In the grid, I don't want so show the id of the manufacturer, but the name, so I created the ClientTemplate. Now I want to enable users to sort by the manufacturer name, so I added this code:

function manufacturerTradeNameFilter(element) {
        element.kendoDropDownList({
            dataTextField: "Name",
            dataValueField: "Id",
            dataSource: {
                transport: {
                    read: "@Url.Action("FilterMenuCustomization_ManufacturerTradeNames")"
                }
            },
            optionLabel: "--Select Value--"
        });
    }

And in the controller:

public ActionResult FilterMenuCustomization_ManufacturerTradeNames()
        {            
            using (DomainDb dbCtx = new DomainDb())
            {              
                return Json(dbCtx.ManufacturerTrades.ToList(), JsonRequestBehavior.AllowGet);
            }
        }

In the dropdownlist inside the grid, the manufacturer names are shown correctly, but the filtering doesn't work. I guess, it is because of the mapping of "ID" and "Name".

Any ideas of how to filter a column that is bound to an ID of an item but displays the name of the item?

Many thanks,

Marco

[Boyan Dimitrov]

Hello Marco Beyer,

I am not sure that I understand the exact problem you are facing. Could you please clarify which dropdownlist works properly? As I see a custom DropDownList is used for filtering and the configuration looks fine. 

Regards,
Boyan Dimitrov
Progress Telerik