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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

142209 Jan 23,2019 08:51 AM UTC Mar 5,2019 06:45 AM UTC Angular - EJ 2 9
loading
Tags: Grid
Sahal
Asked On January 23, 2019 08:51 AM UTC

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 [Syncfusion]
Replied On January 24, 2019 05:47 AM UTC

 
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> 
 
  
 
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. 
 
 
Please contact us if you need further assistance on this. 
  
Regards,  
Pavithra S 


Sahal
Replied On March 4, 2019 03:43 AM UTC

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 [Syncfusion]
Replied On March 4, 2019 06:36 AM UTC

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
Replied On March 4, 2019 06:45 AM UTC

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 [Syncfusion]
Replied On March 4, 2019 09:34 AM UTC

Hi Sahal, 
 
Greetings from Syncfusion. 
 
We have checked your query and as per our update on January 24th , 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> 
 
 
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
Replied On March 4, 2019 09:44 AM UTC

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 support@syncfusion.com.

Pavithra Subramaniyam [Syncfusion]
Replied On March 4, 2019 10:03 AM UTC

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. 
 
                              https://ej2.syncfusion.com/angular/documentation/common/how-to/update-npm-package/  
 
 
Please get back to us if you need any further assistance. 
 
Regards, 
Pavithra S. 


Sahal
Replied On March 4, 2019 11:29 AM UTC

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 [Syncfusion]
Replied On March 5, 2019 06:45 AM UTC

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon