выбор перетаскивания календаря kendo

Question

выбор перетаскивания календаря kendo

Я использую kendo-ui в своем угловом (1.5.1) приложении. Я хочу добавить поддержку перетаскивания в multiselect, чтобы пользователи могли перетаскивать выделение из одного мультиселектора в другой. Я пробовал следовать рекомендациям kendo drag / drop. Проблема заключается в том, что многосегментный источник данных не обновляется с удаленным / добавленным значением. Поскольку используется фильтрация на стороне сервера, всякий раз, когда я программно пытаюсь обновить значение мультиселектора, он очищается. Может ли кто-нибудь посоветовать мне, как это сделать с некоторыми примерами? Благодаря!

Обновлен фрагментами кода, которые я использовал:

на функцию изменения в мультиселекторе -

                    change: function (e) {
                        if (e.sender.list.length > 0) {
                            var targetElement = $(e.sender.list[0]).find('div.k-list-scroller .k-item.k-state-hover.k-state-focused.k-state-selected p')

                            if (targetElement.length > 0) {
                                //get object from datasource
                                var selectedItem = _.find(scope.unifyMultiSelect.dataItems(), function (i) {
                                    return i[scope.options.dataValueField] == targetElement[0].innerText;
                                });

                                initializeDraggable(multiSelect.tagList, selectedItem);
                            }
                        }
                    },

initializeDraggable function -

                function initializeDraggable(ul, selectedItem) {
                    $(ul).find('li:last-child').kendoDraggable({
                        group: "multiSelectGroup",
                        dataValue: selectedItem,
                        hint: function (element) {
                            scope.unifyMultiSelect.value(_.without(scope.unifyMultiSelect.dataItems(), selectedItem));
                            return element.clone();
                        }
                    });
                };

angularjs,kendo-ui,

0

Ответов: 1

angularjs, кендо-щ,

Похожие вопросы

score 0 · Answer 1

0 принят

Проблема была решена давно. Извините за последнее обновление. Решение, которое я изложил, может быть не лучшим, но мне это достаточно. Позже я постараюсь улучшить его дальше.

Короче говоря, сначала я обновил источник данных пустым массивом, а затем обновил последнее значение кавычки внутри таймаута $, чтобы обновить его. Поскольку перетаскивание происходит между независимыми экземплярами директивы multiselect, мне также пришлось передать экземпляр multiselect invoker для завершения, чтобы я мог обновить исходный источник данных экземпляра после завершения операции удаления. Ниже приведены фрагменты

Функция инициализации целевой цели -

            $scope.initializeDropTarget = function () {
                $scope.unifyMultiSelect.tagList.parent().kendoDropTarget({
                    group: "multiSelectGroup",
                    drop: function (e) {
                        var parentMultiselectOptions = e.draggable.options.parentMultiselectOptions;

                        //check if drop target is different multiselect instance
                        if (parentMultiselectOptions.instanceId != $scope.options.instanceId) {
                            var item = e.draggable.options.dataValue;

                            var multiselectItems = $scope.options.getSelectedObjects();

                            var selectedItem = _.find(multiselectItems, function (i) {
                                return i[$scope.options.dataValueField] == item[$scope.options.dataValueField];
                            });

                            if (!selectedItem) {
                                multiselectItems.push(item);
                                $scope.options.setSelectedObjectValues([]);

                                $timeout(function () {
                                    $scope.options.setSelectedObjectValues(multiselectItems);
                                }, 500);

                                finalizeDraggableItem(e.draggable);
                            }
                        }
                        //if dropped to same multiselect instance
                        else {
                            finalizeDraggableItem(e.draggable);
                        }
                    }
                });
            };

finalizeDraggableItem -

            function finalizeDraggableItem(draggable) {
                var parentMultiselectOptions = draggable.options.parentMultiselectOptions;
                var item = draggable.options.dataValue;

                var multiSelectItems = parentMultiselectOptions.getSelectedObjects();

                parentMultiselectOptions.setSelectedObjectValues([]);

                $timeout(function () {
                    var filteredItems = _.filter(multiSelectItems, function (i) {
                        return i[$scope.options.dataValueField] != item[$scope.options.dataValueField];
                    });

                    //re organize selection if dropped to same multiselect
                    if (parentMultiselectOptions.instanceId == $scope.options.instanceId) {
                        filteredItems.push(item);
                    }

                    parentMultiselectOptions.setSelectedObjectValues(filteredItems);

                    draggable.destroy();
                    draggable.element.remove();
                }, 500);
            };

инициализировать функцию Draggable -

            $scope.options.initializeDraggable = function (selectedItems, isLastElement) {
                var listElements = isLastElement ? $scope.unifyMultiSelect.tagList.find('li:last-child') : $scope.unifyMultiSelect.tagList.find('li');

                for (var i = 0; i < selectedItems.length; i++) {
                    var selectedItem = selectedItems[i];
                    var element = $(_.find(listElements, function (el) {
                        return el.innerText.trim().replace(/s+/g, " ") == selectedItem[$scope.options.dataTextField].trim().replace(/s+/g, " ");//remove extra spaces and check
                    }));

                    if (element.length > 0) {
                        element.kendoDraggable({
                            group: "multiSelectGroup",
                            dataValue: selectedItem,
                            parentMultiselectOptions: $scope.options,
                            hint: function (element) {
                                return element.clone();
                            }
                        });
                    }
                }
            };

Закрытие проблемы разрешено. Пожалуйста, дайте мне знать, если кому-то нужна помощь. Благодаря!