Angular ListView get selected items with external button click.

3 posts, 0 answers
  1. Clint
    Clint avatar
    4 posts
    Member since:
    Apr 2016

    Posted 05 Oct Link to this post

    I have a Kendo ListView, which I have selected set to "multiple". I also have a button on that page that will do data processing. Part of it's function is to get the selected items from that ListView and put them into some type of array. However I can't even accessthe bloody selected items from the ListView.

    With Telerik's PATHETIC support for Angular I have to resort to jQuery, but even with that older code I still can't get a list of selected items from the ListView.

    Obligatory code sections that proably won't make sense to anybody, but need to be included otherwise support will whine about not having code to review.

    HTML:

    <fieldset class="bsFilterSetGreyBk bsFullHeight">
       <legend class="bsLegend">Available To Assign</legend>
       <div kendo-listview id="unAssignedListView" k-data-source="camu.mUnassigned" k-options="camu.klvOptions"></div>
       <div kendo-pager id="unAssignedPager" k-data-source="camu.mUnassigned"></div>
    </fieldset>

    Angular Controller:

    (function() {
        "use strict";
        angular
            .module("controller.assignUser", ["ngAnimate", "ngMessages", "ngSanitize", "kendo.directives"])
            .controller("ctrlAssignUser",
            [
                "$window",
                "appSettings",
                "assignToUser",
                function ($window, appSettings, assignToUser) {
                    var camu = this;
                    camu.lstSelection = null;
                    camu.selId = null;
                    camu.auOptions = {
                        optionLabel: "Click Here to choose user...",
                        dataTextField: "user",
                        dataValueField: "id",
                        dataSource: {
                            transport: {
                                type: "jsonp",
                                read: {
                                    url: appSettings.serverPath + "/api/assign/allusers/"
                                }
                            }
                        }
                    };
                    
                    camu.klvOptions = {
                        selectable: "multiple",
                        template: "<div class='klvItems'>#= oldMeterNumber#</div>"
                    }
                    camu.addMtr = function() {
                        var list = $("#unAssignedListView").data("kendoListView");
    //Resorting to jQueary because of... reasons! List is test variable that I can't get the selected data into.
                    };
                    camu.changeAssUser = function () {
                        if (camu.selId === "") {
                            camu.selId = null;
                            return;
                        }
                        camu.mUnassigned = new kendo.data.DataSource({
                            transport: {
                                type: "jsonp",
                                read: function(options) {
                                    assignToUser.getUnassigned.query(
                                        null,
                                        function(data) {
                                            options.success(data);
                                        });
                                }
                            },
                            pageSize: camu.getListViewRows()
                        });
                        camu.mAssignUser = new kendo.data.DataSource({
                            transport: {
                                type: "jsonp",
                                read: function (options) {
                                    assignToUser.getAssigned.query(
                                        { "userId": camu.selId },
                                        function(data) {
                                            options.success(data);
                                        });
                                }
                            },
                            pageSize: camu.getListViewRows()
                        });
                    }
                    camu.getListViewRows = function () {
                        return Math.floor(($window.innerHeight - appSettings.windowChrome) / appSettings.rowHeightPx);
                    };
                    camu.getPageHeight = function () {
                        return { height: ($window.innerHeight - appSettings.navbarHeight) + "px" };
                    };
                }
            ]);
    }());

    So what am I doing wrong?

  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    349 posts

    Posted 07 Oct Link to this post

    Hi Clint,

    The currently selected Kendo UI ListView items can be obtained via the select() method. The respective data items are available via the dataItem() method. A reference to the widget can be obtained via any of the approaches, described in this section of our documentation.

    I have prepared a simple example, illustrating the described approach:

    http://dojo.telerik.com/AzeJE

    Let me know if you need additional information.

    On a side note, please keep in mind that we do not tolerate foul language and offending posts can be moderated or removed. Such communication is neither constructive, nor does it bring any benefits, such as cooperative environment.

    Regards,
    Dimiter Topalov
    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
  3. Kendo UI is VS 2017 Ready
  4. Clint
    Clint avatar
    4 posts
    Member since:
    Apr 2016

    Posted 07 Oct in reply to Dimiter Topalov Link to this post

    Thanks for your help.

    On the side note, not trying to discount what I said, nor weaseling out of the repercussions of saying it. However, yes it was negative, but it was born of 4 days of frustration, stress, sleepless nights, migraines and now almost missing a deadline as I could not find any definitive Angular documentation on how to achieve this.

    Not to sound overly dramatic but peoples jobs, mine included, hang in the balance of what code is produced utilizing on your product.

Back to Top