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

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

Thread ID:

Created:

Updated:

Platform:

Replies:

119655 Jul 18,2015 02:44 AM Oct 9,2017 07:51 AM ASP.NET MVC 7
loading
Tags: Grid
Ganga
Asked On July 18, 2015 02:44 AM


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.





Gowthami V [Syncfusion]
Replied On July 20, 2015 08:38 AM

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.


Ehsan Shirvan
Replied On September 7, 2015 02:15 AM

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.


Hi I have a grid which I want to add record to it so I Used this code : 
//Create instance for the grid
var gridObj = $("#FlatGrid").data("ejGrid");
//Adding record to the grid
  gridObj.addRecord({ Id: 5, Name: "asdfsdf", EmpId: 4 });

but I got this Error : ej.grid.js:3977 Uncaught TypeError: Cannot read property 'adaptor' of null
for more details : 
I get some data from server based on demand and then I add them to grid one by one but when I use code above this problem would be appeared

Gowthami V [Syncfusion]
Replied On September 8, 2015 02:23 AM

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.


Ehsan Shirvan
Replied On September 8, 2015 03:06 AM

thank you for you replying .
I will download your sample and check that.But now I should mention you that I'm using version 13.2.0.29 so I would be pleased if you check this scenario by this version.
thank you again

Gowthami V [Syncfusion]
Replied On September 9, 2015 02:23 AM

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.

Yap Kian Hon
Replied On October 8, 2017 07:15 AM

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>


Mani Sankar Durai [Syncfusion]
Replied On October 9, 2017 07:51 AM

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. 


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.

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.

;