https://evolutionjourney.eu/DesktopModules/DnnSharp/ActionGrid/sta…/edit/dropdownwithcheckboxes.js?cdv=1048

1angrid.directive('dropdownwithcheckboxesInlineEdit', ['$compile', '$interval', '$parse', '$sce', function ($compile, $interval, $parse, $sce) {
2    return {
3        restrict: 'A',
4        scope: true,
5        templateUrl: function (element, attrs) {
6            return attrs.templateUrl;
7        },
8        link: function (scope, element, attrs) {
9            scope.item = $parse(attrs.item)(scope);//row
10            scope.field = $parse(attrs.field)(scope);//coloana
11            scope.workItems = angular.copy(scope.field.inlineEdit);
12            $('body, input').on('click', function (e) {
13                if(scope.item[scope.field.name + 'Settings'] && !scope.item[scope.field.name + 'Settings'].show)
14                    return;
15                if ($(e.target).parent().closest(element).length == 0) {
16                    scope.item[scope.field.name + 'Settings'] && (scope.item[scope.field.name + 'Settings'].show = false);
17                }
18            });
19
20            var optArray = [];
21            //if initial value check that
22            if (scope.item['$' + scope.field.name + '$overrideValueForInlineEdit'] != '' && scope.item['$' + scope.field.name + '$overrideValueForInlineEdit'] != null) {
23                optArray = scope.item['$' + scope.field.name + '$overrideValueForInlineEdit'].split(',');
24            }
25                //else check the values found (should be unique and no ',' in values)
26            else if (scope.item[scope.field.name]) {
27                optArray = scope.item[scope.field.name].split(',');
28            }
29            if (!scope.workItems.Items) {
30                scope.workItems.Items = [];
31            }
32            $.each(optArray, function (k, oItem) {
33                $.each(scope.workItems.Items, function (l, uItem) {
34                    if (uItem.value == oItem.trim())
35                        scope.workItems.Items[l].checked = true;
36                });
37            });
38
39            //swap on click
40            scope.updateValue = function (value, $event) {
41                $event.stopPropagation();
42                if (scope.workItems.Items[value].checked)
43                    scope.workItems.Items[value].checked = false;
44                else
45                    scope.workItems.Items[value].checked = true;
46                scope.cleanData();
47            }
48            scope.item[scope.field.name + 'Settings'] = scope.item[scope.field.name + 'Settings'] || {};
49
50            scope.toggleDropdown = function ($event) {
51                $event.stopPropagation();
52                scope.item[scope.field.name + 'Settings'].show = !scope.item[scope.field.name + 'Settings'].show;
53                var dropdownPanel = element.find('.dropdown-panel');
54                var dropdownOpen = $interval(function () {
55                    if (dropdownPanel.width() >= 0) {
56                        scope.resizeDropdown(dropdownPanel, scope.item[scope.field.name + 'Settings']);
57                        $interval.cancel(dropdownOpen);
58                    }
59                }, 50); //interval
60            }
61
62            scope.resizeDropdown = function (dropdownPanel, dropdownName) {
63                if (dropdownPanel.attr('data-window-width') == $(window).width())
64                    return;
65                if (dropdownName.show) {
66                    dropdownPanel.css('opacity', '0');
67                    if (dropdownPanel.attr('data-window-width')) {
68                        dropdownPanel.width(dropdownPanel.width() - 40); // this eliminates endless adding of padding when you resize the window
69                        dropdownPanel.attr('style', '');
70                    }
71                    dropdownPanel.css('display', 'table');
72                    var inputWidth = dropdownPanel.parent().prev().children().first().width();
73                    var contentWidth = dropdownPanel.width() + 40; // magic number for padding
74                    var rect = dropdownPanel[0].getBoundingClientRect();
75                    var windowWidth = $(window).width();
76
77                    dropdownPanel.attr('data-window-width', windowWidth);
78                    dropdownPanel.css('display', 'inline-block'); // i took the width from display:table 
79                    // and make it inline-block with that width
80                    if (inputWidth > contentWidth) { // if the input is bigger than the dropdown panel make the panel input-sized
81                        dropdownPanel.width(inputWidth);

82                        dropdownPanel.parent().width(inputWidth);
83                        dropdownPanel.css('opacity', '1');
84                    }
85                    else {
86                        if (rect.right > windowWidth) { // if the dropdown is bigger than the window
87                            contentWidth = contentWidth - (rect.right - windowWidth) - 15; // magic number for padding
88                            dropdownPanel.css('overflow-x', 'scroll');
89                        }
90                        dropdownPanel.width(contentWidth);
91                        dropdownPanel.parent().width(contentWidth);
92                        dropdownPanel.css('opacity', '1');
93                    }
94                }// show
95            }; //resize
96
97            //check all
98            scope.checkAll = function () {
99                $.each(scope.workItems.Items, function (k, oItem) {
100                    scope.workItems.Items[k].checked = true;
101                });
102                scope.cleanData();
103            };
104
105            //uncheck all
106            scope.uncheckAll = function () {
107                $.each(scope.workItems.Items, function (k, oItem) {
108                    scope.workItems.Items[k].checked = false;
109                });
110                scope.cleanData();
111            };
112
113            //update values for save
114            scope.cleanData = function () {
115                var returnArray = [];
116                var viewArray = [];
117                $.each(scope.workItems.Items, function (k, oItem) {
118                    if (scope.workItems.Items[k].checked) {
119                        returnArray.push(scope.workItems.Items[k].value.trim());
120                        viewArray.push(scope.workItems.Items[k].text);
121                    }
122                });
123                scope.item[scope.field.name] = returnArray.join();
124                scope.item.$$_dirty = true;
125                scope.totalResults = (scope.$parent.settings.localization.selection.count || '{n} selected').replace('{n}', viewArray.length);
126            }
127
128            scope.cleanData();
129        }
130    };
131}]);