Retrieve Key Value and Cell Text of WebGrid SelectedRow Client-side Event

Applies to: WebGrid 7.0
| Tags: WebGrid, Client-Side, SelectedRow, Key Value, Cell Text
Published on: July 14, 2011 | Last Modified on August 4, 2011
Rate this topic:
     

Summary

This article shows you how to retrieve the key value and cell text of the selected row. This article also describes how to implement those functions under the Client-side event name OnRowSelect.

Content

WebGrid provides a set of comprehensive client side API to let developers extend the Grid for their own use. The client-side API of WebGrid has been completely redesigned and rewritten to more faithfully adhere to OOP standards. An important part of this process has been to create a consistent, unified API model for both client and server development. This model, now defined as standard in the WebUI Framework, reduces your development time by presenting a consistent set of methods and properties across all controls and tasks. An added benefit is that the new client API performs up to 80% faster than the previous version.

In this article, you will learn how to perform the following tasks:

  • Implementing and adding code inside the OnRowSelect Client-side event to retrieve the key value and the cell text from the selected row

Implementing and adding code inside the OnRowSelect Client-side event to retrieve the key value and the cell text from the selected row

First, you need to assign the OnRowSelect event. It can be found under LayoutSettings, then find the ClientSideEvents property and choose the OnRowSelect event. The OnRowSelect event specifies the client side (JavaScript) function that will be invoked when a row is selected. The following code will be automatically added inside your file:

<script type="text/javascript">
	<!--
    function WebGrid1_OnRowSelect(controlId, tblName, rowIndex, rowEl) {
        var WebGrid1 = ISGetObject(controlId);

        return true;
    }
	-->
</script>

After the OnRowSelect has been assigned, add the following codes to retrieve the key value and the cell text from the selected row as below:

function WebGrid1_OnRowSelect(controlId, tblName, rowIndex, rowEl) {
    var WebGrid1 = ISGetObject(controlId);

    // get the selected object.
    var obj = WebGrid1.GetSelectedObject();

    // get the row object.
    var row = obj.ToRowObject();

    //get the key value of selected row.
    var key = row.KeyValue

    //get the text of the selected row based on CategoryName and Description.
    var cellID = row.GetCells().GetNamedItem("CategoryName").Text;
    var cellType = row.GetCells().GetNamedItem("Description").Text;

    //show the result through alert box.
    alert(key);
    alert(cellID);
    alert(cellType);
    return true;
}

References

For more information about WebGrid and its features, see WebGrid Overview.

For more information about the Client-side event in WebGrid, see Client-side Overview.

For additional How-to topics, Videos, Knowledge Base and other learning resources available for WebGrid, see WebGrid Support.

Note: This is a "QUICK PUBLISH" article created directly from within the Intersoft support organization. The information contained herein is provided as-is in response to emerging issues. As a result of the speed in making it available, the materials may include typographical errors and may be revised at any time without notice. See Terms of Use for other considerations.