1. Home
  2. Forum
  3. ASP.NET MVC
  4. How to add a new line in the bottom of existing records of the grid.

How to add a new line in the bottom of existing records of the grid.

Hi,
I'm adding new record to the grid using bellow code. But it always add the new line to the top of existing records. Is there any way to add the new record to the bottom of existing records set?
Thank you
Kalum


7 Replies
TS Thavasianand Sankaranarayanan Syncfusion Team September 28, 2018 11:28 AM UTC

Hi Kalum, 

Thanks for contacting Syncfusion support. 

We have achieved your requirement using the actionBegin and actionComplete event of the Grid. 

In the below code example we have placed the newly added record at the last row in the dataSource of grid.  

@(Html.EJ().Grid<Object>("FlatGrid") 
                .Datasource((IEnumerable<object>)ViewBag.DataSource) 
                .AllowPaging() 
                .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); }) 
                .ClientSideEvents(eve => eve.ActionComplete("Complete").ActionBegin("Begin")) 
                .ToolbarSettings(toolbar => 
                   { 
                       toolbar.ShowToolbar().ToolbarItems(items => 
                       { 
                           items.AddTool(ToolBarItems.Add); 
                           items.AddTool(ToolBarItems.Edit); 
                           items.AddTool(ToolBarItems.Delete); 
                           items.AddTool(ToolBarItems.Update); 
                           items.AddTool(ToolBarItems.Cancel); 
                       }); 
                   }) 
                .Columns(col => 
                  { 
                      col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Add(); 
                      col.Field("CustomerID").HeaderText("Customer ID").Add(); 
                      col.Field("EmployeeID").HeaderText("Employee ID").Add(); 
                      col.Field("ShipCity").HeaderText("Ship City").Add(); 
                      col.Field("ShipCountry").HeaderText("Ship Country").Add(); 
                  })) 
<script> 
 
    var flag; 
    function Begin(args) { 
        if (args.requestType == "add") 
            flag = true; 
    } 
 
    function Complete(args) { 
        if (args.requestType == "save") { 
            if (flag) { 
                this.model.dataSource.shift() //  remove the newly added row 
                this.model.dataSource.push(args.data) // push the added row at your required index 
                this.refreshContent(); 
                flag = false; 
            } 
        }        
    } 
</script> 

Please refer the below documentations for your reference. 


 
Regards, 
Thavasianand S. 


KA kalum September 29, 2018 06:58 AM UTC

Hi Thavasianand,
Thank you very much for your solution. But im using grid in batch edit mode and i need to add new blank record for editing into the bottom of grid, once I compleated editing last record. That is without clicking any add button.

Thank you,
Kalum

VN Vignesh Natarajan Syncfusion Team October 1, 2018 08:41 AM UTC

Hi Kalum, 
 
Thanks for the update. 
 
We have analyzed your query and we have achieved your requirement (Add new record when user save the last editable cell) using CellSave event and addRecord() method of ejGrid. 
 
Refer the below code example 
 
<div id="ControlRegion"> 
    @(Html.EJ().Grid<object>("FlatGrid") 
        .AllowPaging() 
                 .Datasource((IEnumerable<object>)ViewBag.datasource) 
                      .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.Batch).RowPosition(RowPosition.Bottom); }) 
.                                          .                                .                                   .                                  . 
                      .ClientSideEvents(e => e.CellSave("save")) 
        .Columns(col => 
         { 
.                                  .                                .                                .                                 . 
         }))</div> 
<script> 
     
    function save(args) { 
        if (args.cell.closest("tr").index() + 1 == args.model.pageSettings.pageSize) { 
            if (args.cell.index() + 1 == this.getVisibleColumnNames().length) { 
                var proxy = this; 
                setTimeout(function () { 
                    proxy.addRecord(); 
                }, 0) 
            } 
        } 
    }   
</script> 
 
  
Refer the below screenshot for the output 
 
 
 
For your convenience we a have prepared a sample which can be downloaded from below link 
 
 
Refer our help documentation for your reference 
 
 
Regards, 
Vignesh Natarajan 


KA kalum October 2, 2018 11:15 AM UTC

Hi Thavasianan,
Your solution helped me alot to reach more closer to my requirement. But still Im facing small problem. I wanted to modify your Save function to achive my requirement as bellow. But it adds the new record into the top of the recordset. Please be good enough to explain me the fault in my code.


@(Html.EJ().Grid<object>("Recipe_FlatGrid")

            .AllowPaging()
                     .Datasource((IEnumerable<object>)ViewBag.griddata)
                          .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.Batch).RowPosition(RowPosition.Bottom); })

                          .ClientSideEvents(e => e.CellSave("save"))
            .Columns(col =>
            {

                col.Field("LinNo").HeaderText("LinNo").Width("50").IsPrimaryKey(true).IsIdentity(true).AllowEditing(true).TextAlign(TextAlign.Left).Add();
                col.Field("RcpNo").HeaderText("RcpNo").Width("100").TextAlign(TextAlign.Left).AllowEditing(false).Visible(true).Add();
                col.Field("InputItemKey").HeaderText("InputItemKey").Width("100").TextAlign(TextAlign.Left).AllowEditing(true).Visible(true).Add();
                col.Field("ItemCode").HeaderText("ItemCode").Width("150").TextAlign(TextAlign.Left).AllowEditing(true).Visible(true).EditTemplate(a => { a.Create("create_ItemCode").Read("read_ItemCode").Write("write_ItemCode"); }).Add();
                col.Field("ItemName").HeaderText("ItemName").Width("300").TextAlign(TextAlign.Left).AllowEditing(true).Visible(true).EditTemplate(b => { b.Create("create_ItemName").Read("read_ItemName").Write("write_ItemName"); }).Add();
                col.Field("InputItemQty").HeaderText("Input<br>ItemQty").Width("100").TextAlign(TextAlign.Left).AllowEditing(true).Format("{0:C}").Visible(true).Add();
                col.Field("UnitAbbr").HeaderText("UnitAbbr").Width("100").TextAlign(TextAlign.Center).AllowEditing(false).Visible(true).Add();
                //col.Field("OutputItemQty").HeaderText("OutputItemQty").Width("100").TextAlign(TextAlign.Left).AllowEditing(true).Visible(true).Add();
                col.Field("UCPrice").HeaderText("UCPrice").Width("100").TextAlign(TextAlign.Left).AllowEditing(true).Visible(true).Add();
                col.Field("Value").HeaderText("Value").Width("100").TextAlign(TextAlign.Center).AllowEditing(true).Visible(true).Add();
                //col.Field("OutputItemKey").HeaderText("OutputItemKey").Width("100").TextAlign(TextAlign.Left).AllowEditing(true).Visible(true).Add();
                col.Field("ItTypeCode").HeaderText("ItTypeCode").Width("100").TextAlign(TextAlign.Left).AllowEditing(true).Visible(true).Add();
                col.Field("IsEdited").HeaderText("IsEdited").Width(50).TextAlign(TextAlign.Center).Visible(false).Add();


            }))

<script>

    function save(args) {


      if (args.cell.closest("tr").index() + 1 < args.model.pageSettings.pageSize) {
            if (args.cell.index() +1 == this.getVisibleColumnNames().length) {
                var proxy = this;
                setTimeout(function () {

                   //proxy.addRecord();

                    var obj = $("#Recipe_FlatGrid").ejGrid("instance");
                    obj.batchSave();
                    //Create instance for the grid
                    var gridObj = $("#Recipe_FlatGrid").data("ejGrid");
                    //Adding record to the grid

                    var c = 0;

                    if ($("#Recipe_FlatGrid").ejGrid("option", "pageSettings.totalRecordsCount") == null) {
                        c = 100001;
          
                    }
                    else {
                        c = ej.max(gridObj.model.dataSource, "LinNo").LinNo + 1;

                        if (c < 100001) {
                            c = 100001;
                        }
                    }

                    gridObj.addRecord({ LinNo: c });


                }, 0)
            }
      }
    }


TS Thavasianand Sankaranarayanan Syncfusion Team October 3, 2018 01:09 PM UTC

Hi Kalum, 

Based on your given code example, you have call for the batchSave method in the cellSave event of ejGrid and add a new record in Grid. 

Provide the following details for better assistance. 

  1. Are you want to add newly added record in as last in records in dataSource ?
  2. Else want to add as last record of current page ?
  3. Why you have call the batch save method in cellSave event ?

Regards, 
Thavasianand S. 


KA kalum October 4, 2018 03:37 AM UTC

Hi Thavasianand,
Thank you for reply and answers for your questions are as bellow.

  1. Are you want to add newly added record in as last in records in dataSource ?
    Else want to add as last record of current page ?

    I actually want to add the newly added record as last record of current page.

  2. Why you have call the batch save method in cellSave event ? 

    That is because once I add data to the first added line and then if i try to add another line to the grid it gives the message "Unsaved changes will be lost. Are you sure you want to continue?". Aniway I will be able to call batchsave in someweare else.

Thank you.
Kalum

TS Thavasianand Sankaranarayanan Syncfusion Team October 5, 2018 05:43 AM UTC

Hi Kalum, 

Query#1:- I actually want to add the newly added record as last record of current page. 
 
We have saved the newly added record as the last record of the current Page using ActionComplete event of the Grid. By default newly added record has been added as last Record in the dataSource. So we have removed the newly added record by splicing from the dataSource. After that we have inserted the record as last record into current Page by calculating the index. After that we can refresh the Grid using refreshContent method. 

Please refer to the code example:- 

@(Html.EJ().Grid<object>("Grid") 
         .AllowPaging() 
         .Datasource((IEnumerable<object>)ViewBag.datasource) 
         .ClientSideEvents(eve => eve.ActionComplete("Complete").CellSave("save"))  
        .Columns(col => 
         { 
             col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add(); 
             col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add(); 
         })) 
 
<script> 
    var data; 
    function Complete(args) {  
        if (args.requestType == "batchsave") { 
            this.model.dataSource.splice(-1); 
            var index = (this.model.pageSettings.currentPage * this.model.pageSettings.pageSize)-1; 
            this.model.dataSource.splice(index, 0, data); 
            this.refreshContent();  
                
          }         
    } 
    function save(args){ 
        data = args.rowData; 
     } 
    
 
    </script> 

Refer to the Sample Link:- 

Refer to the API Link:- 

Query#2:- That is because once I add data to the first added line and then if I try to add another line to the grid it gives the message "Unsaved changes will be lost. Are you sure you want to continue?" 
 
You can use batchSave as like your provided code example. If you have any other queries regarding this requirement then please get back to us with further details. 

Regards, 
Thavasianand S. 


Loader.
Up arrow icon