[Solved] Kendo Grid filters manual update when filter grid

[Ed]

I am using column filters as described here:
http://www.telerik.com/forums/column-filter-menu-with-(not-visible)-implied-operator

and using the following to show the drop down of the distinct values in the column:
http://www.telerik.com/forums/column-filter-menu-with-(not-visible)-implied-operator

This all works great until someone filters a column, at which point the values in the drop downs aren't proper for the current resultset represented by the grid.I have 2 questions:

1. How can I hook into the filter update so I can then refresh my distinct values.
2. Once I have the distinct values, how can I update the dataSources on my dropdowns?

for #1, Is there a way for me to hook into transport.read.complete so I can get the filters used to filter the grid - and I can use those same filters in my ajax call to get distinct col values? Or is there a different, preferred approach?

for #2, Apart from trying to select the dropdowns by searching through the source in DevTools, is there a way i can access that from the kendo API?

[Alexander Popov]

Hi Ed,

This behavior is not supported out of the box, however you could achieve similar results using a custom solution. For example you could:

1. Subscribe to the Grid's filterMenuInit event, which is triggered once per column
2. Once the event is triggered get the instance of the popup an subscribe to its open event (see similar example). This event would be triggered each time the filterMenu for the column is shown. That could be utilized to manipulate the DropDownLists in it
3. Once the open event is triggered - get the Grid's filter by invoking the filter method of its DataSource
4. Use that information to filter the DropDownList's DataSource

Regards,
Alexander Popov
Telerik

 

 

[Ed]

Hi Alexander,

I think this is pointing me in the right direction.  I'm now trying to get the DataSourceRequest info from the grid so i can use that info to pass it to my function to get the distinct values (from the server) for the dropdowns.  In the dataBound event, I am trying to get the parameterMap from the transport, but am getting the error:
  TypeError: Cannot read property 'sort' of undefined.
when I call this from the dataBound event
  e.sender.dataSource.transport.options.parameterMap()

Any idea what that is referring to and why I'm getting it?

FYI, my plan is to get the distinct values on dataBound. Since the dropdowns have their dataSources as javascript arrays of strings, I will update those client-side arrays and then tell the dropdowns to read (and i'll have the list of dropdowns stored locally, from the filterMenuInit, as an array of .selectors I can then iterate thru to call read).

Thanks,
--Ed

[Alexander Popov]

Hi Ed,

In case you are using the ASP.NET MVC wrappers I would suggest creating a new transport object, then pass the Grid's paging, sorting and filtering options to its parameterMap. For example: 

  function onDataBound(e){
    var grid = this;
    var requestObject = (new kendo.data.transports["aspnetmvc-ajax"]({ prefix: "" }))
    .options.parameterMap({
      page: grid.dataSource.page(),
      sort: grid.dataSource.sort(),
      filter: grid.dataSource.filter()
    });
    console.log(requestObject);
  },

Here is a JavaScript example illustrating the same approach. Keep in mind that the kendo.aspnetmvc.min.js file should be included.

Regards,
Alexander Popov
Telerik

 

 

[Ed]

Hi Alexander,
I'm approaching my problem a little differently now. Instead of making an additional AJAX request (calling the same SP with the same params), I extended the DataSourceResult class to have an additional property, which I generically call AdditionalJsonData. In this case, I can get the distinct values directly from the DataSourceResult and create the JSON.

public class DataSourceResultEx : DataSourceResult
{
    public DataSourceResultEx(DataSourceResult result, string additionalJsonData = null)
    {
        AggregateResults = result.AggregateResults;
        Data = result.Data;
        Errors = result.Errors;
        Total = result.Total;
        AdditionalJsonData = additionalJsonData;
    }
    public string AdditionalJsonData { get; set; }
}

in the controller, 

var additionalData = new
    {
        Products = data.Select(o => o.ProductName).Distinct().ToList(),
    };
var json = JsonConvert.SerializeObject(additionalData, Formatting.None);
var resultEx = new DataSourceResultEx(result, json);

and then in the js, in transport.requestEnd (I guess I could put it in read.complete), I get the additional json data and populate my local data sources.

if (e1.response.AdditionalJsonData !== null && e1.response.AdditionalJsonData !== undefined) {
    var data = $.parseJSON(e1.response.AdditionalJsonData);
    distinctDataSources['Products'] = data.Products;
}

My problem now is that I somehow need to force the dropdowns to do a read().  Any ideas?

Thanks,
--Ed

[Ed]

Putting the js code in the read.complete fixed the problem.  Works great now.
Controller code was a little tricky since I needed to call ToDataSourceResult twice, once with paging, once without - so I could get accurate distinct values.  Then I needed to use .Cast<> to cast the DataSourceResult back to a structure I could perform LINQ against.
In any case, the DataSourceResultEx class worked like a champ and it much more efficient than having two AJAX calls that call the same SP, one to get the grid results, the second to get the distinct values.