0

I have a KendoUI grid with a column named "Status" :

Status column in the kendo-grid

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

  1. We have one less row in the table because the status of row 3 has changed.
  2. All the rows in the table have "Paid" status.

Obtained result

  1. One less row in the table. => Good
  2. The row 4 before is now Row 3. => Good
  3. 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>
Arjun C
  • 357
  • 3
  • 8

1 Answers1

0

Issue fixed by updating the model locally before pushing all the changes to the backend.

Arjun C
  • 357
  • 3
  • 8