ListView multiple select without control key pressed?

[Joon]

Hi,
Would it be possible to select multiple selection without the control key pressed? This will be useful on touch based screens such as tablets and smart phones. Any suggestions? Thanks.

[Dimo]

Hi Joon,

If the described behavior takes place, the user will be never able to deselect an item.

You can try adding some additional way to select on touch devices, e.g. by including checkboxes inside the items.

All the best,
Dimo
the Telerik team

[Joon]

Thanks Dimo,
I understand what you mean and I thought clicking the item again to de-select would be ok for the mouse clicks. Anyways, good to know that it's not implmented by design. I will use the checkboxes as you suggested.

Cheers,

Joon Choi

[John]

I have the same issue - would like to be able to use multi-select by simply clicking/touching each item to toggle.

Does anybody have some example code of how to implement this "add a checkbox" idea?

Seems messy to me though, I would like to see the ListView be able to support this in the future especially for when used on a Tablet with touch.

[xu]

I have the same issue!

[Bill]

We need it too.

If a user has a large list of selections and they forget to hold Ctrl, they will destroy their selection list.

This is effectively a beautiful checkbox mechanism.  We need it.

[victorantos]

is it possible to select again the previous selected ones on the following event?

 function onChange(e) {
       
        var data = dataSource.view(),
            newSelected = $.map(this.select(), function (item) {
                return data[$(item).index()];
            });

}

[Jonathan]

I came across this issue, and came up with the following solution, after searching and not finding a solution.  This allows for multiple selection and deselect without the control key.  Hope it helps someone.

var listView = $("#listView").data("kendoListView");
listView.on("click", ".listview-item", function (e) {
var selected = listView.select();
var isSelected = false;
for (i = 0; i < selected.length; i++) {
if ($(selected[i]).attr("id") == $(e.target).attr("id")) {
isSelected = true;
selected.splice(i, 1);
}
}
if (isSelected == false) {
selected.push(e.target);
}
setTimeout(function () {
listView.clearSelection();
listView.select(selected);
}, 1);
});

or for listbox:

var listBox = $("#ListBox").data("kendoListBox");
        listBox.wrapper.find(".k-list").on("click", ".k-item", function (e) {
            var selected = listBox.select();
            var isSelected = false;
            for (i = 0; i < selected.length; i++) {
                if ($(selected[i]).attr("id") == $(e.target).attr("id")) {
                    isSelected = true;
                    selected.splice(i, 1);
                }
            }
            if (isSelected == false) {
                selected.push(e.target);
            }
            setTimeout(function () {
                listBox.clearSelection();
                listBox.select(selected);
            }, 1);
        });

[Anton Mironov]

Hi Jonathan,

Thank you for sharing your approach and code implementation with the community.

If assistance for anything else is needed, do not hesitate to contact me and the team.

 

Kind Regards,
Anton Mironov
Progress Telerik

[Jonathan]

My previous solution was a little unreliable, so I edited it a bit and came up with this, which is working very well:

var listBox = $("#SelectMultipleListBox").data("kendoListBox");
        listBox.dataSource.read();
        listBox.wrapper.find(".k-list").on("click", ".k-item", function (e) {
            if ($(e.target).closest(".k-item").hasClass("was-selected")) {
                $(e.target).closest(".k-item").removeClass("was-selected");
            } else {
                $(e.target).closest(".k-item").addClass("was-selected");
            }
            var items = listBox.wrapper.find(".k-list").find(".k-item");
            var selected = [];
            for (i = 0; i < items.length; i++) {
                if ($(items[i]).hasClass("was-selected")) {
                    selected.push(items[i]);
                }
            }
            setTimeout(function () {
                listBox.clearSelection();
                listBox.select(selected);
            }, 50);
        });

[Anton Mironov]

Hi Jonathan,

Thank you for the new code snippet.

If assistance for anything else is needed, do not hesitate to contact me and the team.

Best Regards,
Anton Mironov
Progress Telerik