Kendo Grid for MVC

2 posts, 0 answers
  1. Marco Beyer
    Marco Beyer avatar
    25 posts
    Member since:
    Jun 2009

    Posted 16 Aug 2017 Link to this post

    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

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 18 Aug 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top