Databind Listview group title

5 posts, 0 answers
  1. David
    David avatar
    60 posts
    Member since:
    Nov 2012

    Posted 12 Apr 2013 Link to this post

    Is there a way to databind a listview group title.  For styling purposes in my app its nice to use the grouped listview so that the title can be styled nicely like so ...
    <ul data-role="listview" data-style="inset" data-type="group">
      <li>
        Spiffy Items
        <ul data-role="listview" data-style="inset"  data-bind="source: spiffySource"  data-template="spiffyTemplate" ></ul>
      </li>
    </ul>
    I would like to be able to databind the group title such that I change the text based on how many items are present (i.e. 'No Spiffy items' if datasource has 0 items ... etc).  No problem I think databinding to the rescue ... I just make a computed dependency on my viewmodel and bind a span to that.
    <ul data-role="listview" data-style="inset" data-type="group">
      <li>
        <span data-bind="text: spiffySourceHeader" ></span>
        <ul data-role="listview" data-style="inset"  data-bind="source: spiffySource"  data-template="spiffyTemplate" ></ul>
      </li>
    </ul>
    Sadly once databinding has done its thing the final output looks like this ...
    <li class="km-group-container">
        <div class="km-group-title">
            <div class="km-text">
            </div>
        </div>
        <span data-bind="text: spiffySourceHeader">Found one Fuel Stop</span>
            <!-- ul and its contents here snipped for brevity -->
    </li>
    My span is outside of the km-group-title and km-text so it doesn't get styled ...

    Now I know I can just apply the styles to make it look appropriately but what is the proper way to achieve this affect?
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 16 Apr 2013 Link to this post

    Hello David,

    I am not sure if I understood correctly your scenario. Generally speaking, ListView grouping works with DataSource groups. In the group title, you can show the total count of items via headerTemplate. As an example:
    headerTemplate: "${value} <span>Total: ${items.length}</span>",

    In case this does not help, could you please provide a small but runnable sample that demonstrates the issue you encountered? In this way I would be able to understand your exact case and help you with the configuration, if Kendo UI Mobile supports it of course.
    Thank you in advance for the cooperation.

    Kind 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
  4. David
    David avatar
    60 posts
    Member since:
    Nov 2012

    Posted 16 Apr 2013 Link to this post

    Hi Alexander,
      I have made a jsFiddle that should illustrate my problem a bit more clearly.  I am trying to make it look like the section that has the header 'Desired Look'.  I attempted to get this using the headerTemplate in the 'Templates & Data Binding' section to no avail.  I think I am going about it the wrong way, do you know a way to make it appear like the 'Desired Look' portion and have that group text be bound to a computed field?
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 18 Apr 2013 Link to this post

    Hello David,

    Thank you for the example.

    I am afraid that what you would like to achieve is not supported. The only possible workaround which I can suggest is to manually add the respective elements with their classes and bind the .km-text field to field of the ViewModel.
    <ul data-role="listview" data-style="inset" data-type="group">
        <li>
            <li class="km-group-container">
                <div class="km-group-title">
                    <div class="km-text"
                        data-template="gasListTemplateHeader"
                        data-bind="source: count">
                    </div>
                </div>
            </li>
            <ul data-role="listview"
                data-template="gasListTemplate"
                data-bind="source: items">
            </ul>
        </li>
    </ul>

    I also updated your sample: http://jsfiddle.net/valchev/kJ4Kb/2/

    Kind 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!
  6. David
    David avatar
    60 posts
    Member since:
    Nov 2012

    Posted 18 Apr 2013 Link to this post

    Thanks for the info Alexander.

    That technique of using a data-template and data-bind'ing a source to an ordinary div is pretty awesome.  I didn't know you could do that, I would recommend calling that out in the documentation if it isn't in there (I haven't looked up that stuff in a few months its possible it has been updated since then).

    Using that approach I managed to get This which although is a bit of a hack it seems more future proof to me (updates to how kendo renders group lists wouldn't break this approach).

    I think it is a spiffy approach :)

    code is listed below so others can see it should JsFiddle blow up :)

    Markup:
    <div data-role="view" id="foo" data-model="vm">       
        <div data-role="button" data-bind="click: bump">Add item</div>
         
        <div data-template="crazyTemplate" data-bind="source: itemsource"></div>
    </div>
     
    <script type="text/x-kendo-template" id="crazyTemplate">
       <ul data-role="listview" data-style="inset" data-type="group">
           <li>
               Found #= data.count# items
               <ul>
                   #for(var i = 0; i < data.items.length; i ++) { #
                       <li> #=data.items[i].value#</li>
                   #}#
               </ul>
           </li>
       </ul>
    </script>
    javascript:
    var vm = new kendo.data.ObservableObject({
        items:[{
            name: "item1",
            value: "value1"
        },{
            name: "item2",
            value: "value2"
        }],
        count: function() {
            return { count: this.get("items").length };
        },
        itemsource: function() { //create a single item that exposes the list for binding ...
            return {
                items: this.get("items"),
                count: this.get("items").length
            };
        },
        bump: function() {
            items = vm.get("items").push({ name: "blah", value:"blah"});
        }
    });
      
    new kendo.mobile.Application();
Back to Top
Kendo UI is VS 2017 Ready