I have a KendoUI grid with a column named "Status" :
Problem Upon changing the value of a cell, I trigger the saving and update the grid with new data. The rows are updating but the status column is not re-rendering.
More details about the issue
- The 1st row is the filter and the remainings are the actual rows.
- Filter applied => Where status = Paid.
- I've modified row 3 to set the status to "Not Paid".
- I've triggered the Save to the backend database, then fetch all the rows where Status = Paid and then re-assign the new data to the kendo-grid.
Expected result
- We have one less row in the table because the status of row 3 has changed.
- All the rows in the table have "Paid" status.
Obtained result
- One less row in the table. => Good
- The row 4 before is now Row 3. => Good
- The status of Row 3 (ex row 4) is still "Not Paid" even though in the data obtained it is "Paid". => Error
Additional notes
- The html code for the column is below.
- On cell value edit, the changes are saved in a dictionary on client side. When the client clicks on the save button, all changes are sent to the backend.
Assigning the new data to the kendo-grid The table is bound to this variable which gets updated when there're new data.
<kendo-grid
[data]="this.dataAggregative.data"
...>
...
</kendo-grid>
The template for the column
<kendo-grid-column
[editable]="true"
field="status"
title="Status">
<ng-template kendoGridFilterCellTemplate let-filter>
<drop-down-list-filter
class="k-filtercell-wrapper"
[filter]="filter"
[data]="statusFilterEntries"
textField="text"
valueField="status">
</drop-down-list-filter>
</ng-template>
<ng-template kendoGridCellTemplate let-dataItem>
<div class="toolbar-container container">
<kendo-dropdownlist
[data]="statusFilterEntries"
textField="text"
valueField="status"
(selectionChange)="statusSelectionChange($event, dataItem.id)"
[value]="statusFilterEntries[dataItem.status == statusEnum.NotPaid ? 0 : 1]">
</kendo-dropdownlist>
</div>
</ng-template>
</kendo-grid-column>