Kendo ListBox - Forum - Kendo UI Builder by Progress: OpenEdge Edition - Progress Community
 Forum

Kendo ListBox

This question is answered

Hello,

I need to have a way for the user to select/unselect options from a list.  I see that Kendo now has a ListBox (demos.telerik.com/.../angular) which is exactly what I need.  When I try to create this widget via a custom HTML component and some code, I get a "kendoListBox is not a function" exception.  It appears that KUIB 2.0 does not have this widget.  Is there a way to manually add this within KUIB 2 so I can use it in my app?  I hate to have to reinvent the wheel when it's already part of Kendo.

Louis

Verified Answer
  • 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

All Replies
  • 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