Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
70
Row disappears in grid after filtering out blanks and cell editing
posted

Hello,

Adding steps down below to reproduce it.

1. Created an editable grid with Excel Style Filtering applied.

	<igx-grid height="700px" [data]="testData" [allowFiltering]="true" [filterMode]="'excelStyleFilter'">
     	<igx-column field="column1" header="Column 1" dataType="string" [editable]="true">
    	</igx-column>
	</igx-grid>

2. Opening 'Column 1' filtering menu and deselecting blanks. Pressing 'Apply'

3. Editing 'Column 1' cell value for example from 'Test-A' to 'Test-B'. Pressing Enter.

4. Edited cell row disappears and new cell value won't be selected in column filter.

Expected result: 

Row won't disappear and new cell value will be selected in filter as only blanks were filtered out. 

How to solve it?

	<igx-grid height="700px" [data]="testData" [allowFiltering]="true" [filterMode]="'excelStyleFilter'">
     	<igx-column field="column1" header="Column 1" dataType="string" [editable]="true">
    	</igx-column>
	</igx-grid>

  • 1320
    Offline posted

    Hello,

     

    After an investigation, I have determined that this behavior is observed because the filtering is updated and the new value was not previously provided, so it is not selected in the searchValue set. What I could suggest is to add the new value in the filtering expression. This could be achieved in a method bound to the cellEditDone event  as follows:

     

    public editDone(evt) {

        const column = evt.column.field;

        const newValue = evt.newValue;

     

        if (column === 'QuantityPerUnit') {

          // Get the current filter criteria for the Quantity column

          const filters = this.grid1.filteringExpressionsTree.find(column) as FilteringExpressionsTree;

          const excludedValues = this.grid1.data

            .filter((value) => !this.grid1.filteredData.includes(value))

            .map((row) => row['QuantityPerUnit']);

          if (!excludedValues.includes(newValue)) {

            const newExpression: IFilteringExpression = {

              fieldName: column,

              searchVal: newValue,

              condition: IgxStringFilteringOperand.instance().condition('equals'),

            };

            filters.filteringOperands.push(newExpression);

          }

        }

      }

    I have prepared a sample, demonstrating the described behavior, please test it on your side and let me know if you need any further information regarding this matter.

    Regards,
    Monika Kirkova,
    Infragistics