Can't .select listview without selectable being true or multiple.

3 posts, 0 answers
  1. Lane
    Lane avatar
    4 posts
    Member since:
    Oct 2017

    Posted 22 Jan 2018 Link to this post

    Hi, I have a listview that I use Jquery on to be able to have multi-select functionality by simply clicking the items, instead of needing to hold ctrl. When I attempt to gather the selected items using .select(), It implies that because selectable is undefined, that it can't find that information. This was previously a grid and it worked fine having the selectable property off and still using .select(). I also have another grid currently that applies the same functionality and it works. It seems to only be an issue with the listview. I can't set the selectable property to on because with my Jquery doing the selecting, it seems it doesn't know what to do to select and fails.

     

    Here is my selection with Jquery:

    $('#expensesView').delegate('.expense', 'click', function () {
            $(this).toggleClass('k-state-selected');
        })

     

    The listView:

     

        $('#expensesView').kendoListView({
            dataSource: ExpensesDS,
            //selectable: "multiple",
            scrollable: "true",
            filterable: "true",
            height: 600,
            template: kendo.template($('#expenseTemplate').html())
        });

     

    Method I'm using to get all the selected objects IDs:

     

        var listView = $('#expensesView').data('kendoListView');
        var ids = [];

        listView.select().each(function () {
            var dataItem = grid.dataItem($(this));
            ids.push(dataItem.expenseID);
        });

     

    .select works fine on the grid without selectable being defined, but not in the listview. What should I do here?

     

    Thanks!

  2. Lane
    Lane avatar
    4 posts
    Member since:
    Oct 2017

    Posted 22 Jan 2018 Link to this post

    i'm not sure what the proper way to navigate this is, but I just wrote some Jquery to select the elements myself, then grabbed the props I wanted from the dataItem. 

     

        var listView = $('#statementExpensesView').data('kendoListView');
        var ids = [];

        $('#statementExpensesView').find('.expense').each(function () {
            if ($(this).hasClass('k-state-selected')) {
                var dataItem = listView.dataItem($(this));
                ids.push(dataItem.expenseID);

            } else {
                return;
            };
        });

  3. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2403 posts

    Posted 24 Jan 2018 Link to this post

    Hello Lane,

    Based on the provided description I should say that the behavior is expected. Since selection is not enabled by default and the k-state-selected class is added manually the select() method will likely return a different result than what appears visually as selected items. 

    If the requirement is to select multiple items with just clicking the approach you are going for is correct. Since the selected CSS class is applied manually you can retrieve the selected items by selecting all elements with that class.

    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top