How to Add a new row into a grid in batch Mode

[Sahal]

When adding a row in batch mode it add a with cell values [object object] even though using the column directive defaultValue

This happens only when the defaulValue is set as ""(Blank string ) or 0 (zero) Other than these both values the new row is added with default value

Is there any event that occurs when  a new row is added to the grid in batch mode

[Pavithra Subramaniyam]

Hi Sahal, 

 

Thanks for contacting Syncfusion Support. 

 

Query #1: When adding a row in batch mode it add a with cell values [object object] even though using the column directive defaultValue  

 

By default Grid Edit form input elements will be rendered based on the column type or type of first record field values. While the Grid dataSource is empty then you need to provide the column.type property to overcome the reported behavior. Please refer to the below code example, documentation link and sample link.  

  

[component.html]  

<ejs-grid #batchgrid id='Batchgrid' [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar'> 

            <e-columns> 

                <e-column field='OrderID' defaultValue=0 headerText='Order ID' width='120' textAlign='Right' isPrimaryKey='true' [validationRules]='orderidrules'></e-column> 

                <e-column field='CustomerID' defaultValue="" type="string" headerText='Customer ID' width='120' [validationRules]='customeridrules'></e-column> 

                <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right' type="number" editType='numericedit' [validationRules]='freightrules'></e-column> 

                <e-column field='OrderDate' headerText='Order Date' width='130' type="date" format='yMd' editType='datepickeredit' textAlign='Right'></e-column> 

                <e-column field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit' type="string" [edit] ='editparams'></e-column> 

            </e-columns> 

        </ejs-grid> 

 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/columns/#column-type     

  

Sample               : https://stackblitz.com/edit/angular-9c4zfw?file=batch-editing.html  

 

Query #2: Is there any event that occurs when  a new row is added to the grid in batch mode  

 

In Essential JavaScript 2 Grid  batch editing, ‘batchAdd’ event will be triggered when a new row is added in batch mode. Please refer to the below documentation link. 

 

Documentation: https://ej2.syncfusion.com/angular/documentation/api/grid#batchadd  

 

Please contact us if you need further assistance on this. 

  

Regards,  

Pavithra S 

[Sahal]

Hi ,

The issue was solved to an extend by following your instructions

When the user sets a blank value to the cell it is either shown as NaN or [Object Object] depending on the type.

The expected behavior is to show blank for a string and zero/blank for a number

[Pavithra Subramaniyam]

Hi Sahal,  

Thanks for your update. 

We are happy to hear that the provided information helped you. 

Please contact us if you need any further assistance. As always, we will be happy to assist you.  

Regards,  

Pavithra S. 

[Sahal]

Hi Pavithra

I think you did not go through my previous reply thoroughly

I had mentioned an issue that persists

When the user sets a blank value to the cell it is either shown as NaN or [Object Object] depending on the type.

The expected behavior is to show blank for a string and zero/blank for a number

Please let me know how to solve the above stated issue

[Pavithra Subramaniyam]

Hi Sahal, 

 

Greetings from Syncfusion. 

 

We have checked your query and as per our update on January 24^th , 2019 on this thread, We suggest you to set the “column.type” property. So the cells will show Zero/blank based on the “column.type” while the Grid has no data. Please refer to the below screenshot, code example and sample link for more information. 

 

 

 

[component.ts] 

<ejs-grid #batchgrid id='Batchgrid' [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar'> 

            <e-columns> 

                <e-column field='OrderID' defaultValue="" type='number' headerText='Order ID' width='120' textAlign='Right' isPrimaryKey='true' [validationRules]='orderidrules'></e-column> 

                <e-column field='CustomerID' defaultValue=""  type='string' headerText='Customer ID' width='120' [validationRules]='customeridrules'></e-column> 

                <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right' type="number" editType='numericedit' [validationRules]='freightrules'></e-column> 

                <e-column field='OrderDate' headerText='Order Date' width='130' type="date" format='yMd' editType='datepickeredit' textAlign='Right'></e-column> 

                <e-column field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit' type="string" [edit] ='editparams'></e-column> 

            </e-columns> 

        </ejs-grid> 

 

Sample: https://stackblitz.com/edit/angular-9c4zfw-vxub3n?file=batch-editing.html  

 

If you are still facing the issue, Could you please provide the below details that will be helpful for us to provide a better solution as early as possible. 

 

1. Share the exact scenario of the issue.
2. Share screenshot or video demo of the issue.
3. Share the Syncfusion package version you are using.
4. Please reproduce the issue in the above sample if possible.

 

Regards, 

Pavithra S. 

[Sahal]

https://stackblitz.com/edit/angular-9c4zfw-a6eh1v

Remove the validation rule for the Customer ID and Clear the editor. When the focus is moved out it will show [object object]

I am not able to attach an image it Says

You have tried to enter a word or URL that is not allowed on this site. If you believe that this is inaccurate, please contact us at [email protected].

[Pavithra Subramaniyam]

Hi Sahal, 

 

Thanks for your update. 

 

The reported issue was an already known issue and this issue was fixed in our Grid version v16.4.53. So we suggest you to upgrade the Syncfusion package to overcome the reported issue. Please refer to the below documentation for more information. 

 

Documentation: https://ej2.syncfusion.com/angular/documentation/release-notes/16.4.53/#grid  

                              https://ej2.syncfusion.com/angular/documentation/common/how-to/update-npm-package/  

 

Sample               : https://stackblitz.com/edit/angular-cfdunq-punhyv?file=batch-editing.html  

 

Please get back to us if you need any further assistance. 

 

Regards, 

Pavithra S. 

[Sahal]

Ok. Thank you for the update 

Another Issue along the same lines.

While clicking the add button to add a row to grid having a Column of type "number" , defaultValue = 0 has a format set to "N2"   in batch edit mode 

the following error occurs

core.js:1673 ERROR TypeError: value.toFixed is not a function

    at Function.push../node_modules/@syncfusion/ej2-base/src/intl/number-formatter.js.NumberFormat.processFraction (number-formatter.js:281)

    at Function.push../node_modules/@syncfusion/ej2-base/src/intl/number-formatter.js.NumberFormat.intNumberFormatter (number-formatter.js:199)

    at number-formatter.js:96

    at ValueFormatter.push../node_modules/@syncfusion/ej2-grids/src/grid/services/value-formatter.js.ValueFormatter.toView (value-formatter.js:41)

    at CellRenderer.push../node_modules/@syncfusion/ej2-grids/src/grid/renderer/cell-renderer.js.CellRenderer.format (cell-renderer.js:32)

    at CellRenderer.push../node_modules/@syncfusion/ej2-grids/src/grid/renderer/cell-renderer.js.CellRenderer.refreshCell (cell-renderer.js:113)

    at CellRenderer.push../node_modules/@syncfusion/ej2-grids/src/grid/renderer/cell-renderer.js.CellRenderer.render (cell-renderer.js:80)

    at _loop_1 (row-renderer.js:82)

    at RowRenderer.push../node_modules/@syncfusion/ej2-grids/src/grid/renderer/row-renderer.js.RowRenderer.refreshRow (row-renderer.js:114)

    at RowRenderer.push../node_modules/@syncfusion/ej2-grids/src/grid/renderer/row-renderer.js.RowRenderer.render (row-renderer.js:27)

[Pavithra Subramaniyam]

Hi Sahal, 

 

Sorry for the inconvenience caused. 

 

You can achieve your requirement by setting the default value by using the below way. Please refer to the below code example for more information. 

 

[component.html] 

<ejs-grid #batchgrid id='Batchgrid' [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar'> 

    <e-columns> 

       <e-column field='CustomerID' [defaultValue]="" type="string" headerText='Customer ID' width='120'></e-column> 

        <e-column field='Freight' headerText='Freight' [defaultValue]=0 type="number" width='120' format='N2' textAlign='Right'></e-column> 

    </e-columns> 

</ejs-grid> 

 

Regards, 

Pavithra S.