Filtering a grid column on a different field (underlying id)

[Boardy]

This is the situation: In have a grid, that is set up with server side paging, sorting and filtering. One of the columns displays the name of a related object. It should be possible to filter this column. Besides the name of the related object also an id is known (but not shown).

The filter should be with a dropdown list, presenting the possible choices to the user.

Currently the filter is set up as follows:

@(Html.Kendo().Grid<ReportEOSViewModel>()
    .Name("EOSreports")
    .Filterable(cfg => cfg.Extra(false))
    .Columns(columns =>
    {
            columns.Bound(p => p.Well.WellNumber).Filterable(flt => flt.UI("reos_well_filter")
                .Operators(op => op.ForString(fs => fs.Clear().IsEqualTo("Is equal to")))
                .Multi(false).Extra(false));
           // More columns...
    })
    .Pageable()
    .Events(e => e.Filter("reos_filter"))
    .Scrollable()
    .DataSource(ds => ds
        .Ajax()
        .Batch(true)
        .PageSize(50)
        .Read(rd => rd.Action("GetList", "ReportEOS", new { id = Model }))
    )
)

With the supporting script:

function reos_well_filter(element) {
    element.kendoDropDownList({
        dataSource: {
            transport: {
                read: "@Url.Action("DropDownList", "Well")"
            }
        },
        autoWidth: true,
        dataTextField: "Value",
        dataValueField: "Id",
        optionLabel: "--select well--",
        filter: "startswith"
    });
}

function reos_filter(e) {
    if (e.field === "Well.WellNumber") {
        let flt = this.dataSource.filter();
        if (flt !== undefined && flt !== null) {
            for (let i = flt.filters.length - 1; i >= 0; i--) {
                if (flt.filters[i].field === "WellRefFK")
                    flt.filters.splice(i, 1)
            }
        }
        if (e.filter !== null) {
            e.filter.filters[0].field = "WellRefFK";
        }
        else {
            this.dataSource.filter(flt);
            e.preventDefault();
        }
    }
}

So basically the column has a .UI() call set up to reos_well_filter() that creates the drop down list, showing the names and returning the id as filter value. Also in the Filter event, there is special processing being done in case this particular column is being filtered on. Basically the name of the field in the filter is changed from "Well.WellNumber" to "WellRefFK". This, however, has some unwanted side effects, because the grid now basically doesn't recognize the filter as a filter for that specific column any more.

For starters, when filtering on a second item, the filter is not replaced, but added to. That's why the old filter is first removed. Also the clear filter function does not work any more, so that's why the case where e.filter === null is also processed. The last side effect that I noticed and have not been able to solve is that the filter button in the header does not show the column is being filtered on.

So my question is: Is there another way to let the grid know that the filter should be triggered on another field, so that everything keeps working as intended?

Bonus: Is it possible to hide the filter variant dropdown box, as there is only one choice now ("Is equal to").

[Anton Mironov]

Hello Boardy,

Thank you for the code snippets and the details provided.

From the provided information, I assume, we should:

• When filtering a column to the filter to another field.
• Customize the filter menu.

If this is the case, I would recommend:

• For the first requirement - use the field that should be filtered for the column, but visualize the field that is represented by now. This can be achieved with a ClientTemplate. Here is an example:
  

  columns.Bound(p => p.theFieldThatShouldBeFiltered).ClientTemplate("#=theFieldThatShouldBeVisualized#")

• For the customization of the filter menu, I would recommend using the examples from the following demo:
  https://demos.telerik.com/aspnet-mvc/grid/filter-menu-customization

Additional information can be found in the following article:

• https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/grid/filtering

I hope this information helps.

Kind Regards,
Anton Mironov
Progress Telerik

[Boardy]

Thank you. I'll try that out.