We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Grid Batch Edit

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.

4 Replies

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team July 10, 2017 11:51 AM UTC

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> 
 
 
 
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.  
 
 
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. 



ZL Zhen Liu July 10, 2017 12:06 PM UTC

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>




ZL Zhen Liu July 10, 2017 10:39 PM UTC

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));

            }

        } 

                             



SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team July 12, 2017 04:33 AM UTC

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. 


Loader.
Live Chat Icon For mobile
Up arrow icon