Пользовательский интерфейс Kendo MultiSelect вместо очистки - PullRequest
0 голосов
/ 01 апреля 2020

Я инициализирую множественный выбор пользовательского интерфейса Kendo внутри контроллера AngularJS следующим образом:

    .directive("docTypes", [function() {

        const directive = {
            restrict: "E",
            scope: {
                fieldName: "@",
                hiddenFieldName: "@",
                model: "=",
                dataTypes: "=",
                modelProperty: "@"
            },
            controller: "docTypesCtrl",
            replace: false,
            template: function(element, attrs) {

                let model = "formData." + attrs.fieldName;
                let ngValue = "formData." + attrs.fieldName;

                let tmpl = "";
                tmpl += "<div>";
                tmpl += "<div class='demo-section k-content'>";
                tmpl += "        <select id=\"" + attrs.fieldName + "\" ng-model=\"" + model + "\" data-placeholder=\"Select DOC(s)...\" class=\"ng-pristine ng-untouched ng-valid\"></select>";
                tmpl += "</div>";
                tmpl += "    <input type=\"hidden\" name=\"" + attrs.hiddenFieldName + "\" ng-value=\"arrayToCommaSeparatedString(" + ngValue + ")\" />";
                tmpl += "    <div>";
                tmpl += "        <button class=\"k-button\" id=\"selectAllDocTypes\" type=\"button\" ng-click=\"selectAllDocs()\">Select All</button>";
                tmpl += "        <button class=\"k-button\" id=\"deselectAllDocTypes\" type=\"button\" ng-click=\"deselectAllDocs()\">Deselect All</button>";
                tmpl += "    </div>";
                tmpl += "</div>";

                return tmpl;
            }
        };

        return directive;
    }])

(Примечание: шаблон сгенерирован таким образом из-за другой ошибки)

В моем контроллере я инициализирую множественный выбор и выбор / отмена выбора следующим образом:

    .controller("docTypesCtrl", ["$scope", "$http", function($scope, $http ) {


        initMultiSelect2();

        function initMultiSelect2() {

            $('#' + $scope.fieldName).kendoMultiSelect({
              clearButton: false, 
              dataTextField: 'NAME', 
              dataValueField: 'DOC_TYPE', 
              dataSource: { 
                transport: {
                  read: {
                    cache: false,
                    dataType: 'json',
                      url: '/report/docs'
                  }
                }, 
                schema: { 
                  type: 'json', 
                  data: 'resultData', 
                  model: { 
                    Field1: { field: 'NAME', type: 'string'}, 
                    Field2: { field: 'DOC_TYPE', type: 'string'} 
                  } 
                } 
              }
            });


            $scope.selectAllDocs = function() {

                let jqMultiSelect = $("#" + $scope.fieldName);
                let jqHidden = $("input[name=" + $scope.hiddenFieldName + "]");

                const required = jqMultiSelect.kendoMultiSelect().data("kendoMultiSelect");

                const values = $.map(required.dataSource.data(), function(dataItem) {
                    return dataItem.value;
                });

                required.value(values);

                const hiddenValues = values.join(",");
                const jqHiddenFieldName = "input[name=" + $scope.hiddenFieldName + "]";
                jqHidden.val(hiddenValues);
            };

            $scope.deselectAllDocs = function() {

                let jqMultiSelect = $("#" + $scope.fieldName);
                let jqHidden = $("input[name='" + $scope.hiddenFieldName + "'][type='hidden']");

                let required = jqMultiSelect.kendoMultiSelect().data("kendoMultiSelect");
                required.value([]);
                console.log("taglist: " + JSON.stringify(required.tagList));

                const jqHiddenFieldName = "input[name=" + $scope.hiddenFieldName + "][type='hidden']";
                jqHidden.val("");

            };
}

К сожалению, нажатие кнопки отмены выбора имеет неприятный побочный эффект добавления нового, «пустого» элемента управления внутри старого контроль, вместо (я полагаю) замены его. Когда контроллер инициализируется и отображается, я сомневаюсь, что это проблема с AngularJS.

Кто-нибудь может помочь?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...