Set background image with Kendo Mobile buttons

3 posts, 0 answers
  1. Derrick
    Derrick avatar
    4 posts
    Member since:
    Jun 2013

    Posted 19 Aug 2013 Link to this post


    I am creating a Kendo Mobile SPA, but would like to separate the views into their own html files because there will be more than a few views.  So I am using remote views.

    With remote views, it looks like that in order for the <a> tag to work you need to supply it with a Kendo Mobile data-role either a button, tab strip or list.  Examples:

    <ul data-role="listview" data-style="inset" data-type="group">
                        <li><a href="#secondview">Local View</a></li>
                        <li><a href="remoteview.html">Remote View</a></li>


     <a href="remoteview.html" data-role="button">Remote View</a>

    Just using a regular link to a remote view like this will not work (Without the data-role, Kendo Mobile doesn't know to handle this as an ajax call to a remote view and just loads the html like it's a whole new page):

    <a href="remoteview.html">Remote View</a>

    I have images in my app that are touchable and will navigate to other views, so my idea to achieve the SPA with remote views is to use data-role of button and try to set the button background image to the image like this:

    <a href="remoteview.html" data-role="button" style="background-color: white; color: black;"><img width="50%" src="images/Button.png" alt="image"><br/>Remote View</a>

    Which doesn't work totally.  The first time the button is displayed the image is really small—this navigates correctly to the remote view, however you have to navigate and then go back to see the button have the correct size.  

    Anyway, is there a better way to set a background image with the Kendo Mobile button?

  2. Alexander Valchev
    Alexander Valchev avatar
    2895 posts

    Posted 21 Aug 2013 Link to this post

    Hi Derrick,

    Thank you for getting in touch us.

    In this help topic you will find information explaining how to use custom icons with background image:
    An alternative approach would be not to use a button/tab strip/list but regular img element enhanced to touch component. In this way you will be able to catch the tap event and use the navigate method of the application to load the remote View.

    Alexander Valchev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Derrick
    Derrick avatar
    4 posts
    Member since:
    Jun 2013

    Posted 06 Nov 2013 Link to this post

    Thanks for your reply Alexander, the navigate method you pointed out was a better approach.
Back to Top