Grid addRecord method broken?

[pcafstockf]

Hi,

Grid's addRecord method (documented here) seems to ignore the 'index' parameter.

I am trying to add a new record at a specific row in the grid (not at the top or bottom).

* How can I achieve this requirement?

Thanks,

Earl

[Rajapandi Ravi]

Hi pcafstockf, 

Greetings from syncfusion support 

We have analyzed your query and we could see that you like to add a record in the Grid at specific rowIndex by using addRecord() method. So based on your query we have created a sample and try to reproduce the problem but it was unsuccessful. The addRecord() method was working fine from our end. Please refer the below code example and sample for more information. 

 

export class AppComponent { 

 

  public ngOnInit(): void { 

    this.data = orderDataSource; 

   

  onClick() { //button click event 

    var grid = (document.getElementById('Normalgrid') as any).ej2_instances[0]; 

    var obj = {OrderID: 10009, CustomerID: "John", ShipCountry:"Russia"}; 

    grid.addRecord(obj, 3); //Add a new record at specifc row index 

  } 

} 

 

Sample: https://stackblitz.com/edit/angular-wyg59q-xf1u64?file=app.component.ts 

Screenshot: 

 

If your still face the issue, please share the below details that would be helpful for us to provide better solution. 

1)            Share the complete Grid code.  

2)            Share the type of data (local data or remote data or custom binding(Observables)).  

 

3)            Please confirm your Grid editmode Batch/Normal/Dialog. 

4)            Please share any issue reproducible sample or try to reproduce the issue with our above attached sample. 

Regards,
Rajapandi R 

 

[pcafstockf]

Hi Rajapandi,

I should indeed have included more context in my question.

In your sample, we wouldn't need to use addRecord (or even Syncfusion Grid) to insert data into the model.  A simple Array.splice call on the dataModel could insert the new data record.

My use case is that I want the user to be able to insert their own data via an inline (aka "Normal") editable Grid at the insertion point the user selects.

In this example, the "Add" button in the Grid's toolbar invokes addRecord(undefined, undefined), which results in a new inline edit operation.

Rather than default the index to undefined, I want to set the 'index' parameter to an actual value so that the new inline edit operation happens at the specified index.

For example:

userCreatedNewRecord(evtArgs: ActionEventArgs) {

let selectedRowIdxs = this.ejsGrid.getSelectedRowIndexes() || [];

if (selectedRowIdxs.length === 1)

this.ejsGrid.addRecord(undefined, selectedRowIdxs[0]);

else

this.ejsGrid.addRecord();

}

But the above code does not work currently because the addRecord method ignores the 'index' parameter documented here.

Thanks,

-Earl

[Manikandan Nallathambi]

Hi Pcafstockf, 

Thanks for your update. 

We have checked your query and we suspect that you want to render an edit form in the grid at a specific index. 

In EJ2 Grid we can render an edit form at the top or bottom position. since this is the default architecture of EJ2 grid. So, we are unable to achieve your requirement.  

But we can add the new record at specific index. Please refer the below ways, 

1. By using addRecord() method , you can add a record  programmatically in the Grid. In this you can use index parameter to add a record at specific index. we have achieved this in the external button click. Find the below code example for your reference,

App.component.html 

<ejs-grid #normalgrid id='Normalgrid' (actionBegin)='actionBegin($event)' (rowSelected)='rowselected($event)' [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar'> 

            <e-columns> 

                ------------------------- 

            </e-columns> 

        </ejs-grid> 

App.component.ts 

  public index:number=0; 

  rowselected(args){ 

    this.index=args.rowIndex; 

  } 

onClick() { 

    var obj = {OrderID: 10009, CustomerID: "John", ShipCountry:"Russia"}; 

    this.grid.addRecord(obj,this.index); 

  } 

2. When you clicking the add button in the toolbar renders the edit form in Grid. Here you edit the record. The actionBegin() event triggered when you saving the newly add record in the Grid. In that event you can change the index position as you want, Find the below code example for your reference,

App.component.html 

<ejs-grid #normalgrid id='Normalgrid' (actionBegin)='actionBegin($event)' (rowSelected)='rowselected($event)' [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar'> 

            <e-columns> 

                ------------------------- 

            </e-columns> 

        </ejs-grid> 

App.component.ts 

 

public index:number=0; 

  rowselected(args){ 

    this.index=args.rowIndex; 

  } 

   actionBegin(args){ 

   if(args.requestType==="save"){ 

       args.index=this.index; 

   } 

} 

Please refer to the below documentation and sample for your reference, 

Sample: https://stackblitz.com/edit/angular-wyg59q-bsmo7y?file=app.component.ts                                                                                                                                         

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/edit/#adding-a-new-row-at-the-bottom-of-the-grid 

API link: https://ej2.syncfusion.com/angular/documentation/api/grid/editSettings/#newrowposition 

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

Regards, 

Manikandan N

[Giuseppe Innocenti]

Sorry to bother you,
i've got a similar problem but in my case the grid is in batch edit mode.

Is there something i can do to add a new row in a specific position?

[Rajapandi Ravi]

Giuseppe,

In EJ2 Grid’s batch editing mode, when you use the addRecord method to add a new record, the newly added row appears at the top. This behavior occurs because the selection is applied to the new row, treating its row index as 0. As a result, the Grid doesn’t retain your specified index, it is not feasible to insert the newly added row at a specific position.

[Giuseppe Innocenti]

Do you think that in the future the "duplicate a row in a specified position in batch mode" it will be a feature for the future?

Because in my company we are evaluating the use of syncfusion with angular but we need the batch mode and the duplicate.

[Aishwarya Rameshbabu]

Hi Giuseppe Innocenti,

We have considered the report case as an improvement feature on our end and logged a task titled “Need to provide support for adding a row at specific index using addRecord method in batch mode of editing”. During the planning stage for each release cycle, we review all open features and identify those for implementation based on specific parameters such as product vision, technological feasibility, and customer interest. This feature will be included in one of our upcoming releases.

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.

Feedback:
https://www.syncfusion.com/feedback/63415/need-to-provide-support-for-adding-a-row-at-specific-index-using-addrecord-method

We do not have an immediate plan to implement this feature, but it will be included in one of our upcoming releases. Please cast your vote on this feature. Based on the customer demand we will prioritize the features in our upcoming road map. You can communicate with us regarding open features at any time using the above feedback link.

Regards

Aishwarya R