Add button not working while applying filters on the grid column

[Hitesh]

when we apply filter to any of the grid column, the add record button is not working?

please advice.

[Alexander Valchev]

Hello Hitesh,

The issue is caused by the fact that newly added record does not match the filter criteria which is why it is not visible and cannot be edited through the pop up. In other words the created row is immediately filtered out and hidden. If you clear the filters you would be able to see and edit the records.

There are a few workarounds that you can use:

• if the filter is initially set, e.g. the filter criteria is known, you can add a filter rule to display the empty cells. Example:
  

  filter: {
      logic: "or",
      filters: [{ //filter all people with name Jack
          field: "PersonName",
          operator: "eq",
          value: "Jack"
      },
      { //or people with empty string name (new records)
          field: "PersonName",
          operator: "eq",
          value: ""
      }]
  };

  
  
  
• In case the grid is filtered through the filter menus you can to hook up to the change event of the DataSource and set the value of the newly created record to be equal to the filter value. This means that when the record is added the corresponding field will be pre-populated.
  

  change: function (e) {
      if(e.action == "add") {
          var newItem = e.items[0];
          var filters = this.filter().filters;
          //set the coresponding value of the newItem according to the applied filters
      }
  }

• Disable the "Add new record" button if any filter is applied. To achieve that you can hook up to the change event of the DataSource.
  

  change: function (e) {
    if(this.filter() !== null || this.filter() !== undefined) { //if the grid is filtered
      //disable
    } else {
      //enable
    }
  }

I hope this helps.

Kind regards,
Alexander Valchev
the Telerik team

[Murad Ajani]

Could you please give me an example how would you extract a value of filter (dropdown box) from toolbar and insert into the foreign key field.  I am using mvc3 razor.

Thanks,

[Alexander Valchev]

Hi Murad,

You can "extract" currently applied filters with the client side filter method of the DataSource.

Regards,
Alexander Valchev
the Telerik team

[Greg]

I have put the below code on my dataSource.  It is inserting the data like it should but the row does not show up unless I do something on the grid like changing the sort.  Do I need to re-sync the grid with the dataSource?  If so how do I do that?

        change: function (e) {
            if (e.action == "add") {
                var newItem = e.items[0];

                if (this.filter() != undefined) {
                    var filter = this.filter().filters;
                    var i = filter.length;
                    while (i--) {
                        filterValue = filter[i].value;
                        filterField = filter[i].field;
                        switch (filterField) {
                            case "product.textField":
                                newItem.product.textField = filterValue;
                                break;
                            case "product.valueField":
                                newItem.product.valueField = filterValue;
                                break;
                            default:
                                newItem[filterField] = filterValue;
                        }
                    }
                }
            }
        }

 thx!

[Boyan Dimitrov]

Hello Greg,

 

Please use the set method of the Model object in order to set the new value as shown in the http://dojo.telerik.com/oHoPO example. 

 

Regards,
Boyan Dimitrov
Telerik

 

 

[Greg]

That worked ... Thx!