Multi-select filter not sorting

[DAN]

I need to sort the values in a multiple select filter. I found the following http://dojo.telerik.com/IsOTA

But it is not working for me. I only need to sort one filter. It fails on the container.empty() line because filterMultiCheck is null. I can NOT understand why it is null. I've inspected the objects in the DOM and everything seems to be there.

ProjectRequests.filterMenuInit = function (e) {
    if (e.field === "Position") {

    var filterMultiCheck = this.thead.find("[data-field=" + e.field + "]").data("kendoFilterMultiCheck");

    filterMultiCheck.container.empty();

    filterMultiCheck.checkSource.sort({field: e.field, dir: "asc"});

         filterMultiCheck.checkSource.data(filterMultiCheck.checkSource.view().toJSON());

         filterMultiCheck.createCheckBoxes();

 }

}

 

My code is slightly different from the example. The grid is created on a cshtml page and the FilterMenuInit is call as so:

.Events(events => events.FilterMenuInit("ProjectRequests.filterMenuInit"))

 

The page is rendered before the FilterMenuInit is called so I just don't get it.

Any help is appreciated.

[DAN]

Boyan Dimitrov sent me a response via email, but I don't want a column menu (see attached columns.png). What I want is a filter menu (see attached filter.png)

 

[DAN]

Doing the following, I can get the unique values and sort them in the column I want filtered. How can I make the uniqueVals js array the datasource for the filter?

if (e.field === "Position") {
     var filterColVals = [];
     var uniqueVals = [];

     var data = $("#RequestsGrid").data("kendoGrid").dataSource._data;
     for (var i = 0; i < data.length; i++) {
         filterColVals.push(data[i].Position);
     }

     uniqueVals = filterColVals.sort().filter(function (el, i, a) { if (i == a.indexOf(el)) return 1; return 0 });
}

[Alex Hajigeorgieva]

Hi Dan,

We have another demo which shows another approach which may be cleaner and more convenient for you. You could initialize the Kendo UI Grid column with its own filterable data source. If it is separate from the grid but shared between columns, sort and get the unique values as shown in the demo at:

http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/filtering/grid-with-excel-like-filter.html

// filterSource is a separate data source
// this is the columns.filterable.dataSource configuration of the grid

filterMenuInit: function (e){
    var grid = e.sender;
    e.container.data("kendoPopup").bind("open", function() {
    filterSource.sort({field: e.field, dir: "asc"});
    var uniqueDsResult = removeDuplicates(grid.dataSource.view(), e.field);
    filterSource.data(uniqueDsResult);
 })
}

JavaScript API reference: http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.filterable.dataSource
UI for ASP.NET MVC API Reference: http://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/GridBoundColumnFilterableBuilder
*check DataSource or BindTo

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[DAN]

So this is a razor view with an html helper that creates the grid. What you provided might work in javascript, but It's still not working for me. I do have a question though. Why the heck doesn't the multi select filter sort automatically? If you have more that a handful of items, it gets kind of hard to find what you are looking for in the list. Or, at the very minimum, instead of making us figure out how to code these god-awful filters, why not have an option to sort on the columns.Filterable? Maybe something like .Sort(true) or .Sort("asc").

[Alex Hajigeorgieva]

Hello Dan,

I am sorry to hear that you are finding the Multi-check filters challenging to work with.

The built-in behaviour uses the Kendo UI Grid data source as is if one is not provided. There is an option to provide a separate custom data source which can be sorted in the desired sort order. The custom multi-check filter for Grid for UI for ASP.NET MVC should resemble the below configuration:

columns.Bound(p => p.Details).Filterable(ftb =>
{
  ftb.Multi(true);
  ftb.Search(true);
  ftb.DataSource(dataSource => dataSource
    .Custom()
    .Transport(t => t.Read("ReadGridItems", "Grid"))
    .Schema(schema => schema
    .Data("Data"))
    .Sort(sort => {
        sort.Add("Details").Descending();
    })
  );
});

Regarding the difficulty with finding items, we have considered that may happen when there are many items and added a search option because "search trumps navigation" in such cases.

You may take advantage of it by setting Search(true):

http://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/GridBoundColumnFilterableBuilder#methods-Search(System.Boolean)

Finally, regarding implementing built-in sort of the Kendo UI Grid MultiCheck filters data source, it is something which could be subject to change after a review of the team and customer demand. Our roadmap and priorities depend largely on the business value and customer demand for specific components and features.

It is an enhancement which I see as reasonable and valuable, however, I cannot guarantee an estimated implementation timeframe.

We have a Feature Acceleration program which allows a customer to negotiate a certain component or functionality to be implemented on demand or sooner than our roadmap implies. Feature acceleration fits well in scenarios where a feature or enhancement is important for an application's success, but it is not planned to be available at the time of the application's completion.

 

Let me know if you are interested in pursuing this option at any time and I will put you in touch with our Professional Services team to discuss your exact specifications and possible timeframes.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[DAN]

OK. That final post is really close to what I need. It's almost working. I just need to know how to indicate that I only want distinct values in the filter. Using the datasource as described above creates an entry in the filter for each row in the grid. I only want the distinct values for the filter.

[Stefan]

Hello Dan,

After reviewing the requirements I can suggest checking our runnable example demonstrating how to have a filter menu with sorted and distinct items. Please have in mind that the example is using a Trial DLL for security reasons, and once it is downloaded the DLL has to be changed with a valid one:

https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/grid-with-excel-like-filter

I hope this example will help to achieve the desired result.

Regards,
Stefan
Progress Telerik