Fix ListView filter header on top

[Gonzalo]

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

[Tsvetina]

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

 

 

[Gonzalo]

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?

[Tsvetina]

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