Select/deselect item in ListView

[Simon]

We have a listview bound to a collection of images. It's set to single select. We handle onChange() to get the name of the image file and write this to a textfield (id = "ImageFile"):

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

            $("#ImageFile").val(selected[0].trim());
        }

In order to effectively cancel the selection we provide a hyperlink (id="clearImage") next to the text field and handle it's click method:

        // clears the value in the Image text field
        $("#clearImage").bind("click", function (e) {
            e.preventDefault();
            $("#ImageFile").val("");
        });

Is there a way to clear the listview of any selection (the orange background) from clearImage.click() ? 

Alternatively can the second click of a selected item in the listview deselect it? A toggle() type function that will select/deselect? 

Is there a function to pre-select an item in the listview? So on an Edit record screen I would select the item in the listview as it is loaded that the user selected on the Add screen of the record? 

Hoping we can get rid of the ImageFile text field and handle select/deselect in the ListView itself.

Thank you,

Simon

 

[Eyup]

Hi Simon,

 

Generally, Kendo ListView provides built-in selection functionality:
https://demos.telerik.com/aspnet-mvc/listview/selection

And you can use this approach to select the first or any other item of the listview:
https://docs.telerik.com/kendo-ui/api/javascript/ui/listview/methods/select

If you want to make this automatic, it would be enough to call the method at the end of document ready.

I hope this will prove helpful. If you have more specific queries, you can modify the following live sample to demonstrate your configuration and send it back to us:
https://dojo.telerik.com/IkaCoBUm

Regards,
Eyup
Progress Telerik

[Simon]

Eyup, thanks for the help, I should have investigated the api more closely before posting. I was able to solve the issues I was having, posting solutions here if it helps anyone else.

Here's a "toggle" function that manages selection/deselection in a ListView, saving the state of a selection to a hidden field:

 

<script>

    //holds the currently selected image in the listview
    var currentSelection;

    // fires when an image is clicked in the list view
    function onChange(arg)
    {
        //get selected images as an array
        var selected = $.map(this.select(), function (item) {
            return $(item).text();
        });

        //calling clearSelection() fires this onChange function again so check for null here
        if (selected && selected.length)
        {
            var item = selected[0].trim();

            // if user clicks same image clear the selection and reset currentSelection to empty
            if (currentSelection == item) {
                $("#imageList").data("kendoListView").clearSelection();
                currentSelection = "";
            }
            else {
                currentSelection = item;
            }

            $("#ImageFile").val(currentSelection); // update hidden field and model for saving

        }
    }


</script>

 

Here's a function to set a selection on a ListView, typically on an Edit Record type of screen. I had to put this in a timeout function, it didn't work properly in $(document).ready( ...

 

setTimeout(function () {

    var item;
    var imagename = $("#ImageFile").val(); //from the hidden field as set from the model
    var listView = $("#imageList").data("kendoListView");

    listView.dataSource.view().forEach(function(arrayItem) {
        if (arrayItem.FileName == imagename) {
            item = arrayItem;
        }
    });

    if (item != null) {
        var listViewItem = listView.element.children("[data-uid='" + item.uid + "']");
        listView.select(listViewItem);
    }
}, 100);