Kendo Grid Dropdown Filters Not Returning All Values

[Jason]

Hello,

We are currently using your Kendo Grid to display a list of explants based on status.  We are using server side filtering for this, and we have a filter menu where the user can multi-check statuses to filter the list by.  This works fine when loading all data at once, however we have a use case where a user might hit a link that loads the grid and just displays data under a specific status.  When this happens, the filter dropdown for status only displays that status that they are viewing, not all statuses.  Clearing the filtering does work and then shows all of the data, but the user then can't filter by another status because the dropdown only displays that one status the user was originally viewing.  Is there a way around this without forgoing server-side filtering?  I can get this to work as expected using client-side, but that's not going to be an effective way of loading data when we're going to be loading thousands of explants for the user to view.  I've attached a couple images to show what I mean, one is what the status filter looks like when I load all the data at once, and the other is what it looks like when I load the grid for just one status.  I'll also attach a small snippet of my code as well, to show how I'm applying this filtering on grid load.

Thanks,

Jason

[Georgi]

Hi Jason,

A possible solution would be to supply the multi check filter of the Status column with a DataSource which fetches all items from the server.

e.g.

columns.Bound(c=> c.Status).Filterable(ftb => ftb.Multi(true)
                    .DataSource(ds => ds.Read(r => r.Action("action", "controller")))
                );

The following demo contains a grid which demonstrates the above approach:

• https://demos.telerik.com/aspnet-core/grid/filter-multi-checkboxes

I hope this helps


Regards,
Georgi
Progress Telerik

[Jason]

Hi Georgi,

For status, I ended up just hardcoding the statuses with the .BindTo() method which worked fine, however there are other columns I'm trying to implement this with.  I think I almost have it working, however I'm getting a Javascript error where it seems to not be able to find a variable name.  I've attached the images showing you the error, as well as my code that I have in my cshtml file and my controller action.  I'm returning a json list of all the strings.  Do I need to follow the exact way of doing it as described in the example that you linked to me?  I'd like to avoid going through using that EmployeeComparer class if I'm able to.

Thanks,

Jason

[Georgi]

Hi Jason,

I can see from the provided screenshots that you return a collection of strings. The multi filter widget expects a collection of the same model that the grid uses - in your case `Explant` objects.

Could you please modify your action to return a collection of `Explant` objects and let me know if everything works as expected? You can populate only the Device property of the objects.


Regards,
Georgi
Progress Telerik

[Jason]

Hi Georgi,

I modified the action to return a collection of Explant objects as you suggested, however I'm still getting this error in the Javascript console window:

"Uncaught Reference Error: Device is not defined"

I've set a breakpoint to make sure the Device object property of Explant is getting populated, which it is.  I assume I still have to return Json as well?  I'm kind of at a loss as to what the issue could be at this point.

Thanks,

Jason

[Georgi]

Hello Jason,

Yes, you have to return a json which contains a collection of Explant objects.

Could you please provide me with the configuration of both grid and action methods? Or even better a sample where the issue replicates?


Regards,
Georgi
Progress Telerik

[Jason]

Hi Georgi,

I've attached my grid configuration for one of the columns that is using this .DataSource(ds => ds.Read) for it's filtering.  I've also attached screenshots of my action method that this column is using, and the three different configurations of it that I've tried in order to get this to work.  I've also attached the error that I get in the Chrome console window each time I try one of those configurations.  Even though I do return a collection of explants in the first configuration, the filtering still throws an error and doesn't work as expected.  Not sure what else I'd be able to try at this point, so hopefully you'll have some suggestions based on the screenshots.

Thanks,

Jason

[Georgi]

Hi Jason,

Thanks for the provided screenshots.

I have examined your configuration and it looks good. Unfortunately it would be hard to pinpoint what is causing the behavior with the current information. Would it be possible to assemble a small sample where the issue occurs? Or at least also provide me with a screenshot of the response from the server (which returns the data for the filter)?


Regards,
Georgi
Progress Telerik

[Jason]

Hi Georgi,

I've attached a screenshot of the server response, and as you can see it is returning the correct data.  Unfortunately I'm unable to create a test project for you at the moment, but I'm curious if this might be a possible bug in the system?  Do you happen to have a downloadable example that I can actually look at the code with (not necessarily the link to the article you posted above)?

Thanks,

Jason

[Georgi]

Hi Jason,

I can see from the provided screenshot that the server returns a collection of strings, instead of a collection of objects.

The default template of the multi filter menu expects objects of the same type (SM.Domain.Med.Explant) as the data. You will have to either return SM.Domain.Med.Explant objects from the Device_Types method or create a custom item template.

e.g.

// column

columns.Bound(x => x...).Filterable(x=> x.DataSource(y=> y.Read(r=> r.Action("...", "..."))).ItemTemplate("itemTemplate").Multi(true));

// item template

    function itemTemplate(e) {
        return "<div><label><span>#= data || data.all #</span><input type='checkbox' name='" + e.field + "' value='#= data#'/></label></div>"
    }

Regards,
Georgi
Progress Telerik

[Linda Soukup]

Can you explain a little more how this would work?

My grid column is defined as follows:

columns.Bound(column => column.SchoolYear).Filterable(ftb => ftb.DataSource(a => a.Read(r => r.Url("Index?handler=SchoolYears"))).Multi(true).ItemTemplate("itemTemplate").Cell(cell =>cell.ShowOperators(false).Template("integerFilter")));

 

Then I have an itemTemplate defined as in the post above:

        function itemTemplate(e) {
    return "<div><label><span>#= data || data.all #</span><input type='checkbox' name='" + e.field + "' value='#= data#'/></label></div>"
}

The handler in my razor page is this:

public JsonResult OnGetSchoolYears( [DataSourceRequest] DataSourceRequest request ) {
    string[] data = new string[] { "2020", "2019" };
    return new JsonResult(data.ToDataSourceResult(request));
}

When I click on the filter to open the checkboxlist, the handler gets called but the cursor just spins.

Thanks,

Linda

[Tsvetomir]

Hi Linda,

Since the data that comes from the server-side is an array of strings, it is not necessary to call the ToDataSourceResult() method over it. This would send additional data that would not be used and the response would have to be parsed separately.

What I can recommend is to return the data as follows:

        public JsonResult OnGetSchoolYears([DataSourceRequest] DataSourceRequest request)
        {
            string[] data = new string[] { "2020", "2019" };
            return new JsonResult(data);
        }

I am attaching a sample project to my response. In case the issue is still present, modify it in order to replicate the faulty behavior and send it back to me.

Looking forward to your reply.

 

Best regards,
Tsvetomir
Progress Telerik

[Linda Soukup]

So that works great. Thank you. I now have the list of years when I load the grid. However, when I persist and then reload the grid, the list is empty and, if I was filtering before I persisted--say that I had selected 2019--the year displayed in the filter box is formatted as a decimal--2,019.00. 

Persisting is a critical feature of our applications. How do I reload the list of years after the persistence and also ensure that the filter textbox for the year stays formatted as an integer?

Thanks for your assistance,

Linda

[Georgi]

Hi Linda,

The list is empty as JSON.parse is not capable of serializing references, thus, you have to manually restore the itemTemplate reference.

e.g.

        $("#load").click(function (e) {
            e.preventDefault();
            var options = localStorage["kendo-grid-options"];
            if (options) {
                options = JSON.parse(options)
                options.columns[2].filterable.itemTemplate = itemTemplate;
                grid.setOptions(options);
            }
        });

Regarding the format of the value. To which filter box you refer? Do you have also row filter enabled? If that is the case you could customize the format by creating a custom filter textbox through the columns.Filterable.Cell.Template setting.

For your convenience I am attaching a modified version of the sample my colleague sent you.

Regards,
Georgi
Progress Telerik

[Linda Soukup]

Thank you for your assistance. I have it all working now.

Linda