Databind Listview group title

[David]

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?

[Alexander Valchev]

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

[David]

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?

[Alexander Valchev]

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

[David]

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();