Adding data to bottom of dataset on grid

Question

Hello,

I am currently looking at using EJ2 after using EJ1 for some time and i have a couple of questions.

First of, I have a javascript function that takes data selected and or entered on a bootstrap modal and i collate it before adding it to the datasource of the grid. While this works, it always seems to add the data to the top of the grid, even though i have on the grid settings for new records to be at the bottom of the grid.

I use the following code to add to my grid which takes the data pushed to an array called Fields.

var FormFieldsGrid = document.getElementById("CreateFormFieldsGrid").ej2_instances[0];

(FormFieldsGrid.dataSource).unshift(Fields[0]); // add new record.

Secondly, when using a date time picker, how are you able to add html elements to the datetime picker such as required as i cannot seem to find anywhere how to add html elements to controls like the date time picker.

Thanks

Paul

Sujith Kumar Rajkumar · Accepted Answer

Hi Earl, 
 
You can achieve the requirement of selecting the newly added row at the Grid current page’s last index instead of the first row(row will be added in the first index by default so it will be selected) by cancelling the row selection for this case(setting ‘true’ to event arguments ‘cancel’ property) in the Grid’s rowSelecting event and then selecting the last index(newly added row) using its selectRow method. 
 
This is demonstrated in the below code snippet, 
 




var newRowAdded = false; 
 
function actionBegin(args) { 
    if (args.requestType === 'save' && this.editSettings.newRowPosition === 'Bottom') { 
        // Newly added row’s index position is changed to last index 
        args.index = (this.pageSettings.currentPage * this.pageSettings.pageSize) - 1; 
        // Global variable to check this case in the rowSelecting event  
        newRowAdded = true; 
    }  
} 
 
// Grid’s rowSelecting event handler 
function OnRowSelecting(args) { 
    if (newRowAdded) { 
        newRowAdded = false; 
        // Selection is cancelled if it is new row added case(using global variable) 
        args.cancel = true; 
        // Last row index is selected(Newly added row)  
        this.selectRow(this.pageSettings.pageSize - 1); 
    } 
} 
 
We have prepared a sample based on this for your reference. You can find it below, 
 
Sample: https://www.syncfusion.com/downloads/support/forum/155416/ze/GridUpdated-1659382647  
 
API links: https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_RowSelecting  
                  https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ActionBegin  
  
Please get back to us if you require any further assistance. 
 
Regards, 
Sujith R

Sujith Kumar Rajkumar · Answer

Hi Paul, 

Greetings from Syncfusion support. 
 
Query – 1: “It always seems to add the data to the top of the grid, even though i have on the grid settings for new records to be at the bottom of the grid” 

For adding new records we suggest you to use the Grid’s addRecord method as demonstrated in the below code snippet, 
 




var gridInstance = document.getElementById('Grid').ej2_instances[0]; 
var newData = { 'OrderID': 112, 'Name': 'John', 'Year': 2018 } 
gridInstance.addRecord(newData); 
 
API link: https://ej2.syncfusion.com/javascript/documentation/api/grid/#addrecord 
 
And for adding records to the bottom of the Grid - If the newRowPosition in the editSettings is set to ‘Bottom’ then the new row will be displayed at the bottom. But after updating the record it will be moved to the top so that the new record will be in display position which is the default behavior. However you can maintain the row position in the bottom itself by changing its index position in the Grid’s actionBegin event. This is demonstrated in the below code snippet,  





// Grid’s actionBegin event function  
function actionBegin(args) { 
        if (args.requestType === 'save' && this.editSettings.newRowPosition === 'Bottom') { 
            // Newly added row’s index position is changed to last index  
            args.index = (this.pageSettings.currentPage * this.pageSettings.pageSize) - 1; 
        }  
} 

We have prepared a sample based on this for your reference. You can download it from the following link, 

Sample: https://www.syncfusion.com/downloads/support/forum/155416/ze/GridApplication-1978450241  

API link: https://ej2.syncfusion.com/javascript/documentation/api/grid/#actionbegin 
 
Query – 2: “How are you able to add html elements to the datetime picker such as required as i cannot seem to find anywhere how to add html elements to controls like the date time picker” 
 
Please update below details to proceed further with this query, 
  
1.     Share your exact scenario to add the additional html element into datetimepicker component.  
2.     Explain in which area you want to add the html element like any icons or buttons into the popup element or input element.  
 
These details will help us identify your exact requirement so that we can provide the proper solution as earlier as possible.  

Let us know if you have any concerns. 
  
Regards, 
Sujith R

pcafstockf · Answer

Hi Paul, 

Greetings from Syncfusion support. 
 
Query – 1: “It always seems to add the data to the top of the grid, even though i have on the grid settings for new records to be at the bottom of the grid” 

For adding new records we suggest you to use the Grid’s addRecord method as demonstrated in the below code snippet, 
 




var gridInstance = document.getElementById('Grid').ej2_instances[0]; 
var newData = { 'OrderID': 112, 'Name': 'John', 'Year': 2018 } 
gridInstance.addRecord(newData); 
 
API link: https://ej2.syncfusion.com/javascript/documentation/api/grid/#addrecord 
 
And for adding records to the bottom of the Grid - If the newRowPosition in the editSettings is set to ‘Bottom’ then the new row will be displayed at the bottom. But after updating the record it will be moved to the top so that the new record will be in display position which is the default behavior. However you can maintain the row position in the bottom itself by changing its index position in the Grid’s actionBegin event. This is demonstrated in the below code snippet,  





// Grid’s actionBegin event function  
function actionBegin(args) { 
        if (args.requestType === 'save' && this.editSettings.newRowPosition === 'Bottom') { 
            // Newly added row’s index position is changed to last index  
            args.index = (this.pageSettings.currentPage * this.pageSettings.pageSize) - 1; 
        }  
} 

We have prepared a sample based on this for your reference. You can download it from the following link, 

Sample: https://www.syncfusion.com/downloads/support/forum/155416/ze/GridApplication-1978450241  

API link: https://ej2.syncfusion.com/javascript/documentation/api/grid/#actionbegin 
 
Query – 2: “How are you able to add html elements to the datetime picker such as required as i cannot seem to find anywhere how to add html elements to controls like the date time picker” 
 
Please update below details to proceed further with this query, 
  
1.     Share your exact scenario to add the additional html element into datetimepicker component.  
2.     Explain in which area you want to add the html element like any icons or buttons into the popup element or input element.  
 
These details will help us identify your exact requirement so that we can provide the proper solution as earlier as possible.  

Let us know if you have any concerns. 
  
Regards, 
Sujith R Hi Sujith,I've implemented the code you suggest to modify args.index (which does work), however the grid then promptly selects the top/first row.Calling selectRow(args.index) does not seem to help.* How can I convince the Grid to select the row that has just been added (at the Bottom) ?Thanks,-Earl