The entire ColumnSet ClientSide script has been completely reworked to provide object oriented API instead of using Global Functions like in previous versions. With this new client side object models, developers can now easily extend our WebGrid component to deliver greater values by adding more user interactive features as well as achieving complex business logic scenarios.

Here are some samples code using WebGrid.NET client side API :

Obtain a Cell Element in a ColumnSet.

Accessing

JavaScript

Copy Code

function ObtainCell()
{       
    var grid = ISGetObject("WebGrid1");                     
    if (grid.GetSelectedObject() == null)
        {
                alert("Please select a row.");
                return;
        }
        var row = grid.GetSelectedObject().GetRowObject();                              
        if (row.Type == "Record")
        {
                var cell = row.GetCell("City");
                var cellElement = cell.GetElement();                                    
                cellElement.style.color = "red";
                alert("The City cell of current selected row's ForeColor is now Red.");
        }
        else
                alert("Please select a Record Row");
}

Obtain Row Element in ColumnSet

JavaScript

Copy Code

function ObtainRow()
    {       
        var grid = ISGetObject("WebGrid1");
        
        if (grid.GetSelectedObject() == null)
        {
                alert("Please select a row.");
                return;
        }
        
        var row = grid.GetSelectedObject().GetRowObject();
        var rowElement = row.GetElement(); 
        
        rowElement.style.height = "30px";
        alert("Current selected row's Height is now 30px");
    }

Obtain a Cell Text in ColumnSet

JavaScript

Copy Code

function GetCellText()
        {       
            var grid = ISGetObject("WebGrid1");
            var curSelObj = grid.GetSelectedObject(); // get selected object
            if (curSelObj == null)
            {
                    alert("No row selected. Please select a row");
            }
            else
            {
                    var row = curSelObj.GetRowObject(); // get the WebGridRow object
                    if (row.Type == "GroupHeader")
                    {
                            alert("Currently selected row is a Group Row. There is no cell information.");
                    }
                    else if (row.Type == "Record")
                    {
                            var cells = row.GetCells(); // obtain WebGridCellCollection of the specified row.
                            var addressCell = cells.GetNamedItem("Address"); // get the address' WebGridCell object by name.
                            
                            alert("Current selected row's Address cell has this text : " + addressCell.Text + "\nThe cell's value is : " + (addressCell.Value == null ? "No Value" : addressCell.Value));
                    }
            }
        }

Obtain Table Header Element in ColumnSet

JavaScript

Copy Code

function ObtainHeader()
{       
    var grid = ISGetObject("WebGrid1");
    var tableHeader = grid.RootTable.GetElement(WG40.COLHEADER, WG40.HTMLTABLE); // use GetElement to obtain any elements by specifying valid values in the parameters.
    
    // perform manipulation to the header's table, for example, add border style to it.
    tableHeader.style.border = "black 1px solid";
    alert("TableHeader's border style is now : black 1px solid");
}

Obtain Body Element in ColumnSet

JavaScript

Copy Code

function ObtainBody()
{       
    var grid = ISGetObject("WebGrid1");
    var dvBody = grid.RootTable.GetElement(WG40.BODY, WG40.HTMLDIV); // use GetElement to obtain any elements by specifying valid values in the parameters.
    
    dvBody.style.border = "red 1px solid";
    alert("DivBody's border style is now : red 1px solid");
}

Obtain Column Caption in ColumnSet

JavaScript

Copy Code

function GetColumnCaption()
{       
    var grid = ISGetObject("WebGrid1");
    var addressColumn = grid.RootTable.Columns.GetNamedItem("Address"); // demonstrating the way to access object hierarchy the same way as in server side.
    
    alert("Address column's Caption is : " + addressColumn.Caption + "\nWidth: " + addressColumn.Width + "\nVisible: " + addressColumn.Visible);
}

Resize Column Width in ColumnSet

JavaScript

Copy Code

function ResizeColumn()
{
    var grid = ISGetObject("WebGrid1");
    var cityColumn = grid.RootTable.Columns.GetNamedItem("City");
    
    cityColumn.Resize(100); // resize to 100 px
    alert("City column's width is now: " + cityColumn.Width);
}

Get the first editable cell in the column set.

JavaScript

Copy Code

function getfirsteditable()
   {
        //get grid object
        var grid = IsGetObject("WebGrid1");
        
        //get the row element
        var rowElm = grid.GetSelectedObject().GetRowObject().GetElement();
        
        //get the first editable cell of the columnset
        var crow = wgGetCSFirstEditableCell(rowElm); 
   }

Get the column set position by row layout.

JavaScript

Copy Code

function getcsposbyrl()
{
    //get the grid object.
    var grid = ISGetObject("WebGrid1");
    
    //get row element.
    var rowElm = grid.GetSelectedObject().GetRowObject().GetElement();
    
    //get row layout by using column name, in this case we use "city".
    var cityrl = grid.RootTable.GetRowLayoutByColName("City"); 
    
    //get ColumnSet position by using row layout.
    var pos = wgGetCSPosByRL(cityrl);
}

Get the lowest column of the column set rows.

JavaScript

Copy Code

function getcslowestcs()
{
    //get the grid object.
    var grid = ISGetObject("WebGrid1");
    
    //get row element.
    var rowElm = grid.GetSelectedObject().GetRowObject().GetElement();  
    wgGetLowestColumnSetRow(row.GetElement());
}

Intersoft WebGrid Documentation
Accessing ColumnSet in client side
See Also Send comments on this topic.

See Also