1. Home
  2. Forum
  3. jQuery
  4. simulate an add's, edit's or delete's event using the "ejGrid" component's method

simulate an add's, edit's or delete's event using the "ejGrid" component's method

Good afternoon.

When I click on one of these buttons (add, edit, delete) the "ejGrid" component throw an event. However, I would like to know if I can throw this event with a method of this component.



I will be awaiting for your reply, thank you in advance.

Kind regards, Luis Carlos Díaz.


7 Replies
MP Manivannan Padmanaban Syncfusion Team February 9, 2018 01:20 PM UTC

Hi Luis, 
 
Thanks for contacting syncfusion support. 
 
Query : simulate an add's, edit's or delete's event using the "ejGrid" component's method  
 
While toolbar items is clicked (i.e add,edit,delte etc.,) toolbarclickevent is triggered it contains the parameters like gridmodel, target, toolbardata etc., and for each toolbar actions like add, edit and delete the beginEdit, endEdit, endAdd and endDelete events are triggered. 
 
Refer the below help documentation links, 
 
 
You can also customized the toolbar items (to create or modify the toolbar items) by using the customtoolbar property. Refer the below link, 
 
 
Regards, 
 
Manivannan Padmanaban. 


LC Luis Carlos February 9, 2018 01:37 PM UTC

Good afternoon, again.

Maybe I did not explain well, Let me try it in another way.

As you can see in the below image, it shows a blue button and a "ejGrid" component. I would like to click the blue button and suddenly can edit the selected row.



Image 1: before click on the blue button


Image 2: after click on the blue button


I will be awaiting for your reply, thank you for your quick reply.

Regards, Luis Carlos Díaz.


SE Sathyanarayanamoorthy Eswararao Syncfusion Team February 12, 2018 01:18 PM UTC

Hi Luis, 
 
According to your requirement you need to edit the selected row on external button click. We have achieved your requirement using startEdit method of ejGrid.  
 
In startEdit method we need to pass selected row as a parameter. Using getSelectedRows method we can able to get the selected row.  
 
Please find the code example 


 

<button id="btn" onclick="btnclick()">Edit the row</button> 
   
    <script type="text/javascript"> 
        $(function () { 
            $("#Grid").ejGrid({ 
                                    ------------------------ 
              editSettings:{allowEditing:true,allowAdding:true,allowDeleting:true}, 
                           --------------- 
            }); 
        }); 
       
      function btnclick(){ 
        var obj = $("#Grid").ejGrid("instance"); 
        obj.startEdit(obj.getSelectedRows()); 
      } 
    </script> 

We have prepared a JSPlayground sample for your reference which can be found below. 


Please refer the below documentation. 




If you need any further assistance please get back to us. 

Regards, 
Sathyanarayanamoorthy 



LC Luis Carlos February 12, 2018 01:31 PM UTC

Good evening again.

Thank you for your reply. Your solution is only for editing row, however I was wondering if there is any method for adding or deleting row.

I will be awaiting for your reply, thank you in advance.

Kind regards, Luis Carlos.



BM Balasubramanian Masilamani Syncfusion Team February 13, 2018 11:46 AM UTC

  
Hi Luis Carlos, 

Thanks for contacting Syncfusion support. 

We have checked your query and we suspect that you want to add or delete the record using methods in grid. Adding and Deleting the rows can be performed by “addRecord” and “deleteRecord” methods respectively. 
 
Please refer the code sample 
 
<button id="btn" onclick="btnclick()">Edit the row</button> 
  <button id="btn1" onclick="btn1clk()">Add record</button> 
  <button id="btn2" onclick="btn2clk()">Delete record</button> 
<script type="text/javascript"> 
        $(function () { 
             $("#Grid").ejGrid({ 
                             editSettings:{allowEditing:true,allowAdding:true,allowDeleting:true}, 
                            }); 
           }); 
  function btnclick(){ 
        var obj = $("#Grid").ejGrid("instance"); 
        obj.startEdit(obj.getSelectedRows()); 
      } 
                function btn1clk(){ 
                           var obj=$("#Grid").ejGrid("instance"); 
                            obj.addRecord({"OrderID":102,"ShipName":"Vikrant","ShipCity":"India"}); 
                } 
                function btn2clk(){ 
                           var obj=$("#Grid").ejGrid("instance"); 
                           obj.deleteRecord("OrderID",obj.getSelectedRecords()[0]); 
} 
   </script> 

Please refer the documentation link below 
 
 
Sample Link: 
 
 
Please let us know if you need further assistance 

Regards, 
Balasubramanian Masilamani 



LC Luis Carlos February 13, 2018 12:09 PM UTC

Good evening.

Maybe I did not fully explained, let my try it again.
I would like to click on green button and suddenly can add a new row.


Image 1: before click on green button

Image 2: after click on green button

I will be awaiting for your reply, thank you again.
Kind regards, Luis Carlos.

BM Balasubramanian Masilamani Syncfusion Team February 14, 2018 07:16 AM UTC

Hi Luis Carlos, 

Thanks for contacting Syncfusion support. 

We have checked your query and suspect that you want to add a row in similar way of adding a row from toolbar items through an external button. We recommend you to use the below solution. 
 
Please refer the code sample 
<button id="btn" onclick="btnclick()">Edit the row</button> 
  <button id="btn1" onclick="btn1clk()">Add record</button> 
  <button id="btn2" onclick="btn2clk()">Delete record</button> 
<script type="text/javascript"> 
        $(function () { 
            $("#Grid").ejGrid({ 
                            editSettings:{allowEditing:true,allowAdding:true,allowDeleting:true}, 
... 
function btn1clk(){ 
                           var obj=$("#Grid").ejGrid("instance"); 
                           var e = {type:"mouseup", button:0, which: 1}; 
                           $("#” + obj._id  + ”_add").trigger(e); 
} 
    
Your requirement can be achieved by using the above code sample. 

We have prepared a JSPlayground sample for your reference which can be found below.  
 


Please let us know if you need further assistance. 

Regards, 
Balasubramanian Masilamani. 




Loader.
Up arrow icon