MVVM source data-bind to list view for detail view

2 posts, 0 answers
  1. Jonathan M
    Jonathan M avatar
    16 posts
    Member since:
    Sep 2012

    Posted 13 Dec 2012 Link to this post

    I'd like to display the detail of a record inside a list view within my detail view. I'm trying to use an MVVM source binding and a data-template attribute to specify the list items and how they should look. Like this:
    <script>
        var model = kendo.observable({
            user: {
                firstName: 'Jonathan',
                lastName: 'Marston',
                age: 29,
                isSubscribed: true,
                subscriptionType: 'monthly'
                subscriptionDate: new Date(2012, 12, 12)
            }
        });
    </script>
     
    <script id="detailTemplate" type="text/html">
        <li><label>First Name</label>#: data.firstName #</li>
        <li><label>Last Name</label>#: data.lastName #</li>
        <li><label>Age</label>#: age #</li>
         # if (data.isSubscribed) {
             if (data.subscriptionType == 'monthly') { #
                 <li>Monthly subscription</li>
             # } else { #
                 <li>Yearly subscription</li>
             # } #
             <li><label>Subscribed</label> #: kendo.format(data.subscriptionDate, 'MM/dd/yyyy') #</li>
         # } else { #
             <li>Not subscribed</li>
         # } #
    </script>
     
    <div data-role="view" data-model="model">
        <ul data-role="listview" data-template="detailTemplate" data-bind="source: user">
        </ul>
    </div>
    Unfortunately it appears that the Kendo ListView component is interfering with the source binding because it expects to be bound to an array and have the data-template point to a template for each element in the array.

    Is there any way to bind a list view to a flat structure like I'm trying to do here? I'd do <span>s with data-bind="text: ..." bindings, but the display logic is a bit too complicated for simple data bindings...

    Thanks,
    Jonathan
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 15 Dec 2012 Link to this post

    Hello Jonathan,

    You are correct - the DataSource works only with arrays, binding to a single object is not supported.
    As a solution for your case I suggest you to wrap the "user" object inside an array. In addition it is not recommended to add a <li> elements in the ListView template - the widget will automatically generate a <li> element for each item in the source array.

    Instead please use source and template binding for <div> element and render the ListView widget in the template. For example:
    <!-- view -->
    <div data-role="view" data-model="model">
        <div data-template="detailTemplate" data-bind="source: user">
        </div>
    </div>
    <!-- template -->
    <script id="detailTemplate" type="text/html">
        <ul data-role="listview">
            <li> <label>First Name </label>#:firstName # </li>
            <li> <label>Last Name </label>#:lastName # </li>
            <li> <label>Age </label>#: age # </li>
            # if (isSubscribed) {
                if (subscriptionType == 'monthly') { #
                    <li> Monthly subscription </li>
                    # } else { #
                    <li> Yearly subscription </li>
                    # } #
                <li>
                    <label>Subscribed</label> #: kendo.format('{0:MM/dd/yyyy}', subscriptionDate) #
                </li>
                # } else { #
                <li> Not subscribed </li>
                # } #
        </ul>
    </script>
    <!-- view model -->
    <script>
        var model = kendo.observable({
            user: [{
                firstName: 'Jonathan',
                lastName: 'Marston',
                age: 29,
                isSubscribed: true,
                subscriptionType: 'monthly',
                subscriptionDate: new Date(2012, 12, 12)
            }]
        });
    </script>

    For convenience I prepared a runnable sample: http://jsbin.com/adesek/2/edit

    In addition I corrected the syntax of kendo.format method. I hope this will help.

    Regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
Back to Top