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

Updating View on Change Event

1 Answer 224 Views
MultiSelect
This is a migrated thread and some comments may be shown as answers.
Christy
Top achievements
Rank 1
Christy asked on 01 Aug 2017, 06:28 PM

I have a multiselect control on my AngularJS page that can contain too many items to fit nicely in the required area. As a result, I have tagMode as "single" to show how many items are selected. I have included a kendo-tooltip in a div tag around the MultiSelect with a title that is a list of all the selected items. 

<div id="showTooltip" kendo-tooltip title="{{vm.titleText}}">
     <select kendo-multi-select="showMulti"
             id="calendarShow"
             k-options="vm.showOptions"
             k-ng-model="vm.selectedTypes"></select>
</div>

I am currently updating this list in the change event in vm.showOptions. This works whenever items are selected or deselected, provided that there is AT LEAST one item selected. When I deselect the final item, the change event runs and updates the value of vm.titleText to a value of "None". However, the tooltip that is shown is empty. When I look in the developer tools, the title is not set at all. I assume there is something that fires in the MultiSelect when items are selected, but does not fire when there is no selection. Is there some way to force this to run?

This is my change event code:

function checkInputs() {
   // Set up header text
    var title = $($scope.showMulti.element[0].previousSibling);
    var titleText = '';
    vm.selectedTypes = vm.selectedTypes.sort(function (a, b) {  return a - b;  });
    angular.forEach(vm.selectedTypes, function (item) {
        titleText = titleText + $filter('filter')(vm.showTypes, { 'value': item }, true)[0].text + ', ';
    });
 
    if (titleText) {
        titleText = titleText.slice(0, titleText.length - 2);
    } else {
        titleText = 'None';
        $scope.$digest();
    }
    vm.titleText = titleText;
}

Running $scope.$digest() or $scope.$apply() does not seem to have any effect on what is shown.

1 Answer, 1 is accepted

Sort by
0
Accepted
Veselin Tsvetanov
Telerik team
answered on 03 Aug 2017, 02:07 PM
Hello Christy,

Here you will find a simple Dojo, based on the described scenario. You will notice that by using the $scope.$digest() call, the content of the Tooltip is updated according to the selected items in the MultiSelect. This call would be needed as at the time, when the change event of the MultiSelect gets fired, the Angular has already created the Tooltip, so another cycle is needed to apply changes.

I hope, that this helps.

Regards,
Veselin Tsvetanov
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
MultiSelect
Asked by
Christy
Top achievements
Rank 1
Answers by
Veselin Tsvetanov
Telerik team
Share this question
or