[Solved] Grid Filters Not Working

[Dustin]

Today I upgraded to the latest open source version of the software and all of the filtering on my grids have stopped working.  I have created a couple of custom javascript filters that make use of the grid.filter() function.  I've tried to apply this filter in client and server operation modes, neither work.  The client mode appears to do nothing, and the server mode will post to the server but passes no filter arguments.  

If I click on the columns themselves to apply a custom filter, things appear to work fine (both client and server modes).  Do you know of any errors or workarounds?

[Dustin]

I have modified the telerik.grid.filtering.js code a bit.  From the best I can tell, it doesn't do client side filtering because the .filter() function is not actually setting any filters on the columns.  I've added the code below:

filter: function (g) {
            this.currentPage = 1;
            this.filterBy = g;
            if (this.operationMode == "client") {
                this.setColumns(g);
            }
            if (this.isAjax()) {
                this.$columns().each(c.proxy(function (i, h) {
                    c(".t-grid-filter", h).toggleClass("t-active-filter", !!this.columns[i].filters)
                }, this));
                this.ajaxRequest()
            } else {
                this.serverRequest()
            }
        },

        setColumn: function (name, op, value) {
            $.each(this.columns, function (i, c1) {
                if (c1.member == name) {
                    if (!c1.filters) {
                        c1.filters = [];
                    }
                    c1.filters.push({
                        operator: op,
                        value: value
                    });
                }
            });
        },

        setColumns: function (filter) {
            if (!filter || filter == '') {
                this.clearColumns();
                return;
            }
            var groups = filter.replace(")", '').replace("(", '').replace("'", '').replace("'", '');
            groups = groups.split("~and~");
            for (g in groups) {
                var cmds = groups[g].split("~or~");
                for (cmd in cmds) {
                    var parts = cmds[cmd].split("~");
                    this.setColumn(parts[0], parts[1], parts[2]);
                }
            }
        },

        clearColumns: function () {
            $.each(this.columns, function (i, c) {
                c.filters = null;
            });
        }
    }

I typically use the syntax (column~eq~value~or~column~eq~'string')~and~(etc, etc).  I've only tried the above code with one filter applied at a time column~eq~'value', but it appears to work.  I need to change .replace to replaceall functions.  Is there a more elegant solution for this?

And as I suspected, it doesn't work with multiple filters on the same column set.  It basically will do and instead of or.  I suspect the real problem is in the ajaxRequest function.

[Atanas Korchev]

Hello Dustin,

 You can check this forum thread.

Best wishes,
Atanas Korchev
the Telerik team

[Dustin]

Doh!  Thanks,

Dustin

[Dustin]

Actually, I updated my scripts, content, and binary, but client side custom filtering still does not work.  It will now post to the server using the correct filter, but I'd prefer to use the client operation mode.  Is this possible with custom filtering?

[Atanas Korchev]

Hi Dustin,

 Could you please provide more info about your scenario? Are you using ajax binding with client operation mode or with server operation mode (which is the default)?

Regards,
Atanas Korchev
the Telerik team

[Dustin]

Here is one example of a grid.

 Html.Telerik().Grid<Masters.Models.ViewModels.SMS.ApplicationViewModel>()
        .Name("gridApplications_" + ViewData["IndividualId"])
        .DataKeys(keys => keys
            .Add(o => o.AppNo)
        )
        .DataBinding(binding => binding.Ajax()
            .Select("_GetPreapplications", "PreApplication", new { id = ViewData["IndividualId"] })
            .Update("_UpdatePreApplication", "PreApplication")
        )
        .Columns(columns =>
            {
                columns.Bound(o => o.FullName).ReadOnly().Title("Name");
                columns.Bound(o => o.Program).ReadOnly().Title("Program");
                columns.Bound(o => o.ApplicationStatus).ReadOnly().Title("Status");
                columns.Bound(o => o.SubmitTime).ReadOnly().Title("Submitted");
                columns.Bound(o => o.RecosReceived).ReadOnly().Title("# Recos Received");
                columns.Command(commands =>
                    {
                        commands.Edit().ButtonType(GridButtonType.BareImage);
                    }
                );
            }
        )
        .DetailView(details => details
            .ClientTemplate(
                Html.Telerik().TabStrip()
                    .Name("tabstripApplication_<#= AppNo #>")
                    .SelectedIndex(0)
                    .Items(items =>
                        {
                            items.Add()
                                .Text("Application")
                                .LoadContentFrom("_GetApplication", "PreApplication", new { id = "<#= AppNo #>" });
                            items.Add()
                                .Text("Letters")
                                .LoadContentFrom("_RecommendationLetters", "RecommendationLetter", new { appNo = "<#= AppNo #>" });
                        }
                    )
                    .ToHtmlString()
            )
        )
        .ClientEvents(events => events
            .OnDataBinding("displayProgress")
            .OnDataBound("hideProgress")
        )
        .Editable(settings =>
            {
                settings.TemplateName("ApplicationViewModelEdit");
                settings.Mode(GridEditMode.InForm);
            }
        )
        .Sortable()
        .Filterable()
        .Pageable(page => page
            .PageSize(20)
        )
)

This grid is currently set to server operation mode, which is working as expected after the hotfix you posted earlier in the thread.  

function setFilter() {
    var filter = "";
    var filter1 = "";
    $(".chkProgram").each(function () {
        if (this.checked) {
            filter1 = addOr(filter1);
            filter1 += "Program~eq~'" + $(this).val() + "'";
        }
    });
    var filter2 = "";
    $(".chkApplicationStatus").each(function () {
        if (this.checked) {
            filter2 = addAnd(filter2);
            filter2 += "ApplicationStatus~eq~'" + $(this).val() + "'";
        }
    });

    if (filter1) {
        filter += "(" + filter1 + ")";
    }
    if (filter2) {
        filter = addAnd(filter);
        filter += "(" + filter2 + ")";
    }

    var grid = $("#gridApplications_" + '@ViewData["IndividualId"]').data('tGrid');

    console.log(grid);
    console.log(filter);
    grid.filter(filter);
}

Here is the custom filter, pretty simple.  I verify with the console that the filter looks correct.  It creates filters like this:

(Program~eq~'MS Agron')

If I append .Ajax() with .OperationMode(GridOperationMode.Client) and load the grid, and then apply the same custom filter, nothing happens.  I see that the filter is logged to the console, as is the grid, but nothing happens from there.  I still suspect that in telerik.common the query's filter function is only looking for columns that have had filter objects attached to them.  Deminifying the grid, grid.filter, and common javascript files, and running through them, I haven't found code that would parse through the filterBy parameter that's attached to the grid object.  I may just be missing it though.  I'm currently just working on some extension methods on the server side to filter, sort, and page on the server side to help reduce the SQL server load.

The real problem is entity framework :(.  It's being quite slow with a couple of my grids with 400+ rows and I absolutely need a way to make paging, sorting, and filtering faster.  The real issue isn't with the grid, but the fact that on the server, I need to create all my viewmodels every time and client-side custom filtering isn't working for me.  If I'm missing something and it should be working, just let me know as it  would save a lot of effort for me ;).

[Rosen]

Hello Dustin,

 I'm afraid that setting filter in such way when using client operation mode is currently not supported. 
Please excuse us for the inconvenience.

Regards,
Rosen
the Telerik team

[Dustin]

No biggie ;).

I actually dug into your server source code a bit and was able to write some extension methods that allow me to only hit the database for the data I want, thereby greatly increasing speed.  The one thing I would ask in the future is that you modify your GridActionAttribute class so that result["total"] = total if the Total property has been set on the GridModel.  The problem I ran into was that only grabbing 20 entries out of 1000 possible only resulted in a 20 total being sent to the client (which meant no paging).  To make this work, I basically copied your GridAttribute code (and the internal classes I needed) and modified the code so that even though I only send 20 rows back, I send the actual possible total.  You guys are actually really close to having Ajax functionality that can filter, sort, and page on the datasource iqueryable instead of executing a function that grabs all entries and operating on an object iqueryable.  Saves a lot of DB resources ;).

[Rosen]

Hello Dustin,

I'm not sure if I understood you correctly. But you can set total field of the GridModel as well as bypass the internal data processing by using custom binding functionality.
Also as you may know if an IQueryable implementation is used, operation such as paging, sorting, grouping and filtering will be executed in the DB (if the QueryProvider does support it) which usually is faster than running same query in memory.

Best wishes,
Rosen
the Telerik team

[Darek]

Why does the extension work for the grid filter panel, but it doesn't for the filter method? I am using ClientBinding and filtering works fine from the grid.

[Georgi Tunev]

Hi Darek,

Could you please elaborate some more on the problem? What exactly is your setup and what is happening? A sample project would allow us to provide you with a faster reply.

 

Greetings,
Georgi Tunev
the Telerik team

[Darek]

Well, Rosen stated that "... I'm afraid that setting filter in such way when using client operation mode is currently not supported. ..." which begs a question why does it still work when you click on a column filter icon and set a new filter from there. What is the difference between using that filter and this JavaScript code:

$("#Grid").data("tGrid").filter("someStringColumn~eq~'someValue')

One works, the other doesn't ...

[Rosen]

Hi Darek,

The difference is that when filter method is used, an expression should be parsed (which is currently not available) to a specific format in order client-side data processing to be able to filter the data. However, when filtering through the UI is used it is much easier to construct the appropriate object as there is no parsing involved. 

You may workaround to a degree this limitation by directly setting the filter expression to the dataSource (note that this will work only for client operation mode):

var grid = $("#Grid").data("tGrid"),
  column = $.grep(grid.columns, function(c) {
             return c.member === "ContactName";
  })[0];

column.filters = [ {operator: "eq", value: "Paul Henriot" }]; //also set the filter of the column

grid.dataSource.filter({field: "ContactName", value: "Paul Henriot", operator: "eq"});

All the best,
Rosen
the Telerik team