Implementing WebDataGrid Client Side Search

The WebDataGrid features an extensive client side object model that makes it easy to work with the grid’s data in the browser. This article shows you how to implement a text-based search of the grid’s contents.

The below screen shot gives you an idea of what is implemented in this article:

You can search the grid by entering some text in the box and clicking the Search button. Text matching the search query is highlighted and the total number of matching records is reported in a label below the grid.

The ASPX Markup

Begin by adding the following markup in between the form tags on an ASPX page:

<asp:ScriptManager ID="sm" runat="server" />
<ig:WebDataGrid ID="wdg" DataSourceID="ods" runat="server" />
<input type="text" id="searchText" />
<input type="button" value="Search" onclick="search_Click()" />
<span>There are <span id="total">0</span> records that match your search.</span>
<asp:ObjectDataSource
    ID="ods" 
    SelectMethod="GetBooks" 
    TypeName="BookRepository"
    runat="server" />

The markup here is fairly basic. The ScriptManager is required by the WebDataGrid. The WebDataGrid’s markup is kept at a minimum for the purposes of this demo. The next two items are a few input controls that allow the user to enter a search query and then a button to initiate the search. Next, there is a series of nested SPANs that are responsible for reporting back the search result record count. Finally the ObjectDataSource exists to talk to a class responsible for providing the grid with its data.

The JavaScript

The real work for this solution is obviously in the JavaScript. The following approach will access each cell of the grid and look for the search-query text. If a match is found, then the background color is changed and the unique ID of the record is set aside into an array.

The following code sets up some global variables and implements the search_Click function:

The first line declares a variable that will contain the array of selected IDs. This array is maintained in the addSelectedID function, which is called by search_Click. The second variable is a holder for the hexadecimal value for the selected background color.

The body of the search_Click function begins by accessing the grid in JavaScript. Notice that the script uses a server expression to ask the grid for its ClientID – this ensures the JavaScript is fed the same ID as is generated in the HTML. The next two lines extract the search query from the text box and set aside instances of row objects into a local variable.

Next the selectedIDs variable is initialized as a new array. This is done here to clear out any old values in the event this process has run in the past – at the end of the procedure leaving the array only with the latest values of selectedIDs.

There are two loops involved in searching through the grid. First the script must access each row and then each cell in the current row. After finding the current cell, the script will clear out the value for the color variable. This is assigned to the backgroundColor of each cell as it is accessed. The variable will only receive a value if a successful search is encountered. This approach ensures only color selected cells receive coloring and clears the color for any previously selected cells that no longer match the search query.

The next set of logic is only run if the user has entered a search query. If the search query has a value then the cells value is extracted to the value variable. When attempting a comparison against the cell value and the search query, the cell value must be casted to a string and converted to lower case as seen in this line:

value = String(cell.get_value()).toLowerCase();

Now that the cell’s value is known the indexOf function is run to find out if the given text exists anywhere in the cell’s value. (Notice how the search query is converted to lower case before the comparison.)

If there is a match then the color variable is set equal to the selectedBackgroundColor. The next a call to the addSelectedID function is made. This function requires the unique ID of row, which is produced by interrogating the row for the column where the primary key lives.

The last operation in this function is to locate SPAN that holds the total number of matching rows and feed it the number of selectedIDs.

The last part of the script is the addSelectedID function:

function addSelectedID(id)
{
    var found = false;
    
    for (var i = 0; i < selectedIDs.length; i++)
    {
        if (selectedIDs[i] == id)
        {
            found = true;
            break;
        }
    }

    if (!found)
    {
        selectedIDs[selectedIDs.length] = id;
    }
}

The job of this function is to take a look at the selectedIDs array and see if the ID passed in already exists in the array. If there is no match found then the ID is added to the array.

In Context

To see all the code in context, the following listing is the script and markup for the entire page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
    var selectedIDs;
    var selectedBgColor = "#eee";

    function search_Click()
    {
        var row, cell, value, color;
        
        var grid        = $find("<%= wdg.ClientID %>");
        var searchText  = $get("searchText").value;
        var rows        = grid.get_rows();

        selectedIDs = new Array();
        
        for (var i = 0; i < rows.get_length(); i++)
        {
            row = rows.get_row(i);
            
            for (var j = 0; j < row.get_cellCount(); j++)
            {
                cell = row.get_cell(j);
                
                color = "";
                
                if (searchText.length > 0)
                {
                    value = String(cell.get_value()).toLowerCase();
                    
                    if (value.indexOf(searchText.toLowerCase()) != -1)
                    {
                        color = selectedBgColor;
                        addSelectedID(row.get_cell(0).get_value());
                    }
                }
                
                cell.get_element().style.backgroundColor = color;
            }
        }

        $get("total").innerHTML = selectedIDs.length;
    }

    function addSelectedID(id)
    {
        var found = false;
        
        for (var i = 0; i < selectedIDs.length; i++)
        {
            if (selectedIDs[i] == id)
            {
                found = true;
                break;
            }
        }

        if (!found)
        {
            selectedIDs[selectedIDs.length] = id;
        }
    }
    </script>
</head>
<body>
<form id="form1" runat="server">
    <asp:ScriptManager ID="sm" runat="server" />
    <ig:WebDataGrid ID="wdg" DataSourceID="ods" runat="server" />
    <input type="text" id="searchText" />
    <input type="button" value="Search" onclick="search_Click()" />
    <span>There are <span id="total">0</span> records that match your search.</span>
    <asp:ObjectDataSource
        ID="ods" 
        SelectMethod="GetBooks" 
        TypeName="BookRepository"
        runat="server" />
</form>
</body>
</html>