Net Core Razor ListView Grouping with Selectable

[Kevin]

We are setting up a new razor page using ListView following this sample (https://docs.telerik.com/aspnet-core/html-helpers/data-management/listview/binding/razor-page), with onChange event and all is working as expected.

We wanted to incorporate Grouping as well (https://demos.telerik.com/aspnet-core/listview/grouping) bringing in the grouping jQuery, .AutoBind(false), template, and css. When selecting a card, it selects the outside group, not the individual cards. Does anyone know if grouping and selecting individual cards are supported in Razor? If so, can someone provide some insight?

    $(function () {
        var groupDetails = {
            field: 'RoomDescription',
            dir: 'desc',
            compare: function (a, b) {
                if (a.items.length === b.items.length) {
                    return 0;
                } else if (a.items.length > b.items.length) {
                    return 1;
                } else {
                    return -1;
                }
            }
        }
        var listView = $("#listview").data("kendoListView");
        //var listView = $("#listView").data().kendoListView;
        var dataSource = listView.dataSource;
        dataSource.group(groupDetails);
    });

@(Html.Kendo().ListView<spRoomAvailabilityResult>()
    .Name("listview")
    .TagName("div")
    .ClientTemplateId("template")
    .Selectable(ListViewSelectionMode.Single)
    .Events(events => events.Change("onChange").DataBound("onDataBound"))
    .AutoBind(false)
    .DataSource(ds => ds
        .Ajax()
        .Model(model => {
            model.Id(p => p.ROOMID);
        })
        .Read(read => read.Url("/MyWebPage?handler=Read").Data("forgeryToken"))
    )
)

<script>
    function forgeryToken() {
        return kendo.antiForgeryTokens();
    }

    $(document).ready(function () {
        var listView = $("#listview").data("kendoListView");

        $(".k-add-button").click(function (e) {
            listView.add();
            e.preventDefault();
        });
    });
</script>
<script>
    function onChange(arg) {

        var selected = $.map(this.select(), function (item) {
            return $(item).text();
        });

        alert(selected);
    }
</script>

<script type="text/x-kendo-template" id="template">
    <div class="k-listview-item">
        <h4 class="k-group-title">#= data.value #</h4>
        <div class="cards">
            # for (var i = 0; i < data.items.length; i++) { #
            <div class="k-card" style="width: 15em; margin:2%">
            <div class="k-card-body">
                    <h4 class="k-card-title">#= data.items[i].ROOMNUMBER #</h4>
                    <h5 class="k-card-subtitle">Capacity: #= data.items[i].CAPACITY #</h5>
                </div>
            </div>
            # } #
        </div>
    </div>
</script>

Any insight would be appreciated. Thank you!

[Tsvetomir]

Hello Kevin,

Whenever a grouped data source is passed to the Kendo UI ListView, each group is regarded as a single item. That is why the whole group is being selected whenever a single card is clicked. 

Having the option to regard the individual card elements as separate items and not as part of a group is a great idea. I encourage you to log a feature request where you go into more detail on the exact behavior that you expect:

https://feedback.telerik.com/kendo-jquery-ui

The more popularity an item gathers, the greater the chance of it being implemented in any of the upcoming releases.

 

Regards,
Tsvetomir
Progress Telerik