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.

click a tag update grid

Thread ID:

Created:

Updated:

Platform:

Replies:

124059 May 12,2016 02:01 AM May 13,2016 04:41 AM ASP.NET Web Forms 1
loading
Tags: Grid
Pratheep
Asked On May 12, 2016 02:01 AM

 

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 [Syncfusion]
Replied On May 13, 2016 04:41 AM

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. 
 
 
 
<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. 
 
 
 
<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. 
 
 
 
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. 
 
 
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. 
 
 
function saveEvent() { 
                var gridObj = $("#OrdersGrid").data("ejGrid"); 
                gridObj.endEdit(); 
            } 
 
4. Delete Record: 
 
Use delete record method to perform the delete operation. 
 
 
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 


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.

;