With multitude of filter options and instant data filtering capability, WebGrid delivers relevant search results more quickly than ever before. WebGrid includes intuitive filtering interfaces such as automatic filter suggestion, filter status indicator, predefined filter types and more, allowing users to work with data more efficiently. With complete range of client APIs and client-side events, you have greater control over WebGrid processes, and can perform custom operations programmatically.

This article focuses on how to filter the WebGrid’s column programmatically by using HTML Textbox and Button.

In this article, you will perform the following tasks:

• Add a WebGrid instance and prepare data
• Add the HTML control, Textbox and Button
• Implement the OnClick Method

Add a WebGrid instance and prepare data

Add the WebGrid’s Instance and bind the WebGrid to a DataSource.

Add the HTML control, Textbox and Button

Add a text box, name it filterRow, and add a button with the OnClick Client-side event.

<form id="form1" runat="server">
    <div>
        …
        <input id="filterTextBox" type="text" />
        <input id="Button1" type="button" value="button" onclick="return Button1_onclick()" />
    </div>
</form>

Implement the OnClick Method

Set the button OnClick method like this:

function Button1_onclick() {
    var grid = ISGetObject("WebGrid1");

    // get the value of textbox
    var filter = document.getElementById("filterTextBox").value;

    // get the filter row
    var filterRow = grid.RootTable.GetFilterRow();

    // traverse to text node
    // Put the filtered column name inside the GetNamedItem method
    grid.RootTable.ToRowObject(filterRow).GetCells().GetNamedItem("ColumnName") = filter;

    // refresh the grid
    grid.Refresh();

    return true;
}

References

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

For more information about Filtering in WebGrid, see Filtering 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.