Intersoft WebGrid Documentation
How-to: Use Basic Client APIs
See Also Send comments on this topic.

Glossary Item Box

WebGrid provides a set of comprehensive client side API to let developers extend the Grid for their own use.

In this topic, you will learn how to use several basic Client-Side APIs.

To get WebGrid object 

Use ISGetObject function to get the client object reference of any Intersoft's components, instead of using different function for each.

This topic will show you how to get WebGrid's object using ISGetObject.

  1. Drag WebGrid instance into the WebForm.
  2. Add a Client-Side function.
  3. JavaScript Copy Code 
    var grid = ISGetObject("WebGrid1");

 

To get WebGrid selected row

Use GetSelectedObject function to get selected row in WebGrid via client side.

This topic will show you how to get WebGrid's selected row object using GetSelectedRow function. 

  1. Drag WebGrid instance into the WebForm.
  2. Add a Client-Side function.
    JavaScript Copy ImageCopy Code 
    var grid = ISGetObject("WebGrid1");                
var selectedObject = grid.GetSelectedObject().GetRowObject();

  3. Select a row.

To get WebGrid's row by KeyValue

Use GetRowByKeyValue function to get WebGrid's row by KeyValue in client side.

This topic will show you how to get WebGrid's row using GetRowByKeyValue.

  1. Drag WebGrid instance into the WebForm.
  2. Add a Client-Side function.
  3. JavaScript Copy Code 
    function RowObject()
{
   var grid = ISGetObject("WebGrid1");
   var row = grid.RootTable.GetRowByKeyValue("VINET"); // get WebGridRow object by key value.
}

 

To set WebGrid's cell text

When you want to set a text into a cell in WebGrid, you can use SetText function in client side.

This topic will show you how to set WebGrid's cell text.

  1. Drag WebGrid instance into the WebForm.
  2. Add a Client-Side function.
  3. JavaScript Copy Code 
    function SetText()
{
   var grid = ISGetObject("WebGrid1");
   var row = grid.RootTable.GetRowByKeyValue("SPLIR"); // get WebGridRow object by key value.
   var cells = row.GetCells();
   
   row.Select();
   cells.GetNamedItem("ContactTitle").SetText("Owner", true); // change contact title cell to Owner.
}

 

To call SendCustomRequest() from client side 

Custom OnTheFlyPostback from client side to server side can be called using a function called SendCustomRequest.

This topic will show you how to set SendCustomRequest.

  1. Drag WebGrid instance into the WebForm.
  2. Add a Client-Side function .
  3. JavaScript Copy ImageCopy Code 
    function Grid1_ButtonClick()
{
   var grid = ISGetObject("WebGrid1");
   grid.SendCustomRequest();
   return true;
}

 

To show/hide WebGrid

When you want to set WebGrid visible/invisible, you can use Show or Hide functions in client side.

This topic will show you how to show or hide WebGrid.

  1. Drag WebGrid instance into the WebForm.
  2. Add a Client-Side function on your code.
  3. JavaScript Copy Code 
    function showGrid()
{
   var grid = ISGetObject('WebGrid1');
   grid.Show();
}
                       
function hideGrid()
{
   var grid = ISGetObject('WebGrid1');
   grid.Hide();   
}

 

To select WebGrid's row from Client-Side

Use Select function to select a WebGrid row in client side.

This topic will show you how to select WebGrid's row.

  1. Drag WebGrid instance into the WebForm.
  2. Add a Client-Side function.
  3. JavaScript Copy ImageCopy Code 
    function SelectRow()
{
   var grid = ISGetObject("WebGrid1");
   var row = grid.RootTable.GetRowByKeyValue("VINET"); // get WebGridRow object by key value.
   row.Select(); // select this row for focus
}

 

To get value from hidden column using HiddenDataMember 

Use client side function to get value from hidden column on WebGrid.

This topic will show you how to get the value.

  1. Drag WebGrid instance into the WebForm.
  2. Set HiddenDataMember property to one of column you want to hide, for example : City.
  3. Add a Client-Side function.
    JavaScript Copy ImageCopy Code 
    function getdata()
    {

       var grid = ISGetObject("WebGrid1");
       var rowObj = grid.GetSelectedObject().GetRowObject();
       var cells = rowObj.GetCells();
       var customer = cells.GetNamedItem("CustomerID");
       var city = customer.GetElement().attributes["City"].value;
       alert(city);
    }

  4. Select a row.

See Also

©2012 Intersoft Solutions Corp. All Rights Reserved.