UI Sortable with IE browser

[Sujatha]

I am using kendo UI sortable without grid in my application. But it seems IE browser is not compatible for it. Our application is using AngularJS with select and ng-repeat. I was able to get it work for Chrome and Firefox but not with IE. Below is the code snippet for HTML

<select class="form-control" kendo-sortable k-on-end="endHandler(kendoEvent)" 
            k-placeholder="placeholder" k-hint="hint" id="favorite_reports" selectedClass= "selected"
            multiple ng-model="favoriteReports.chosenReports">
        <option ng-repeat="link in config.links">
            {{link.NAME}}
        </option>
</select>

JS:

$scope.endHandler = function (e) {
        var sortable = e.sender;
        // prevent the sortable from modifying the DOM
        e.sender.draggable.dropped = true;
        e.preventDefault();
        // update the model and let Angular update the DOM
        $timeout(function () {
            $scope.$apply(function () {
                $scope.config.links.splice(
                  e.newIndex, 0, $scope.config.links.splice(e.oldIndex, 1)[0]
                );
            });
        });
    };
    $scope.placeholder = function (element) {
        return element.clone().addClass("placeholder").text("drop here");
    };
    $scope.hint = function (element) {
        return element.clone().addClass("hint");
    };

 

And when I use ul and li instead of select, sortable function is not working as expected in chrome, IE and other browsers as well. When I try to drag one element, next element from the queue has the index change and couple of other issues. 

Could you please give me a working example for kendo with sortable functionality (not grid) which uses select and ng-repeat and works for ALL THE BROWSERS as well as AND we can disable the sortable functionality onClick on list for other functionality.

 

Also onClick, I was trying to get the e.currentTarget.selectedOptions.length value which is having the issue with IE saying as selectedOptions is undefined and chrome is working as expected. 

Also I am trying to achieve "multiple" for onClick functionality to remove from the list and add it to other list. (FYI)

Please let me know, if there is any example links or code snippet which works for all browser.

 

Thanks in advance,

Sujatha

 

 

 

[Preslav]

Hi Sujatha,

I checked our data records, and unfortunately, I am not able to find any examples that can fit this scenario. Thus, I want to prepare a runnable page that demonstrates the desired outcome, however, I am afraid that I might not be able to fit the exact use-case.

Having said that, it will help me a lot if you send me a sample runnable page with your current implementation. I will use this page to fully understand the case and modify it in order to assist you to achieve the business requirements of your app.

I look forward to hearing from you.

 

Regards,
Preslav
Progress Telerik