DataGrid: iTunes-like incremental search

Discussion in 'ASP .Net' started by Luis Ferrao, Jan 10, 2005.

  1. Luis Ferrao

    Luis Ferrao Guest

    Comming from Windows Forms development, I never had problems with this
    issue before.

    What i'm trying to achieve is an iTunes like incremental search. For
    those who never used iTunes, it's basically a text field with a key
    stroke event that filters the data grid as the users types in a string.
    The more text in the field, the fewer fields desplayed.

    The problem is that this is obviously a client side behaviour.

    In windows forms, this is easily achieved with this kind of code:

    private void SearchField_TextChanged(object sender, EventsArgs e)
    {
    string filterExpression = "Column1 LIKE '*'" + ((TextBox)
    sender).Text + "'*' OR... (and so on for the rest of the columns)"
    MainView.RowFilter = filterExpression;
    }

    In asp.net though, i fear the solution will not be as straightforward.
    I would apreciate if someone had some input on how to achieve this
    either by client-side script, third-party controls, etc...

    Any kind of help really.

    Best regards,

    Luis Ferrao

    *** Sent via Developersdex http://www.developersdex.com ***
    Don't just participate in USENET...get rewarded for it!
    Luis Ferrao, Jan 10, 2005
    #1
    1. Advertising

  2. Luis,

    On client side you don't have high-level properties like RowFilter, but you
    can still make a loop that will go through the DHTML object representing the
    grid, which is a table, and set the rows visibility properties according to
    the text entered. You just need to find a right textbox event to handle.
    onchange event fires only when you leave the textbox, not when you enter
    another character. May be onkeypress?

    Eliyahu

    "Luis Ferrao" <> wrote in message
    news:...
    > Comming from Windows Forms development, I never had problems with this
    > issue before.
    >
    > What i'm trying to achieve is an iTunes like incremental search. For
    > those who never used iTunes, it's basically a text field with a key
    > stroke event that filters the data grid as the users types in a string.
    > The more text in the field, the fewer fields desplayed.
    >
    > The problem is that this is obviously a client side behaviour.
    >
    > In windows forms, this is easily achieved with this kind of code:
    >
    > private void SearchField_TextChanged(object sender, EventsArgs e)
    > {
    > string filterExpression = "Column1 LIKE '*'" + ((TextBox)
    > sender).Text + "'*' OR... (and so on for the rest of the columns)"
    > MainView.RowFilter = filterExpression;
    > }
    >
    > In asp.net though, i fear the solution will not be as straightforward.
    > I would apreciate if someone had some input on how to achieve this
    > either by client-side script, third-party controls, etc...
    >
    > Any kind of help really.
    >
    > Best regards,
    >
    > Luis Ferrao
    >
    > *** Sent via Developersdex http://www.developersdex.com ***
    > Don't just participate in USENET...get rewarded for it!
    Eliyahu Goldin, Jan 10, 2005
    #2
    1. Advertising

  3. Luis Ferrao

    Luis Ferrao Guest

    Isn't it possible to incorporate this behaviour in a user control so
    devs don't have to implement this solution each time they want a
    datagrid to behave this way?

    Luis Ferrao

    *** Sent via Developersdex http://www.developersdex.com ***
    Don't just participate in USENET...get rewarded for it!
    Luis Ferrao, Jan 10, 2005
    #3
  4. Luis Ferrao

    Jeff @ Dart Guest

    Hello Luis,

    Our new product (LiveControls for ASP.NET) is perfect for this type of
    implementation. This is a suite of 20+ server controls that communicate
    with the server using remote scripting (super quick communication with
    web server, no browser refresh).

    For your implementation, you could use a LiveTextBox and a LiveListBox.
    Wire up the server-side KeyPress event of the LiveTextBox. In this
    event, perform your SQL query with the value of LiveTextBox.Text. Bind
    the recordset to the LiveListBox. The result, with each keystroke the
    listbox contains the applicable search results...without refreshing the
    page. This is cross browser too (tested in IE5+, Moz 1.3+ , Opera,
    Konqueror, Galeon, etc).

    Check out our tutorial app at
    http://www.dart.com/livetutorial/display.aspx, or go to
    http://www.dart.com/powerweb/livecontrols.asp to download a free trial.
    Jeff @ Dart, Jan 10, 2005
    #4
  5. Luis Ferrao

    Luis Ferrao Guest

    Ok, this is what i came up with. It's inspired on someone else's code
    but modified to run faster.

    If you're wondering why a "setInterval" instead of a link to a "onKeyUp"
    event, it's because it's still kinda slow for big (1000+ rows) table
    which makes InternetExplorer freeze during keystrokes... very anoying.

    It must be placed after the datagrid declaration since it refers to it.

    --> If anyone could see a way to make it faster, I would apreciate the
    help. It can still be a little laggy on huge tables.

    Luis Ferrao

    PS: Jeff, i'll have a look but it sounds nice and encapsulated the way
    you put it

    *******************************************
    ***************** CODE ********************
    *******************************************
    var filter = "";
    var tableId = "DataGrid";
    var rowHeight = 16;
    var table = document.getElementById(tableId);
    var rows = table.getElementsByTagName('tr');
    // the following must be called at the end of declarations
    var listnerInterval = setInterval("applyFilter(filter)", 1000);

    function applyFilter(pattern)
    {
    counter = 0 // visible rows counter

    // iterate through and search the array (<tr>'s)
    outer_loop:
    for (i=0; i < rows.length; i++)
    {
    if (pattern == "")
    {
    rows.className='visible'
    counter++;
    continue outer_loop
    }
    td = rows.getElementsByTagName('td')

    // iterate through <td>'s
    for (j = 0; j < td.length; j++)
    {
    nodeVal = td[j].firstChild.nodeValue; // gets us the #text value
    of the first td tag
    try {
    if (nodeVal.toLowerCase().indexOf(pattern.toLowerCase()) != -1
    || pattern == '')
    {
    // match found for this row (or pattern is ''), so set as
    visible
    // rows.setAttribute('class', 'visible');
    rows.className='visible'
    // increment visible rows counter but only once per row
    if (j == 0) counter++
    continue outer_loop
    }
    else {
    // match not found for this row, so set as hidden
    //rows.setAttribute('class', 'hidden');
    rows.className='hidden'
    }
    } catch (ex) {}
    }
    }
    // fix table height at the end of the loop
    table.style.height = (counter * rowHeight) + "px"
    }
    *******************************************
    ***************** EOC *********************
    *******************************************

    Note: The search field onkeyup event must modify the filter var
    obviously. But at least this way the app doesn't have to go through the
    whole function between each keystroke.

    *** Sent via Developersdex http://www.developersdex.com ***
    Don't just participate in USENET...get rewarded for it!
    Luis Ferrao, Jan 10, 2005
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Mark Goldin

    Incremental search

    Mark Goldin, Jul 26, 2004, in forum: ASP .Net
    Replies:
    6
    Views:
    2,919
    rxiong
    Aug 25, 2010
  2. Replies:
    1
    Views:
    910
    Hywel Jenkins
    Apr 17, 2006
  3. Bill  Mill
    Replies:
    1
    Views:
    549
    Diez B. Roggisch
    Aug 17, 2006
  4. Bob Greschke

    Tkinter Text widget incremental search

    Bob Greschke, Sep 28, 2006, in forum: Python
    Replies:
    0
    Views:
    435
    Bob Greschke
    Sep 28, 2006
  5. Marc Miller

    incremental search/dropdownlist

    Marc Miller, Jan 12, 2004, in forum: ASP .Net Web Controls
    Replies:
    4
    Views:
    375
    Jeffrey Tan[MSFT]
    Jan 16, 2004
Loading...

Share This Page