Button Placement in Listview

7 posts, 0 answers
  1. Shawn
    Shawn avatar
    43 posts
    Member since:
    Dec 2011

    Posted 09 Feb 2014 Link to this post

    I am adding items to a Kendo List View dynamically.

    In one of the list view items we add in some label text and then place 2 buttons.

    The text can be anywhere from 1 - 15 characters.

    We want to first button placed to always start at the 50% of total width.

    The second button (this works OK) we place 5px from the right margin.

    I am having a problem try to figure out how to put that button at the 50% total width mark, seems like it should be easy, but using margin always starts from the end of the text.

    I am trying to come up with a formula that will work in general for most devices regardless of orientation so the width would be anywhere from 320 - 1024 and maybe more for high resolution tablets and monitors.

    Here is some code that I have been using - any help from list view guru's appreciated.

    <div data-role="view" id="ListSample" data-title="My List View">
      <form>
        <ul id="mylistview" data-role="listview"></ul>
      </form>
    </div>

    Here is the code to place the item in the list view// label text - this can vary in length 1 - 15 characters:

    // define test
    var textLabel = 'ABC 123';

    // get length of text
    var textLength = detailData[i].PROMPT.length;

    // assume 4 pixels per character - this is not accurate but what I was trying
    var textPixels = textLength * 4;

    // figure out left margin percent from
    marginPercent = (66 - ((textPixels/$(document).width())*400)) + '%';

    // now append the list view item
    $('#mylistview').append('<li><label>'+textLabel+'<a data-role="button" data-icon="camera"
    class="km-button" onclick="onCamera()" style="marginleft:'+marginPercent+'; width:40px;height:40px;font-size:40px;text-align:center;vertical-align:middle;padding:10px 20px 10px 10px;"><span class="km-icon km-camera km-notext"></span></a></label><a data-role="button" class="km-button" on click
    ="onPreview()" style="float:right;margin-right:5px;width:40px;height:40px;font-size:40px;text-align:center;vertical-align:middle;padding:10px 20px 10px 10px;"></a>
    </li>');



  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 10 Feb 2014 Link to this post

    Hi Shawn,

    I am not really sure that I understand the problem that you are facing, but is this what you are looking for?

    http://jsbin.com/keseg/1/edit

    If this is not the case, please use the jsBin to create an example, that we can take a look at.

    The append method that you use is the jQuery append() and no the append() method that the ListView supports. In order to work correctly you need to use this:

    $("#mylistview").data("kendoMobileListView").append("contentToAppend");

    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Shawn
    Shawn avatar
    43 posts
    Member since:
    Dec 2011

    Posted 10 Feb 2014 in reply to Kiril Nikolov Link to this post

    This helps allot, breaks all of my code so re-writing to use this method which seems to be a little different than what is being done in the demo forms for mobile, but that is not adding it dynamically.

    My last question then is with this new method could you modify your code in jsbin to add in a second button that is 5 px from the right?

    I think I can handle it from there as I have numeric controls as well.

    The other thing that I am doing it changing the background color for the active list item so it is easier for a user to know which field they are in.

    I use the following code for that as I keep track of the previous and current item in the list

    highlight the field
                            $("#"+curFocus).parent().parent().css('background','lightgray');
    change it back
                            $("#"+prevFocus).parent().parent().css('background','#f0f0f0');

    is there an easier way to do that as well 




  5. Shawn
    Shawn avatar
    43 posts
    Member since:
    Dec 2011

    Posted 10 Feb 2014 in reply to Shawn Link to this post

    So I tried to use your append statement and it does not work, it creates a new list item for each and every character in the append string.

    $("#detailList").data("kendoMobileListView").append('<li><label style="width:50%; display:inline-block">'+detailData[i].PROMPT+'</label></li>');

    Am I missing something?
  6. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 11 Feb 2014 Link to this post

    Hello Shawn,

    You are not using the append() method correctly. As stated in the documentation article that I linked, you will need add a data item and not <li> element:

    http://docs.telerik.com/kendo-ui/api/mobile/listview#methods-append

    Please check the updated example:

    http://jsbin.com/keseg/2/edit

    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Shawn
    Shawn avatar
    43 posts
    Member since:
    Dec 2011

    Posted 11 Feb 2014 in reply to Kiril Nikolov Link to this post

    well you are assuming that all of the rows are the same and they are not, just like your form example each row in the list can have different types of definitions and different combination of controls so binding it to a data source is probably not something I can do.

    i have seen allot of stuff around conditional template binding but not sure if that can be done for different rows in a list view.
  8. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 12 Feb 2014 Link to this post

    Hello Shawn,

    In the Kendo UI Templates, you can execute custom JavaScript code, where you can change the way template look based on the data that is bound. You can read more about it here:

    http://docs.telerik.com/kendo-ui/getting-started/framework/templates/overview

    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready