This walkthrough shows you how to obtain other cells values using client side scripts.

During this walkthrough, you will learn how to do the following:

Manipulate the grid client side to modify other cell values.

Prerequisites

In order to complete this walkthrough, you will need the following:

Access to the Microsoft Access Northwind database.
Visual Studio 2005 Application.

Step-By-Step Instructions

Bind WebGrid to AccessDataSource.

Place a HTML button in order to invoke a client side function like following:

JavaScript

Copy Code

function AddCustomer()
{
        var grid = ISGetObject("WebGrid1");
        var txtCustomerID = document.getElementById("txtCustomerID");
        var txtContactName  = document.getElementById("txtContactName");
        var txtContactTitle = document.getElementById("txtContactTitle");
        var txtCompanyName = document.getElementById("txtCompanyName");
        var txtAddress = document.getElementById("txtAddress");
        var txtCity = document.getElementById("txtCity");
        var txtCountry = document.getElementById("txtCountry");
        var dvAddCust = document.getElementById("dvAddCust");
        
        var newRow = grid.RootTable.NewRow(); // initiates new WebGridRow object with cells collection.
        var cells = newRow.GetCells(); // get the cells to be assigned with new customer information
        cells.GetNamedItem("CustomerID").SetText(txtCustomerID.value, true);
        cells.GetNamedItem("ContactName").SetText(txtContactName.value, true);
        cells.GetNamedItem("ContactName").SetText(txtContactName.value, true);
        cells.GetNamedItem("ContactTitle").SetText(txtContactTitle.value, true);
        cells.GetNamedItem("CompanyName").SetText(txtCompanyName.value, true);
        cells.GetNamedItem("Address").SetText(txtAddress.value, true);
        cells.GetNamedItem("City").SetText(txtCity.value, true);
        cells.GetNamedItem("Country").SetText(txtCountry.value, true);
        
        newRow.Update(); // perform add if the WebGridRow object is new row, otherwise it will perform update
        
        dvAddCust.style.display = "none";
}

Based on the above codes, in order to add a new record into the grid, developers need to obtain the new WebGridRow object by invoking NewRow method from the WebGridTable object, such as this : grid.RootTable.NewRow().
In order to obtain the WebGridCell collection, simply invoke GetCells method from the WebGridRow object, like this : newRow.GetCells(). The next thing to do is to populate each cells by using SetText method. The first parameter decides the text property of the WebGridCell object and the second parameter decides the value property. When the second parameter is filled with the true value, means that the current value of the WebGridCell object is filled with the same value as the text property.

The last important thing to do is to invoke Update method against the WebGridRow object. If the WebGridRow object is a new row type, then it will perform record addition, otherwise it will perform record modification.

Here are the codes in order to perform some record update process:

JavaScript

Copy Code

function UpdateRow()
{
        var grid = ISGetObject("WebGrid1");
        var row = grid.RootTable.GetRowByKeyValue("SPLIR"); // get WebGridRow object by key value.
        var cells = row.GetCells();
        
        row.Select(); // select this row for focus
        cells.GetNamedItem("ContactTitle").SetText("Owner", true); // change contact title cell to Owner
        
        row.Update(); // perform Update
        alert("ContactTitle of this row has been changed to 'Owner'");
}

In order to modify a single cell of the grid, basically developers need to perform the same procedures as the record addition.
First of all, obtain the WebGridRow object where the cell resides. In the above codes, we are using GetRowByKeyValue method against the RootTable object (WebGridTable).
The next thing to do is to obtain the WebGridCell collection object from the WebGridRow object. After the WebGridCell collection object is obtained, developers can simply search for particular cell by using GetNamedItem method. SetText method is utilized in order to configure the cell's text and value property. Finally, the Update method is invoked.

Here are the codes to perform record deletion.

JavaScript

Copy Code

function DeleteRow()
{
        var grid = ISGetObject("WebGrid1");
        var row = grid.RootTable.GetRowByKeyValue("VINET"); // get WebGridRow object by key value.
        
        row.Select(); // select this row for focus
        alert("Click OK to delete this row.");
        row.Delete(); // delete this row
        alert("Customer 'VINET' has been deleted!");
}

It is very simple to perform record deletion in WebGrid. Simply obtain the WebGridRow object and then invoke the Delete method against the WebGridRow object.

Intersoft WebGrid Documentation
Walkthrough: Modifying WebGrid records externally
See Also Send comments on this topic.

Prerequisites

Step-By-Step Instructions

See Also