This is a migrated thread and some comments may be shown as answers.

Angular ListView get selected items with external button click.

2 Answers 356 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Clint
Top achievements
Rank 1
Iron
Iron
Iron
Clint asked on 05 Oct 2016, 06:46 PM

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 Answers, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 07 Oct 2016, 02:06 PM
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.
0
Clint
Top achievements
Rank 1
Iron
Iron
Iron
answered on 07 Oct 2016, 02:42 PM

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.

Tags
ListView
Asked by
Clint
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Dimiter Topalov
Telerik team
Clint
Top achievements
Rank 1
Iron
Iron
Iron
Share this question
or