Adding new row to filtered grid, make new row visible

[Mudit]

Hi All

We have observed that if grid is filtered and user hits on add row button. The new row is added but is not visible. Which makes no good sense as user then keeps on hitting add row but doesn't see anything moving.

 

Is there a way wherein we can make newly added row visible even if there is a filter applied.

 

Thanks

M.

[Ivan Danchev]

Hi Mudit,

This is achievable by modifying the filters in the Grid's dataSource "change" event handler. See this dojo example: https://dojo.telerik.com/EXeHoCAm/2

The same logic is applicable to the MVC Grid helper.

Attach the event handler in the DataSource Events configuration:

 .Events(events => events.Change("onDataSourceChange"))

The handler:

function onDataSourceChange(e) {
  if (e.action == "add") {
    var newItem = e.items[0];
    var filter = this.filter();
    if (filter) {
      var filters = filter.filters;
      var noValueFilter = { field: "ProductName", operator: "eq", value: "" };

      //add empty value to the filter conditions

      var newFilter = {
        logic: "or",
        filters: [noValueFilter, filter]
      };

      this.filter(newFilter);
    }
  }
}

Regards,
Ivan Danchev
Progress Telerik

[Mudit]

Thanks for your reply Ivan

 

This way partially works. I can see the new row added but the previous filter value is lost. Somehow data is still filtered but the filter menu has no value in it.

Also, in your code you are getting newItem = e.Items[0] but not using is any where and similarly var filters is not used either. are we missing something here that will get us the required functionality ?

 

Thanks

M.

[Ivan Danchev]

Hello Mudit,

You cannot retain the original filter and at the same time display a new record, since it does not match this filter. That is why the suggested approach removes the previous filter with one that has an empty value. As for the unused variables in the handler, they are leftovers from testing different approaches, so you can ignore them.

Regards,
Ivan Danchev
Progress Telerik

[Mudit]

but your code does retain the existing filter, just that it is nor visible in the filter dropdown.

when we're joining a new filter for "" to existing filters I would expect the previously filter to be visible in dropdown

[Ivan Danchev]

Mudit,

Try this modification to the logic in the "change":

var newFilter = {
  logic: "or",
  filters: [filters[0], noValueFilter]
};

this.filter(newFilter);

At my end this allows the filter to be persisted.

Regards,
Ivan Danchev
Progress Telerik