Server Side Grid (Observable Async): Edit value on client side not persiting

[Salik khan]

Dear Sir,

In server side grid (observable async), while editing value in grid as we press enter to save, 

First issue is the checkbox gets removed. 

Secondly, when switch to page 2, then come back from it to page 1, the value gets removed.

Note: On page change check state remain persist.

Attachment: Email3_13a26be1.zip

[Ajith Govarthan]

 

Hi Salik, 

 

Thanks for contacting Syncfusion support. 

 

Query: In server side grid (observable async), while editing value in grid as we press enter to save, First issue is the checkbox gets removed. 

 

Based on the attached code examples we found that you have used the column type as checkbox. By default in EJ2 grid to render the checkbox while editing and adding you need to set field and editType as booleanedit. To render the checkbox component while editing we suggest you set the booleanedit as editType and also field for the checkbox column. 

 

Query: Secondly, when switch to page 2, then come back from it to page 1, the value gets removed.Note: On page change check state remain persist. 

 

Based on your query we have prepared sample, but we did not face any issues in the prepared sample. For your convenience we have attached the video demonstration and the sample so please refer them for your reference. 

 

Note: In your code example we found that you have used the persistSelection as true in the selectionSettings so please set the persistSelection as false to avoid the checkbox persist behavior. 

 

Code Example: 

Normal-edit.html 

 

<div class="control-section"> 

 

              <ejs-grid #grid [dataSource]='data | async' [selectionSettings]="selectionSettings" [editSettings]='editSettings' 

                             [allowPaging]="true" [pageSettings]="pageOptions" [toolbar]='toolbar' 

                             (dataSourceChanged)='dataSourceChanged($event)' (actionBegin)='actionBegin($event)' 

                             (actionComplete)='actionComplete($event)' (dataStateChange)='dataStateChange($event)' [allowSelection]="true"> 

                             <e-columns> 

                                           <e-column field="Verified" type="checkbox" editType="booleanedit" headerText="Verified" width="150"> 

                                           </e-column> 

                                           <e-column field='id' headerText='Customer ID' width='120' textAlign='Right' isPrimaryKey='true'></e-column> 

                                           <e-column field="name" headerText="Customer Name" width="150"></e-column> 

                             </e-columns> 

              </ejs-grid> 

 

</div> 

 

 

 

Sample Link: https://stackblitz.com/edit/angular-umeuhb-zpvja4?file=normal-edit.html 

 

Video Demo: https://www.syncfusion.com/downloads/support/directtrac/general/ze/UNTITL~3-270971272.zip 

 

Please get back to us if you need further assistance. 

 

Regards 

Ajith G.