click a tag update grid

[Pratheep]

 

If i click a tag it possible insert,update,delete grid record ?

    <div>

   

        <table>

 

            <tr>

                <td>

                    <label>CustomerID:"</label>

                                                     <input type="text" name="customerID" placeholder="customerID">

                </td>

            </tr>

               <tr>

                <td>

                    <label>Ship City:</label>

                                                     <input type="text" name="Shipcity" placeholder="Shipcity">

                </td>

            </tr>

               <tr>

                <td>

                  <a rel='nofollow' href="#Save">Save</a> 

                </td>

                <td>

                  <a rel='nofollow' href="#Edit">Edit</a> 

                </td>

                <td>

                  <a rel='nofollow' href="#Delete">Delete</a> 

                </td>

            </tr>

        </table>

 

 

         

   </div>      

 

    <div id="Content">

        <ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True">

 

            <Columns>

          

                <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="80">

                     <ValidationRule>

                        <ej:KeyValue Key="required" Value="true" />

                        <ej:KeyValue Key="minlength" Value="3" />

                    </ValidationRule>

                </ej:Column>      

                <ej:Column Field="ShipCity" HeaderText="Ship City" Width="80" />

      

                

            </Columns>

        </ej:Grid>

    </div>

Thanks

Pratheep

Attachment: DialogEditing_5e3b0c78.rar

[Balaji Marimuthu]

Hi Pratheep, 

 

Thanks for contacting Syncfusion support. 

 

Yes, you can perform the insert, delete, update action when clicking the tag. Refer to the modified sample, code example and help document as below. 

 

Modified Sample: DialogEditing 

 

To perform the Adding, Editing, Deleting operation in Grid, the corresponding property should be enable in Grid EditSettings. And, the Editing in Grid is performed based on the primary key field. So IsPrimaryKey property should be enable in column definition. 

 

http://help.syncfusion.com/aspnet/grid/editing 

 

 

<ej:Grid ID="OrdersGrid" ClientIDMode="Static" runat="server" AllowPaging="True"> 

            <EditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true" /> 

            <Columns> 

           <ej:Column Field="OrderID" IsPrimaryKey="true" Width="80"></ej:Column> 

                <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="80"> 

                     <ValidationRule> 

                        <ej:KeyValue Key="required" Value="true" /> 

                        <ej:KeyValue Key="minlength" Value="3" /> 

                    </ValidationRule> 

                </ej:Column>        

                <ej:Column Field="ShipCity" HeaderText="Ship City" Width="80" /> 

        

                  

            </Columns> 

        </ej:Grid> 

 

Note: By default all operation such as Update and Delete can be performed after the row selection. Also, we can perform the Insert/Update/Delete operation dynamically. When perform the operation dynamically we need to pass the values to corresponding method. 

 

1.Insert Record: 

 

Use addRecord method in Grid to perform the insert. To add record dynamically in Grid use the below code example. 

 

Help Document: http://help.syncfusion.com/js/api/ejgrid#methods:addrecord 

 

 

<a rel='nofollow' href="#Add" onclick="addEvent()">Add</a>   

 

function addEvent() { 

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

                gridObj.addRecord({ "OrderID": 12333, "CustomerID": "vinet", "ShipCity": "berlin" });  //add record dynamically 

 

                //trigger addrecord - new row only added: you need to insert values 

                //gridObj.addRecord();   

            } 

 

 

To add the new rows only use the addRecord method and you need to insert values manually. 

 

 

  function addEvent() { 

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

                //trigger addrecord - new row only added: you need to insert values 

                gridObj.addRecord();   

            } 

 

2. Edit Record 

 

Use the StartEdit method to perform the Edit operation. By default we can edit the records after selecting the rows. 

 

Help Document: http://help.syncfusion.com/js/api/ejgrid#methods:startedit 

 

 

function editEvent() 

            { 

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

                

                var index = gridObj.selectedRowsIndexes[0]; 

                var rowEle = gridObj.getRowByIndex(index); 

                gridObj.startEdit(rowEle); 

 

                //for ex – Edit without select 

                //gridObj.startEdit($(".e-gridcontent tr").first()); 

 

            } 

 

 

If you edit the record without selecting, you need to pass the row element to startEdit method which need to delete. 

 

3. Update Record: 

 

Use update record to perform the update operation dynamically. 

 

Help Document: http://help.syncfusion.com/js/api/ejgrid#methods:updaterecord 

 

function saveEvent() { 

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

                gridObj.updateRecord("OrderID", { OrderID: 10004, EmployeeID: 3 }); 

            } 

 

To perform the update operation after editing the rows manually (enter values to the form and click save), use the endEdit method. 

 

Help Document: http://help.syncfusion.com/js/api/ejgrid#methods:endedit 

 

function saveEvent() { 

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

                gridObj.endEdit(); 

            } 

 

4. Delete Record: 

 

Use delete record method to perform the delete operation. 

 

Help Document: http://help.syncfusion.com/js/api/ejgrid#methods:deleterecord 

 

To manually select the rows and delete use below code. 

 

 

  function deleteEvent() { 

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

 

                var primaryKeyCol = gridObj.getPrimaryKeyFieldNames()[0]; 

                var selectedRecord = gridObj.getSelectedRecords()[0]; 

 

                gridObj.deleteRecord(primaryKeyCol, selectedRecord); 

 

 

                //for ex: 

                //gridObj.deleteRecord("OrderID", { OrderID: 10004, EmployeeID: 3 }); 

 

            } 

 

 

To perform operation dynamically, use the below code. 

 

 

function deleteEvent() { 

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

                gridObj.deleteRecord("OrderID", { OrderID: 10004, EmployeeID: 3 }); 

 

            } 

 

 

 

 

Regards, 

Balaji Marimuthu