Kendo ListBox

Does anybody have any thoughts on how to use the Kendo ListBox component with KUIB?

If not, what's the best method within the existing KUIB to implement functionality to allow the user to select 1 or more items from a list and move them to another list?  Preferably this would be in side by side list areas with left and right arrow buttons.

Louis

Hi Louis,

It is always best to look for a Kendo UI solution. I found demos.telerik.com/.../linkedlists

Hope that helps.

-Shelley

Shelley,

After I got this going and could see visually how it looks in my app, I don't think this is the best solution for this case.  In my app, the total number of items the user is selecting from can be in the hundreds.  Having to scroll down the left list to find an item, click on it, and drag it up while scrolling to get to the list on the right side, is not very user friendly.

I really need some kind of scrolling list where the user can select multiple items on the left side and then move then to the right side list.  I keep going back to the ListBox (or something similar) which would be perfect for my app.

demos.telerik.com/.../angular

Louis

Shelley/Community,

I've decided to reinvent the wheel with this issue.  Based on an Angular example I found,I created a custom HTML component and added 2 select tags with 2 buttons (left and right).  The issues I'm now having is figuring out how to integrate straight Angular HTML with the KUIB app architecture.  Specifically, how do I get the select and button elements to recognize the ng-model and ng-options attrubutes on the select, and the ng-click or onclick on the buttons?

For the buttons I tried setting onclick (and ng-click) to "myFunction, "this.myFunction", and "$scope.myFunction" and I just can't get it to fire.

For the select lists, I managed to get the list populated by finding the select and appending option tags.  I'd much rather be able to use the ng-model and ng-options though.

Example I'm starting from:

jsfiddle.net/.../

The following is the contents of my custom HTML:

<div>

   <table style="width:100%">

       <tr>

           <td class="k-block"><span>Available</span></td>

           <td></td>

           <td class="k-block"><span>Selected</span></td>

           <tr>

               <tr>

                   <td class="k-block">

                       <div style="width:100%">

                           <!-- <select multiple id="listAvailable" size="15" class="k-widget" ng-change="OnAvailableChange()" ng-model="this.SelectedAvailItems" ng-options="i as i.gla_group for i in this.AvailableListItems | orderBy:'gla_group'"></select> -->

                           <select multiple id="listAvailable" size="15" class="k-widget"></select>

                       </div>

                   </td>

                   <td style="width:75px">

                       <div style="float:left">

                           <input id="btnRight" type="button" value="-->" style="width:50px;margin-left:5px" onclick="btnRight()" />

                           <br/>

                           <br/>

                           <input id="btnLeft" type="button" value="<--" style="width:50px;margin-left:5px" onclick="btnLeft()" />

                       </div>

                   </td>

                   <td class="k-block">

                       <div style="width:100%">

                           <!-- <select multiple id="listSelected" size="15" class="k-widget" ng-model="this.SelectedSelectedListItems" ng-options="i as i.gla_group for i  in this.SelectedListItems | orderBy:'gla_group'"></select> -->

                           <select multiple id="listSelected" size="15" class="k-widget"></select>

                       </div>

                   </td>

               </tr>

           </tr>

       </tr>

   </table>

</div>

The following is the code in controller.public.js I'd like to use to manage the select lists:

   btnRight() {

       console.log("btnRight()");

       //move selected.

       angular.forEach(this.SelectedAvailItems, (value, key) => {

           this.push(value);

       }, this.SelectedListItems);

       //remove the ones that were moved.

       angular.forEach(this.SelectedAvailItems, (value, key) => {

           for (var i = this.AvailableListItems.length - 1; i >= 0; i--) {

               if (this.AvailableListItems[i].gla_group == value.gla_group) {

                   this.AvailableListItems.splice(i, 1);

               }

           }

       });

       this.SelectedAvailItems = [];

   };

   btnLeft() {

       console.log("btnLeft()");

       //move selected.

       angular.forEach(this.SelectedSelectedListItems, (value, key) => {

           this.push(value);

       }, this.AvailableListItems);

       //remove the ones that were moved from the source container.

       angular.forEach(this.SelectedSelectedListItems, (value, key) => {

           for (var i = this.SelectedListItems.length - 1; i >= 0; i--) {

               if (this.SelectedListItems[i].gla_group == value.gla_group) {

                   this.SelectedListItems.splice(i, 1);

               }

           }

       });

       this.SelectedSelectedListItems = [];

   };

Thanks,

Louis

Hi,

The customHTML section is for HTML only and Angular code placed inside it would not work properly.  To trigger the events, you would need something like this:

On the customHTML:

<div>
   <input id="btnRight" type="button" value="-->" style="width:50px;margin-left:5px" />
   <br/>
   <br/>
   <input id="btnLeft" type="button" value="<--" style="width:50px;margin-left:5px" />
</div>

On the controller.public.js:

import BaseController from './controller.js'

class CommunitiesSelectTransferCtrl extends BaseController {
    constructor($scope, $injector, stateData) {
        super($scope, $injector);
    }

    // Fired when custom html section is loaded
    includeContentLoaded() {

		/* btnRight */
		angular.element('#btnRight').kendoButton({ click: function(){
			console.log('btnRight');	
		}});
		
		/* btnLeft */
		angular.element('#btnLeft').kendoButton({ click: function(){
			console.log('btnLeft') 
		}});
    }

    // Fired when custom html section loading failed
    includeContentError(e) {

    }

    // Fired when view content is loaded
    onShow($scope) {
        console.log('Show');
    }

}

CommunitiesSelectTransferCtrl.$inject = ['$scope', '$injector', 'stateData'];

export default CommunitiesSelectTransferCtrl

Whenever I have some spare time, I will try to create this without using the customHTML.

All the best,

Ricardo Perdigao

Ricardo,

Thanks, that works perfect.  Using this I was able to create 2 grids with 2 buttons in between in order to replicate the Kendo ListBox component.

Louis