Dropdown filter Grid

[Lorenzo]

Hi everyone, I am trying to implement the following functionalities with Grid and Server side filtering/paging:

• For the "Subject" column, I would like a dropdown with the ability to choose between two static values: "NPF" and "PF".

columns.Bound(p => p.TipoSoggetto).Groupable(false).Filterable(ftb => ftb.UI("tipoSoggettoFilter"));
 
And the script -->
function tipoSoggettoFilter(element) {
            element.kendoDropDownList({
                dataSource: {
                    data: ["NPF", "PF"]
                }
            });
        }

• For the "Operator" column, I would like to display a dropdown with values taken from a list item with value and text. I can see the dropdown and the filter works, but I don't see the corresponding text value in the grid; the cell simply remains empty (even though the filter works correctly).

var operatori = _ctx.Users.OrderBy(u => u.Email).Select(e => new SelectListItem
        {
            Text = e.NomeOperatore,
            Value = e.Id.ToString()
        }).ToList();
        ops.AddRange(operatori);
        ViewData["Operatori"] =  new SelectList(ops, "Value", "Text");
        ViewBag.Operatori = new SelectList(ops, "Value", "Text");

And in view:

@(Html.Kendo().Grid<AVR.Models.Output.GetAllAvr>()
            .Name("AVRgrid")
            //.ToolBar(t => t.Search())
            .Columns(columns =>
            {
               
                columns.Bound(p => p.DataInserimento).Format("{0:dd/MM/yyyy}").Groupable(false);
                columns.Bound(p => p.Subject).Groupable(false).Filterable(ftb => ftb.UI("tipoSoggettoFilter"));
                columns.ForeignKey(p => p.UserId, (System.Collections.IEnumerable)ViewData["Operatori"], "Text", "Text")
                    .Title("Operator").Width(200);
                columns.Command(command =>  command.Custom(" ").IconClass("fa-solid fa-eye").Click("showDetails")).Width(45);
            })
            .Pageable(p => { p.PageSizes(new[] { 10, 20, 30 }); })
            .Sortable()
            //.Scrollable()
            .Groupable()
            .Filterable(ftb => ftb.Mode(GridFilterMode.Row))

            .DataSource(dataSource => dataSource
                .Ajax()
                .Model(model =>
                {
                    model.Field(p => p.UserId).DefaultValue(1);
                })
                .PageSize(10)
                .Read(read => read.Action("GetAllFiltered", "AVR"))
            )
        )

What am I doing wrong in these two approaches? Is it possible to do this, or do I need additional jQuery support?

[Mihaela]

Hello Lorenzo,

Thank you for the shared code snippets.

I see that the Grid's filter mode is set to "Row", so to use a custom filter control, you need to specify it in the Template() option of the Filterable(ftb => ftb.Cell()) configuration. Otherwise, the DropDownList will not be initialized:

columns.Bound(p => p.Subject).Groupable(false).Filterable(ftb => ftb.Cell(c => c.Template("tipoSoggettoFilter")));

<script>
    function tipoSoggettoFilter(args) {
        args.element.kendoDropDownList({
            dataSource: {
                data: ["NPF", "PF"]
            }
        });
    }
</script>

Regarding the ForerignKey column, would you confirm that the "dataFieldVlaue" argument must be the "Text" property?

columns.ForeignKey(p => p.UserId, (System.Collections.IEnumerable)ViewData["Operatori"], "Text", "Text").Title("Operator").Width(200);

It is important to ensure that the values of the "UserId" matches the "dataFieldVlaue" argument in the ForeignKey() overload (i.e., the value of the "Text" property). 

Would you share screenshots of the behavior you are experiencing?

 

Regards,
Mihaela
Progress Telerik

[Lorenzo]

Thank you for your response. As for the first dropdown, it’s now working.
Regarding the foreign key, that was actually just a test.
The code I was really testing is this:

columns.ForeignKey(p => p.UserId, (System.Collections.IEnumerable)ViewData["Operatori"], "Value", "Text")
                    .Title("Operatore").Width(200);

where "value" contains the PK of the user and Text is just a display name.

 

This is the result:

The filter works because, as you can see, when selecting a name, it only shows the records associated with that user. However, as you can see, the name doesn’t appear in the corresponding cell. If I filter 'l.pezzi', I’d like to see 'l.pezzi' in the cell, and if I don’t filter, I’d like to see all the users.

 

[Mihaela]

I have tested the filtering of the ForeignKey column based on the code snippets you shared, and it appears that the "UserId" column's data is displayed as expected at my end:

Also, I am attaching a runnable ASP.NET Core application that demonstrates this example. 

Would you check the response of the Grid's Read request in the browser DevTools to ensure that the "UserId" fields have data?

In addition, try modifying the demo project based on your setup to replicate the behavior you are experiencing and send it back in the thread for review.

Thank you for your cooperation.

[Lorenzo]

It's probably the use of Guid as the ID, because I tried using Guid as the ID in the sample project, and it doesn't work.
Anyway, I'm attaching the controller's response, which contains the ID.

[Mihaela]

Would you ensure that the "Value" properties in the ViewData["Operatori"] match the Guids ("UserId" values)? For example, I have updated the data type of the "UserId" property to Guid and the List<SelectListItem> collection that is passed to the ViewData, and the "UserId" column's data is displayed correctly.

Check out the updated runnable sample.