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

Thread is closed for posting
9 posts, 0 answers
  1. 63F75A2C-1F16-4AED-AFE8-B1BBD57646AD
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD avatar
    1572 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.
  3. 7BC60C93-D82D-4122-A22E-5523C998F8C4
    7BC60C93-D82D-4122-A22E-5523C998F8C4 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?
  5. 4513861F-C564-42D2-BC9F-5FAED19E993E
    4513861F-C564-42D2-BC9F-5FAED19E993E avatar
    4090 posts
    Member since:
    Apr 2022

    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.
  7. 7BC60C93-D82D-4122-A22E-5523C998F8C4
    7BC60C93-D82D-4122-A22E-5523C998F8C4 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.
  9. 4513861F-C564-42D2-BC9F-5FAED19E993E
    4513861F-C564-42D2-BC9F-5FAED19E993E avatar
    4090 posts
    Member since:
    Apr 2022

    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.
  11. 7BC60C93-D82D-4122-A22E-5523C998F8C4
    7BC60C93-D82D-4122-A22E-5523C998F8C4 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.



  13. 7BC60C93-D82D-4122-A22E-5523C998F8C4
    7BC60C93-D82D-4122-A22E-5523C998F8C4 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.
  15. E4EF9816-9029-4D0C-B359-CA1DBF559AA2
    E4EF9816-9029-4D0C-B359-CA1DBF559AA2 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.
  17. 4513861F-C564-42D2-BC9F-5FAED19E993E
    4513861F-C564-42D2-BC9F-5FAED19E993E avatar
    4090 posts
    Member since:
    Apr 2022

    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

This Code Library is part of the product documentation and subject to the respective product license agreement.