ListView for single object display

[Mark]

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?

[Alexander Valchev]

Hi Mark,

Please check the following example:

• http://jsbin.com/uGaLaYA/2/edit
  
  

The approach uses MVVM source and template binding to a single object:

• http://docs.kendoui.com/getting-started/framework/mvvm/bindings/source#source-binding-to-non-array-value
  
  

Note that the approach should be used only when you want to display a single object.

Regards,
Alexander Valchev
Telerik

[Mark]

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

[Alexander Valchev]

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

[Mark]

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.

[Alexander Valchev]

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