Quick Search - filtering rows depending on entered text instantly when paging is disabled

9 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1679 posts
    Member since:
    Oct 2004

    Posted 26 Jul 2013 Link to this post

    Requirements

    .NET version

     3.5+

    Visual Studio

     2010+

    programming language

     JavaScript

    browser support

    all browsers supported by RadControls


    PROJECT DESCRIPTION

    When RadGrid contains only one single page, all of its data items are loaded and rendered on the web page. We can make avail of this and implement client-side search RadTextBox which will instantly filter the grid items over a condition without posting back to the server.
  2. Bob
    Bob avatar
    4 posts
    Member since:
    Aug 2012

    Posted 05 Dec 2013 Link to this post

    Is there any way to hide the DetailItemTemplate when filtering the results?
  3. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 10 Dec 2013 Link to this post

    Hello Bob,

    You can slightly modify the javascript function as follows:
    ...
    var item = dataItems[i];
    item.get_element().style.display = elected ? "" : "none";
     $(item.get_element()).next()[0].style.display = elected ? "" : "none";
    if (elected) {
        if (firstCell == null) {
            firstCell = item.get_element().cells[0];
        }
        item.get_element().className = currentItemsCount % 2 == 0 ? "rgRow" : "rgAltRow";
        $(item.get_element()).next()[0].className = currentItemsCount % 2 == 0 ? "rgRow" : "rgAltRow";
    ...

    Hope this helps. Please give it a try and let me know about the result.

    Regards,
    Eyup
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  4. Bob
    Bob avatar
    4 posts
    Member since:
    Aug 2012

    Posted 10 Dec 2013 Link to this post

    Works great!  One other question on top of this though.  Is there any way to search this area as well?

    Thanks.
  5. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 11 Dec 2013 Link to this post

    Hi Bob,

    Try to add the following:
    ...
    for (var i = 0; i < cells.length; i++) {
        values[i] = $(cells[i]).text().toLowerCase();
    }
     values[values.length] =   
     $(args.get_item().get_element()).next().text().trim().toLowerCase();
    savedValues[args.get_itemIndexHierarchical()] = values;

    Looking forward to your reply.

    Regards,
    Eyup
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  6. Bob
    Bob avatar
    4 posts
    Member since:
    Aug 2012

    Posted 11 Dec 2013 Link to this post

    Ok, so now I'm down to just one issue.  The row height.  If I have a limited number of results (less than 10 or so)  I get the attached image.



  7. Bob
    Bob avatar
    4 posts
    Member since:
    Aug 2012

    Posted 11 Dec 2013 Link to this post

    Nevermind, I had my grid set to a height of 1000.  I removed it and it's all good now.

    Thanks for all of your help.
  8. Ashraf Sabry
    Ashraf Sabry avatar
    88 posts
    Member since:
    Jan 2011

    Posted 12 Dec 2013 Link to this post

    I created the client side sorting and searching functionalities on batch mode grids (see the attached screenshot) using List.js (this library is not good, and I plan to replace it) and rangy (for search results highlighting) but hope that one day, we will get these features built in.
  9. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 17 Dec 2013 Link to this post

    Hello Ashraf,

    Thank you for the suggestion. You can log it in our feedback portal so our developers take it under consideration:
    http://feedback.telerik.com/Project/108

    Regards,
    Eyup
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top