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

ListView for single object display

5 Answers 28 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Mark
Top achievements
Rank 1
Mark asked on 02 Dec 2013, 10:27 PM
I'd like to use a listview to display the property name value pairs in a listview format.   Given the nice auto formatting of <label><input /></label> structure of splitting each cell... how would one do that with a single object?

5 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 04 Dec 2013, 09:57 AM
Hi Mark,

Please check the following example:
The approach uses MVVM source and template binding to a single object:
Note that the approach should be used only when you want to display a single object.

Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Mark
Top achievements
Rank 1
answered on 04 Dec 2013, 09:13 PM
Alexander - Thanks but i don't think this answers my question.

I'm looking for 2 things...

1. How can I mimic the style  the listview produces when each <li> contains a <label> wrapped around an <input>.  You'll notice that produces a an <li>  split in half with the label on one side and the input on the other.

2. This is probably more of a product request - but it would be nice if you could bind and object and have the library iterate over the properties defined in the model.   This could also be done as form.  Its unquestionably a common use case.  Telerik has done this with other products (http://www.telerik.com/products/windows-phone/overview/all-controls/dataform.aspx)

-mark
0
Alexander Valchev
Telerik team
answered on 06 Dec 2013, 12:18 PM
Hi Mark,

Regarding your questions:

#1: If I understood correctly your aim is to have the styling without building a widget.
In this case you should add the the km-listview and km-list classes to the ul element. Here is an example:
<ul class="km-listview km-list">
    <li>
        <label>Name
            <input data-bind="value: name" type="text" />
        </label>
    </li>
    <li>
        <label>Age
            <input data-bind="value: age" type="number" />
        </label>
    </li>
</ul>


#2: Thank you for the feedback. My suggestion is to submit this as a feature request at Kendo UI Feedback portal. In this way the other users will be able to evaluate and for this idea, if it turns out to be popular we will consider it for one of our future releases.

Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Mark
Top achievements
Rank 1
answered on 06 Dec 2013, 04:05 PM
Alexander - my question is how to style items in the list that are NOT input elements. For example 2 spans for such that they get the same formatting of the label & input in the li cell. The cell split in half with on span on one side and the other on the other side.
0
Alexander Valchev
Telerik team
answered on 06 Dec 2013, 05:37 PM
Hello Mark,

Kendo UI Mobile provides out of the box styling for form elements that are placed inside a mobile ListView. 
If you want to style other HTML elements such as <span> or <div> please use custom class names and CSS rules.

Regards,
Alexander Valchev
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
Mark
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Mark
Top achievements
Rank 1
Share this question
or