Button Placement in Listview

[Shawn]

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>');

[Kiril Nikolov]

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

[Shawn]

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 

[Shawn]

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?

[Kiril Nikolov]

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

[Shawn]

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.

[Kiril Nikolov]

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