Batch Save grid with checkbox template

[Manu]

Hello

I've a grid which contains checkbox, the checkbox is editable

How can we save the data and then retrieve the datasource.

I've tried using the batchsave but its giving error, I've added the sample,

Please check

https://plnkr.co/edit/Rno9xhXytlL5q8gmPjPQ?p=preview

[Isuriya Rajan]

Hi Manu, 

  

Thanks for contacting Syncfusion support, 

  

We have checked your provided sample and found that you have missed to add the editService module in your sample. So we suggest to inject edit module in your sample. You can the batch editing changes using batchSave method . You can get the modified data after the successful Save operation.  

  

Code example for your reference: 

  

import { Component, OnInit,ViewChild } from '@angular/core'; 

import { data } from './data'; 

import { CheckBoxModule, ButtonModule } from '@syncfusion/ej2-ng-buttons'; 

import { EditService, PageService,GridComponent } from '@syncfusion/ej2-ng-grids'; 

  

@Component({ 

    selector: 'app-container', 

    template: `<ejs-grid #grid [datasource]='data' [editsettings]='editSettings' [editsettings]='editSettings' [toolbar]='toolbar' [height]='300'> 

    <e-columns> 

        <e-column headertext='Order Status' width='200'> 

            <ng-template #template let-data> 

                <div> 

                    <ejs-checkbox [checked]=data.OrderStatus></ejs-checkbox> 

                </div> 

            </ng-template> 

        </e-column> 

        <e-column field='OrderID' headertext='Order ID'  isPrimaryKey= true textalign='Right' width=90></e-column> 

    </e-columns> 

</ejs-grid> 

}) 

  

export class BatchEditComponent implements OnInit { 

@ViewChild('grid') 

    public grid: GridComponent; 

    public ngOnInit(): void { 

  } 

    applyClicked(): void { 

      this.grid.editModule.batchSave(); 

  

      alert(this.grid.getCurrentViewRecords()[0].CustomerID); 

  

    } 

  

Refer the below documentation and sample  

  

Sample: https://plnkr.co/edit/uNR6onYwGHnBSnhcgTOz?p=preview 

  

Documentation about editing : https://ej2.syncfusion.com/16.1.24/angular/documentation/grid/edit.html 

  

Regards, 

Isuriya R 

[Manu]

Hello,

1) The code is working but if you check the checkbox and click on apply changes. The data is not saved.

Can you please suggest, how to save the data of the sample using batch save.

2) In the same way I've also added a color picker in the column, is there a way to set and get the colors from the column.

https://plnkr.co/edit/7wIQad82MgaDqXJXilgQ?p=preview

[Isuriya Rajan]

Hi Manu,  

 

We have achieved your requirement using the checkbox change and color picker change event. Here we have manually changed the check box state and color picker value in corresponding row data.   

 

Refer code example for your reference: 

 

<ejs-grid #grid [dataSource]='data' [editSettings]='editSettings'[editSettings]='editSettings' [toolbar]='toolbar' [height]='300'> 

                     <e-columns> 

                         <e-column  headerText='Order Status'width='200'> 

                             <ng-template #template let-data> 

                                 <div> 

                                     <ejs-checkbox [checked]=data.OrderStatus (change)='change($event)'></ejs-checkbox> 

                                 </div> 

                             </ng-template> 

                         </e-column> 

                         <e-column headerText='Color' field ='color' textAlign='Center' width=80 > 

                           <ng-template #template let-data> 

                             <div> 

                               <input type="color" value={{data.color}} id='colorpicker' (change)="colorchange($event)" style="border-width: 0px;height: 20px;"> 

                             </div> 

                           </ng-template> 

                         </e-column> 

                     </e-columns> 

                 </ejs-grid> 

 

    colorchange(args):void{ 

        let rowUID: string =parentsUntil(args.target,'e-row').getAttribute('data-uid'); 

    let currentRowObject: Object= this.grid.getRowObjectFromUID(rowUID); 

    let currentRowData: Object = currentRowObject.data; 

    currentRowData['color'] = args.target.value; //changed the colorpicker sataus 

    currentRowObject.changes = currentRowData; 

    } 

   

    change(args):void { 

    . . . . .  

    currentRowData['OrderStatus'] = args.checked; //changed the checkbox sataus 

     

} 

Refer and sample documentation link: 

Sample: https://plnkr.co/edit/dM4JjSyTDixxbBpNmNhg 

Regards, 

Isuriya R 

[Manu]

Thank you for the code, this helps.

The checkbox and the color picker is working :)

I tried to use the same logic using a dropdown list, but its not working, can you please check. 

https://plnkr.co/edit/FvWyqRmTGgHU6g0DYlod?p=preview

[Isuriya Rajan]

Hi Manu,   

  

For this dropdown changes save we have get the rowUID  form rowSelected event . This event will trigger every row has been  selected. Same as checkbox we have changed the drop down value in dropdown change event. 

Refer below code example 

<ejs-grid #grid [dataSource]='data' (actionBegin)='actionBegin($event)' (rowSelected)='selected($event)' [editSettings]='editSettings' [editSettings]='editSettings' [toolbar]='toolbar' [height]='300'> 

    <e-columns> 

        <e-column headerText='Order Status' width='200'> 

        <e-column headerText='Shape' width=150 foreignKeyField="shape" foreignKeyValue='Value'> 

            <ng-template #template let-data> 

                <ejs-dropdownlist [dataSource]='testShape' (change)='dropDownChange($event)' [value]=data.shape [fields]='shapeField'></ejs-dropdownlist> 

            </ng-template> 

        </e-column> 

         

    </e-columns> 

</ejs-grid>     

 

 

export class BatchEditComponent implements OnInit { 

    selected(args):void { 

 

       this.rowID = args.target.parentElement.getAttribute('data-uid');//Get rowUID 

    } 

   dropDownChange(args):void { 

      

       let currentRowObject: Object = this.grid.getRowObjectFromUID(this.rowID); 

        let currentRowData: Object = currentRowObject.data; 

        currentRowData['shape'] = args.itemData.shape;//Change the dropdown value 

        currentRowObject.changes = currentRowData; 

    } 

Sample and documentation for your reference: 

Sample: https://plnkr.co/edit/15BNpt7GBYE19xjyYIvj?p=preview 

Documentation: https://ej2.syncfusion.com/16.1.24/angular/documentation/grid/api-gridComponent.html#rowselected 

Regards, 

Isuriya R 

[Manu]

Thank you, this is helpful

[Isuriya Rajan]

Hi Manu,  

 

We are happy to hear suggested solution helped for you. 

 

Regards, 

Isuriya R 

[Manu]

Hello,

How do we get the field name of a selected cell, currently the field name is hardcoded.

which event gives us the field name of a selected cell.

let currentRowData: Object = currentRowObject.data; 

    currentRowData['color']= args.target.value;

  currentRowObject.changes = currentRowData;

[Isuriya Rajan]

Hi Manu. 

 

We can the selected cell field using the cellSelected event. This event will trigger when we cell got selected  

 

Refer the below code example: 

 

selected(args):void { 

        this.colField=this.grid.getColumns()[args.cellIndex.cellIndex].field //get the selected cell field 

 

    } 

test(args):void{ 

    let rowUID: string =parentsUntil(args.target,'e-row').getAttribute('data-uid'); 

    let currentRowObject: Object= this.grid.getRowObjectFromUID(rowUID); 

    let currentRowData: Object = currentRowObject.data; 

    currentRowData[this.colField] = args.target.value; 

    currentRowObject.changes = currentRowData; 

    } 

Refer the below documentation  link: 

Documentation about cellSelected event: https://ej2.syncfusion.com/16.1.24/angular/documentation/grid/api-cellSelectEventArgs.html 

Regards, 

Isuriya R 

[Manu]

Hello,

I've tried the cellselected event, but it never gets triggered. Can you please check the sample code, may be I'm doing something wrong

https://plnkr.co/edit/67mnVPhuXTTQAYLffvDI?p=preview

[Isuriya Rajan]

Hi Manu , 

Instead of using cell selected event, we suggest you to use getRowInfo method which is the better way to get row/cell details. Using this you can get column and row details. 

Refer below code example:  

test(args):void{ 

        let rowUID: string =parentsUntil(args.target,'e-row').getAttribute('data-uid'); 

    let currentRowObject: Object= this.grid.getRowObjectFromUID(rowUID); 

    let info:Object =this.grid.getRowInfo(args.target); 

    alert(info.column.field) 

    let currentRowData: Object = currentRowObject.data; 

    currentRowData[info.column.field] = args.target.value; 

    currentRowObject.changes = currentRowData; 

    } 

 

Documentation about getRowInfo method: https://ej2.syncfusion.com/16.1.24/angular/documentation/grid/api-gridComponent.html#getrowinfo 

Regards, 

Isuriya R