• North American Sales: 1-800-231-8588
  • Global Contacts
  • My Account
Infragistics Infragistics
Menu
  • North American Sales: 1-800-321-8588
  • My Account
    • Sign In/Register
  • Design & DevelopmentDesign & Develop
    • Best Value
      Infragistics Ultimate The complete toolkit for building high performing web, mobile and desktop apps.
      Indigo.Design Use a unified platform for visual design, UX prototyping, code generation and application development.
    • Web
      Ignite UI for Angular Ignite UI for JavaScript Ignite UI for React Ultimate UI for ASP.NET Indigo.Design
    • Desktop
      Ultimate UI for Windows Forms Ultimate UI for WPF
      Prototyping
      Indigo.Design
    • Mobile
      Ultimate UI for Xamarin Ultimate UI for iOS Ultimate UI for Android
    • Automated Testing Tools
      Test Automation for Micro Focus UFT: Windows Forms Test Automation for Micro Focus UFT: WPF Test Automation for IBM RFT: Windows Forms
  • UX
    • Indigo.Design Desktop Collaborative prototyping and remote usability testing for UX & usability professionals
    • Indigo.Design A Unified Platform for Visual Design, UX Prototyping, Code Generation, and App Development
  • Business Intelligence
    • Reveal Embedded Accelerate your time to market with powerful, beautiful dashboards into your apps
    • Reveal App Empower everyone in your organization to use data to make smarter business decisions
  • Team Productivity
  • Learn & Support Support
    • Help & Support Documents
    • Blogs
    • Forums
    • Product Ideas
    • Reference Applications
    • Customer Stories
    • Webinars
    • eBook & Whitepapers
    • Events
  • Free Trials
  • Pricing
    • Product Pricing / Buy Online
    • Renew Existing License
    • Contact Us
ASP.NET
  • Product Platforms
  • More
ASP.NET
ASP.NET Implementing WebDataGrid Client Side Search
  • Blog
  • Files
  • Wiki
  • Mentions
  • Tags
  • More
  • Cancel
  • New
ASP.NET requires membership for participation - click to join
  • ASP.NET
  • Accessing Extra Data in Data Bound Controls
  • ASP.NET Performance - A Place To Start
  • +Building an Ajax Master/Detail Page with the WebDataGrid
  • Building WebParts with NetAdvantage ASP.NET Controls
  • Data Binding the WebDataGrid to Common Data Sources
  • Getting Started with NetAdvantage ASP.NET
  • HTML5 Mode and Other Goodness in the WebRating Control
  • Implementing WebDataGrid Client Side Search
  • Introduction to the Infragistics Web Drag and Drop Framework
  • Learn to Build a WebDataGrid Custom Pager
  • Understanding Script Combining
  • Using ADO.NET to Perform CRUD Operations with the WebDataGrid
  • WebDataGrid 101: Fill the Grid with Data and Change the Look and Feel
  • +WebDataGrid : Import data from Excel & Export to Excel, PDF or XPS
  • WebDataGrid Client-Side CRUD
  • WebDataGrid DataViewState vs ViewState
  • WebDataGrid Validation

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:

Client-side search against WebDataGrid contents.

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:

view plaincopy to clipboardprint
  1. <asp:ScriptManager ID="sm" runat="server" />  
  2. <ig:WebDataGrid ID="wdg" DataSourceID="ods" runat="server" />  
  3. <input type="text" id="searchText" />  
  4. <input type="button" value="Search" onclick="search_Click()" />  
  5. <span>There are <span id="total">0</span> records that match your search.</span>  
  6. <asp:ObjectDataSource  
  7.     ID="ods"    
  8.     SelectMethod="GetBooks"    
  9.     TypeName="BookRepository"  
  10.     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" />

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.

Note: As you begin to work with this solution you may find ways to extend the behavior. Since you have an array of unique IDs you may choose to make an Ajax call back to the server to do some processing or perhaps interact with the grid’s selection behavior to extend the user experience of your page.

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:

view plaincopy to clipboardprint
  1. value = String(cell.get_value()).toLowerCase();  
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.)

Note: You may choose to implement the search as case sensitive, but while testing this solution it seemed more natural to implement the search as case insensitive.

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:

view plaincopy to clipboardprint
  1. function addSelectedID(id)   
  2. {   
  3.     var found = false;   
  4.        
  5.     for (var i = 0; i < selectedIDs.length; i++)   
  6.     {   
  7.         if (selectedIDs[i] == id)   
  8.         {   
  9.             found = true;   
  10.             break;   
  11.         }   
  12.     }   
  13.   
  14.     if (!found)   
  15.     {   
  16.         selectedIDs[selectedIDs.length] = id;   
  17.     }   
  18. }  
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:

view plaincopy to clipboardprint
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2.   
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5.     <title></title>  
  6.     <script type="text/javascript">  
  7.     var selectedIDs;   
  8.     var selectedBgColor = "#eee";   
  9.   
  10.     function search_Click()   
  11.     {   
  12.         var row, cell, value, color;   
  13.            
  14.         var grid        = $find("<%= wdg.ClientID %>");   
  15.         var searchText  = $get("searchText").value;   
  16.         var rows        = grid.get_rows();   
  17.   
  18.         selectedIDs = new Array();   
  19.            
  20.         for (var i = 0; i < rows.get_length(); i++)   
  21.         {   
  22.             row = rows.get_row(i);   
  23.                
  24.             for (var j = 0; j < row.get_cellCount(); j++)   
  25.             {   
  26.                 cell = row.get_cell(j);   
  27.                    
  28.                 color = "";   
  29.                    
  30.                 if (searchText.length > 0)   
  31.                 {   
  32.                     value = String(cell.get_value()).toLowerCase();   
  33.                        
  34.                     if (value.indexOf(searchText.toLowerCase()) != -1)   
  35.                     {   
  36.                         color = selectedBgColor;   
  37.                         addSelectedID(row.get_cell(0).get_value());   
  38.                     }   
  39.                 }   
  40.                    
  41.                 cell.get_element().style.backgroundColor = color;   
  42.             }   
  43.         }   
  44.   
  45.         $get("total").innerHTML = selectedIDs.length;   
  46.     }   
  47.   
  48.     function addSelectedID(id)   
  49.     {   
  50.         var found = false;   
  51.            
  52.         for (var i = 0; i < selectedIDs.length; i++)   
  53.         {   
  54.             if (selectedIDs[i] == id)   
  55.             {   
  56.                 found = true;   
  57.                 break;   
  58.             }   
  59.         }   
  60.   
  61.         if (!found)   
  62.         {   
  63.             selectedIDs[selectedIDs.length] = id;   
  64.         }   
  65.     }   
  66.     </script>  
  67. </head>  
  68. <body>  
  69. <form id="form1" runat="server">  
  70.     <asp:ScriptManager ID="sm" runat="server" />  
  71.     <ig:WebDataGrid ID="wdg" DataSourceID="ods" runat="server" />  
  72.     <input type="text" id="searchText" />  
  73.     <input type="button" value="Search" onclick="search_Click()" />  
  74.     <span>There are <span id="total">0</span> records that match your search.</span>  
  75.     <asp:ObjectDataSource  
  76.         ID="ods"    
  77.         SelectMethod="GetBooks"    
  78.         TypeName="BookRepository"  
  79.         runat="server" />  
  80. </form>  
  81. </body>  
  82. </html>  
<!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>
  • WebDataGrid
  • Share
  • History
  • More
  • Cancel
Related
Recommended