Fix ListView filter header on top

4 posts, 0 answers
  1. Gonzalo
    Gonzalo avatar
    17 posts
    Member since:
    Mar 2014

    Posted 21 May 2015 Link to this post

    Hi, I'd like to make the filter search box to stay fixed on the top of the screen while scrolling through a ListView on a mobile app.

    Is that possible?

    This is my code:

     

     <ul data-role="listview" data-bind="source: dataSource" data-filterable="{ field: 'searchField', placeholder: 'Search...', operator: 'contains', ignoreCase: true }"
                data-template="item-template"></ul>

     

    Thanks in advance

  2. Tsvetina
    Admin
    Tsvetina avatar
    1876 posts

    Posted 25 May 2015 Link to this post

    Hello Gonzalo,

    You can do this by implementing a custom filter UI. You can put an input element over the ListView and on change of the input, filter the ListView. You can see this implemented here:
    http://dojo.telerik.com/afosu

    Regards,
    Tsvetina
    Telerik
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
  3. Gonzalo
    Gonzalo avatar
    17 posts
    Member since:
    Mar 2014

    Posted 25 May 2015 in reply to Tsvetina Link to this post

    Hi Tsvetina, that doesn't quite work on my enviroment. I'm using the Android theme which fixes the header at the bottom of the screen.

    Just try your example and select "Android" and you'll see what I mean.

    I need to display the filter at the top of the screen.

     

    Any other suggestion?

  4. Tsvetina
    Admin
    Tsvetina avatar
    1876 posts

    Posted 27 May 2015 Link to this post

    Hi Gonzalo,

    One option that you have is to create two separate views—one for iOS with a search box in the header and one for Android with a search box in the footer. Then, you can use the Device core plugin to check which is the current OS and open the respective view for filtering.

    I have implemented such approach in the attached sample. When you open the drawer and click Search, based on the device platform, a different version of the view is opened. This happens in the click event handler of the link that I have attached during deviceready in app.js:

    $("#searchLink").click(function () {
        var platform = device.platform.toLowerCase();
     
        if (platform === "android") {
            app.navigate("views/search-android.html");
        }
        else {
            app.navigate("views/search-ios.html");
        }
    });


    Regards,
    Tsvetina
    Telerik
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
Back to Top