ListView for single object display

6 posts, 0 answers
  1. Mark
    Mark avatar
    5 posts
    Member since:
    May 2011

    Posted 02 Dec 2013 Link to this post

    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?
  2.
  3. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 04 Dec 2013 Link to this post

    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!
  5. Mark
    Mark avatar
    5 posts
    Member since:
    May 2011

    Posted 04 Dec 2013 Link to this post

    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
  7. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 06 Dec 2013 Link to this post

    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!
  9. Mark
    Mark avatar
    5 posts
    Member since:
    May 2011

    Posted 06 Dec 2013 Link to this post

    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.
  11. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 06 Dec 2013 Link to this post

    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!
Back to Top