Services
Support
Store
©2015 Intersoft Solutions. All rights reserved.
Intersoft Support Center

Implement Custom Editing Form

WebGrid allows user to implement custom Editing Form based on their requirement.

In this topic, you will learn how to create custom Editing Form.

To implement custom Editing Form

  1. Place the following code in client-side.
    JavaScript Copy ImageCopy Code 
    <div id="CustomerForm" style="position: absolute; background-color: aliceblue; width: 450px; left: 581px; top: 8px;">
   <div id="FormTitle" style="background-color: lightsteelblue; width: 100%; height: 20px; padding: 2px" class="text">
         [Title]
   </div>
   <table cellpadding="2" class="text" width="100%">
            <tr>
                <td style="width: 100px">
                    CustomerID</td>
                <td>
                    <input type="text" id="CustomerIDText" style="width: 100%" class="text" /></td>
            </tr>
            <tr>
                <td style="width: 100px">
                    CompanyName</td>
                <td>
                    <input type="text" id="CompanyNameText" style="width: 100%" class="text" /></td>
            </tr>
            <tr>
                <td style="width: 100px">
                    ContactName</td>
                <td>
                    <input type="text" id="ContactNameText" style="width: 100%" class="text" /></td>
            </tr>
            <tr>
                <td style="width: 100px">
                    ContactTitle</td>
                <td>
                    <input type="text" id="ContactTitleText" style="width: 100%" class="text" /></td>
            </tr>            
   </table>
<input type="button" id="ActionButton" value="Action" class="text" style="width: 75px" onclick="DoAction()" />
</div>

  2. Create ToggleCustomerForm function to invoke the custom editing form.
    JavaScript Copy ImageCopy Code 
    function ToggleCustomerForm(visibility)
{
   var customerForm = document.getElementById("CustomerForm");
            
   if (visibility)
      customerForm.style.display = "";
   else
      customerForm.style.display = "none";
}

  3. Now, create AddNewRow function for adding data.
    JavaScript Copy ImageCopy Code 
    function AddNewRow()
{            
   Clear(); // clear the customer form
   var customerForm = document.getElementById("CustomerForm");
   customerIDText.disabled = "";
            
   var formTitle = document.getElementById("FormTitle");
   formTitle.innerText = "Add new Customer";
                                                
   var actionButton = document.getElementById("ActionButton");
   actionButton.value = "Insert";
            
   ToggleCustomerForm(true);                                    
            
   return true;
}

  4. Finally, create DoAction function to apply the data update.
    JavaScript Copy ImageCopy Code 
    function DoAction()
{
   // retrieves WebGrid's object
   var grid = ISGetObject("WebGrid1");
            
   var actionButton = document.getElementById("ActionButton");
   if (actionButton.value == "Insert")
   {             
      var newRow = grid.RootTable.NewRow(); // create new row object
      var cells = newRow.GetCells() ; // get WebGridCell collection
                
      // populate new row object     
      cells.GetNamedItem("CustomerID").SetText(customerIDText.value, true);
      cells.GetNamedItem("CompanyName").SetText(companyNameText.value, true);
      cells.GetNamedItem("ContactName").SetText(contactNameText.value, true);
      cells.GetNamedItem("ContactTitle").SetText(contactTitleText.value, true);
   
      newRow.Update(); // insert new record
   }
}

  5. Run the project.

Getting Started

Binding to Server DataSource

Displaying Data

Visualizing Data

Customizing Data Display and Styles

Improving Performance

Customizing WebGrid User Interface

Sorting Data

Grouping Data

Filtering Data

WebGrid's Layout Mode

Paging Data with VirtualLoad Mode

Inline Data Editing

Working with Client-Side Binding

Batch Data Editing

Using Editing Controls

Validating Input

Exporting Data

Advanced Client-Server Interaction

Programming with Server-side API

Programming with Client-side API

Extending Client-Side Binding

Previous Next