This is a migrated thread and some comments may be shown as answers.

Button Placement in Listview

6 Answers 103 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Shawn
Top achievements
Rank 2
Shawn asked on 10 Feb 2014, 04:49 AM
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>');



6 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 10 Feb 2014, 09:23 AM
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!
0
Shawn
Top achievements
Rank 2
answered on 10 Feb 2014, 06:37 PM
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 




0
Shawn
Top achievements
Rank 2
answered on 10 Feb 2014, 07:23 PM
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?
0
Kiril Nikolov
Telerik team
answered on 11 Feb 2014, 09:18 AM
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!
0
Shawn
Top achievements
Rank 2
answered on 11 Feb 2014, 03:51 PM
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.
0
Kiril Nikolov
Telerik team
answered on 12 Feb 2014, 08:10 AM
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!
Tags
ListView (Mobile)
Asked by
Shawn
Top achievements
Rank 2
Answers by
Kiril Nikolov
Telerik team
Shawn
Top achievements
Rank 2
Share this question
or