Updating View on Change Event

2 posts, 1 answers
  1. Christy
    Christy avatar
    48 posts
    Member since:
    May 2016

    Posted 01 Aug Link to this post

    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.

  2. Answer
    Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    561 posts

    Posted 03 Aug Link to this post

    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.
Back to Top