To implement custom Editing Form

Place the following code in client-side.

JavaScript

Copy 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>

Create ToggleCustomerForm function to invoke the custom editing form.

JavaScript	Copy Code
function ToggleCustomerForm(visibility) { var customerForm = document.getElementById("CustomerForm"); if (visibility) customerForm.style.display = ""; else customerForm.style.display = "none"; }

Now, create AddNewRow function for adding data.

JavaScript

Copy 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;
}

Finally, create DoAction function to apply the data update.

JavaScript

Copy 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
   }
}

Run the project.

Intersoft WebGrid Documentation
How-to: Implement custom Editing Form
See Also Send comments on this topic.

To implement custom Editing Form

See Also