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
close icon

How to add and Delete the Rows in ej grid by uisng extrernal button including serial number


I want to add the Rows and  remove the last row  in multiple ej grid by using external  button click.
simultaneously when i add the rows serial number also added in all grid.





5 Replies

GV Gowthami V Syncfusion Team July 20, 2015 12:38 PM UTC

Hi Ganga,

Thanks for using Syncfusion products.

Based on your requirement we can add the record using “addRecord” method and remove the last record using “deleteRecord” method of the grid.

addRecord Method:

Syntax:

//Create instance for the grid
var gridObj = $("#FlatGrid").data("ejGrid");
//Adding record to the grid
  gridObj.addRecord({ Id: 5, Name: "asdfsdf", EmpId: 4 });


Please refer the below link for more clarification about addRecord method.

http://helpjs.syncfusion.com/js/api/ejgrid#methods:addrecord

deleteRecord method:

Syntax:

//Getting index of the lastrecord

var index = $("#FlatGrid").find(".e-lastrowcell").parent().index();

var data = gridObj.model.currentViewData[index];
//Removing last record using deleteRecord method

gridObj.deleteRecord("Id", { Id: data.Id, EmpId: data.EmpId });


http://helpjs.syncfusion.com/js/api/ejgrid#methods:deleterecord

Please provide below details about your requirement to proceed with this.

1.       Please share us the screenshot of your requirement with multiple grid like before add the record ,after added the record and after delete the record, etc..

2.       Provide us detailed description of your requirement / complete procedure of your requirement.

3.       And also share the details that the add/delete operations will perform in all the grid in single button click or add the records in one grid will delete the record in other grid.

4.       Please provide more details about the requirement simultaneously when i add the rows serial number also added in all grid” like screenshot.

The provided information will help us to analyze the requirement and provide you the response as early as possible.

Regards,
Gowthami V.



GV Gowthami V Syncfusion Team September 8, 2015 06:23 AM UTC

Hi Ganga,

We have checked the reported scenario with 13.1.0.21 and 13.2.0.34 versions but we are unable to reproduce the issue.

We have created a sample for adding a record by clicking an External Button (version 13.1.0.21) using “addRecord” method that you can download from the following link:


http://www.syncfusion.com/downloads/support/forum/119655/ze/MvcApplication66-2043555382


If we misunderstood your query, please provide below details,


1.       Version details of the product of your application.

2.       Code example (View and Controller) of your application.

3.       Reproduce the reported issue in the above sample.
The provided information will help to analyze the issue and provide a solution as early as possible.

Regards,

Gowthami V.



GV Gowthami V Syncfusion Team September 9, 2015 06:23 AM UTC

Hi Ehsan,
We have checked the sample with the version “13.2.0.29” also. But we are unable to reproduce the issue.

Please check the sample and provide the details that we have asked in the previous response which will help to analyze the issue and provide you the response as early as possible.

Regards,
Gowthami V.


YK Yap Kian Hon October 8, 2017 11:15 AM UTC

Hi, 

I am running 15.3460.0.26 and when I try to do addrecord, the grid does not show the row added when it is empty. After I click on the grid toolbar add button, 2 rows (include the one i previously added) shows up.


Below is my code


cript>

    $(function () {

 

    $("#Grid3").ejGrid({

        dataSource: window.gridData,

        isResponsive: true,

        allowSorting: true,

        allowSelection: true,

        //allowAdding: true,

        beginEdit: "beginEdit",

        endDelete: "endDelete",

        endAdd: "endAdd",

        dataSourceCachingMode: "None",

        actionFailure: "logerror",

        //sortSettings: { sortedColumns: [{ field: "invoice_item_seq_id", direction: "ascending" }] },

        editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },

        toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },

        columns: [

                 { field: "invoice_item_seq_id", isPrimaryKey: "true", headerText: "S/N", textAlign: ej.TextAlign.Left, width: 20 },

                 { field: "ref", headerText: "Part", textAlign: ej.TextAlign.Left, width: 40 },

                 { field: "item_description", headerText: "Description", textAlign: ej.TextAlign.Left, width: 150 },

                 { field: "quantity", headerText: "Qty", textAlign: ej.TextAlign.Center, width: 30 },

                 { field: "currency_id", headerText: "Currency", textAlign: ej.TextAlign.Center, width: 30 },

                 { field: "unit_price", headerText: "Unit Price", textAlign: ej.TextAlign.Center, width: 50 },

                 { field: "cost", headerText: "Disc Amt", textAlign: ej.TextAlign.Center, width: 50 },

                 { field: "taxable_flag", headerText: "Gst", textAlign: ej.TextAlign.Center, width: 30 },

                 { field: "amount", headerText: "Amount", textAlign: ej.TextAlign.Right, width: 50 }


        ]

    });

    });

</script>



  </div> 


  <script>

      // Create grid object.

      var row_count = 0;

      var data_str = "";



      function add_record(ref, name)

      {

          var gridObj = $("#Grid3").data("ejGrid");

          // Sends an add new record request to the grid

          row_count=row_count + 1

          gridObj.addRecord({ "invoice_item_seq_id": row_count, "ref": ref, "item_description": name, "quantity": 1, "currency_id": "MYR", "unit_price": "0.00", "cost": "", "taxable_flag": "SR", "amount": 0.00 });

          refresh_content();

          

      }


</script>



MS Mani Sankar Durai Syncfusion Team October 9, 2017 11:51 AM UTC

Hi Yap, 

We have checked your code example and we are not able to reproduce the reported issue. We have also prepared a sample that can be downloaded from the below link. 
In this sample as per your code example we have added the records in grid using button click and it added correctly without any error.  
If you still face the issue please get back to us with the following details. 
1.       Share the screenshot/ video of the issue that you have faced. 
2.       In what you have added the records in grid? 
3.       Share the full grid code that you have used. 
4.       Code and reason behind refresh_content method that you have used while adding. 
5.       If possible please reproduce the issue in the above attached sample. 
The provided information will help us to analyze the issue and provide you the response as early as possible. 

Please let us know if you need further assistance. 

Regards, 
Manisankar Durai. 


Loader.
Live Chat Icon For mobile
Up arrow icon