Grid Batch Edit

[Zhen Liu]

1. The calculated column using template doesn't update under batch edit.2. Is it possible to add some extra data to the batchSave requests? I am calling gridObj.batchSave() in my javascript code, and need to pass some extra data (from inputs outside of the grid) to the server.

[Seeni Sakthi Kumar Seeni Raj]

Hi Customer,  

 

Thanks for contacting Syncfusion Support.  

 

Query #1: The calculated column using template doesn't update under batch edit 

 

Usually, the Grid Rows will be re-rendered after saving the whole records i.e. batchSave. We suspect that you are looking for a Grid to save the template column value after saving the value of dependent field. By default, it will not save the template cells after each cell. However, we can achieve your requirement using a cell-save event of the Grid. Refer to the following code example and API Reference.  

 

 

<ej-grid id="FlatGrid" allow-paging="true" cell-save="onCellSave"> 

    <e-datamanager json="ViewBag.dataSource" batch-url="BatchUpdate" adaptor="remoteSaveAdaptor" /> 

    <e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true" edit-mode="@(EditMode.Batch)"></e-edit-settings> 

    <e-columns> 

 

        <e-column header-text="temp" template="<span>{{:EmployeeID + Freight }}</span>" /> 

             . .  

                  . . . 

    </e-columns> 

</ej-grid> 

 

<script> 

    function onCellSave(args) { 

        if(args.columnName == "mployeeID" || args.columnName == "Freight"){ 

            if(args.columnName == "EmployeeID" ) 

                $(args.cell.closest("tr")).find(".e-templatecell span").text(args.value + args.rowData.Freight); 

            else $(args.cell.closest("tr")).find(".e-templatecell span").text(args.value + args.rowData.EmployeeID); 

        } 

    } 

</script> 

 

 

https://help.syncfusion.com/api/js/ejgrid#events:cellsave 

 

Query #2: Is it possible to add some extra data to the batchSave requests? 

 

We can add extra data to the batch request in the before-batch-save event of the Grid. Refer to the following code example and output. 

 

<ej-grid id="FlatGrid" allow-paging="true" cell-save="onCellSave" before-batch-save="beforeSave"> 

    <e-datamanager json="ViewBag.dataSource" batch-url="BatchUpdate" adaptor="remoteSaveAdaptor" /> 

          .. .  

                . . . 

</ej-grid> 

 

<script> 

    function beforeBatchSave(args) { 

        args.batchChanges.changed.push({ OrderID: 300, EmployeeID: 300 }) 

        //these newly added records were found in the server 

    } 

 

</script> 

 

 

 

Refer the following API Reference.  

 

https://help.syncfusion.com/api/js/ejgrid#events:beforebatchsave 

 

If we misunderstood your requirement, please share the following details to analyze your requirement. 

 

1. Code example of the Grid with the exact scenario.
2. Screenshot with the steps

 

Regards,  

Seeni Sakthi Kumar S. 

[Zhen Liu]

Thanks Seeni.

My current calculated column is like below, adding <span> tag in the template makes the cells display "$NaN"  

<e-column field="TotalPrice" header-text="Total Price" format="{0:C2}" template="{{:Volume * UnitPrice }}" allow-editing="false" text-align="Right" width="15"></e-column>

[Zhen Liu]

I just figured it out myself, I am posting my solution here in case it may help others. 

Change find(".e-templatecell span") to find(".e-templatecell")  will make the code to locate the proper cell without <span> tag. Then I need to add a currency formatter in the javascript code as the format defined in the e-column does not work on the value calculated in the script.

        function onCellSave(args) {

            if (args.columnName == "Volume" || args.columnName == "UnitPrice") {

                var formatter = new Intl.NumberFormat('en-NZ', {

                    style: 'currency',

                    currency: 'NZD',

                    minimumFractionDigits: 2,

                });

                if (args.columnName == "Volume")

                    $(args.cell.closest("tr")).find(".e-templatecell").text(formatter.format(args.value * args.rowData.UnitPrice));

                else $(args.cell.closest("tr")).find(".e-templatecell").text(formatter.format(args.value * args.rowData.Volume));

            }

        } 

                             

[Seeni Sakthi Kumar Seeni Raj]

Hi Zhen,  

 

Thanks for the update.  

 

We are happy to hear that you have achieved your requirement and you are good to go. Please get back to us, if you require further assistance on this. 

 

Regards,  

Seeni Sakthi Kumar S.