This is a migrated thread and some comments may be shown as answers.

Add/Remove KendoSortable Dynamically

19 Answers 1726 Views

Grid

This is a migrated thread and some comments may be shown as answers.

VP asked on 30 Sep 2015, 08:18 PM

Hello

I am working on Including KendoSortable in my Kendo UI Grid. I am able to add it on a radio button select event (as below).

http://demos.telerik.com/kendo-ui/sortable/integration-grid

This is how I am able to add it:

currentGrid.table.kendoSortable({
filter: filter,
cursor: "move",
ignore: ignore,
hint: $.noop,
//hint: function (element) { //customize the hint
// return element.clone().addClass("hint");
//},
placeholder: function (element) {
return element.clone().addClass("k-state-hover").css("opacity", 0.65);
},...............

How can I remove it and re-add it dynamically, say on addSortable and removeSortable radio button click events.

Thanks.

19 Answers, 1 is accepted

answered on 05 Oct 2015, 06:14 PM

kendosortabledestroy.png

I tried this and it does not remove the dragDrop (kendoSortable widget) feature from the grid. I am making this change on GridDataBound Event. Am I doing something wrong - please see attached code.

Thanks,

answered on 13 Oct 2015, 03:14 PM

I tried in the way you suggested, but the only difference with my approach is I am using AngularJS. In your example, if I am not wrong, I see that the grid gets created every time the 'Toggle Sortable' button is clicked. In my case, I am not creating the grid every time on the radio button click events.

My Grid is defined as below on my html:
<div id="cmGrid"
k-editable="vm.editableOptionsCM"
kendo-grid="cmGrid"
k-on-edit="vm.onCMEdit(kendoEvent)"
k-on-cancel="vm.onCMCancel()"
k-on-remove="vm.onCMDelete(kendoEvent)"
k-on-save="vm.onCMSave(kendoEvent)"
k-sortable="false"
k-data-source="vm.gridDataSourceCM"
k-scrollable="false"
k-columns="vm.nmCMGridColumns"
k-data-bound="vm.cmGridDataBound">
</div>

All the vm objects defined above have the corresponding definitions in my js file.
I have 3 radio buttons: addKendoSortable, removeKendoSortable1, removeKendoSortable2. Initially on the load of the html page, I add the kendoSortable widget only if addKendoSortable is selected, else I add it on the select event of addKendoSortable radio button after the initial load and rebind the grid datasource. The issue here is I am not able to remove the kendoSortable on removeKendoSortable1, removeKendoSortable2 select events with the destroy() code you provided. Can you please provide with an example with AngularJS or do I have to go with the jQuery way to implement this functionality.

When addKendoSortable radio button is selected, I call the function to add the kendoSortable on the GridDataBound event

(see below code).

vm.cmGridDataBound = function (e) {
            var currentGrid = e.sender;

            if (when addKendoSortable radio is selected) {
                sortGrid(currentGrid, ">tbody >tr", "#cmGrid tbody", "");
            }
}

function sortGrid(currentGrid, filter, container, ignore) {
            currentGrid.table.kendoSortable({
                filter: filter,
                cursor: "move",
                ignore: ignore,
                hint: $.noop,

                placeholder: function (element) {
                    return element.clone().addClass("k-state-hover").css("opacity", 0.65);
                },
                container: container,
                change: function (e) {
                    var grid = currentGrid,
                      oldIndex = e.oldIndex, //the old position
                      newIndex = e.newIndex, //the new position
                      view = grid.dataSource.view(),
                      dataItem = currentGrid.dataSource.getByUid(e.item.data("uid")); //retrieve the moved dataItem
                    dataItem.Order = newIndex; //update the order
                    dataItem.dirty = true;
                    //shift the order of the records
                    if (oldIndex < newIndex) {
                        for (var i = oldIndex + 1; i <= newIndex; i++) {
                            view[i].Order--;
                            view[i].dirty = true;
                        }
                    } else {
                        for (var j = oldIndex - 1; j >= newIndex; j--) {
                            view[j].Order++;
                            view[j].dirty = true;
                        }
                    }
                    currentGrid.dataSource.remove(dataItem);
                    currentGrid.dataSource.insert(newIndex, dataItem);

                }
            });
        }

I am able to add the kendoSortable as shown above, but I cannot remove it when removeKendoSortable1 or removeKendoSortable2 radiobuttons are selected.

answered on 31 May 2018, 11:12 AM

Kendo UI grid sortable(or reordering or drag drop rows in grid) not disabled on using kendoSortable destroy jQuery in all scenarios.

I've a scenario in which the grid reordering or drag-drop rows(can be achieved using kendoSortable in kendo UI) should be enabled or disabled.
For ex., if a particular set of columns are sorted or grouped the drag-drop function should be disabled and if one specific column is sorted it should be enabled.
The problem occurs when applying filter to some columns. During filtering if kendoSortable is applied to a column it stays the same even if ("kendoSortable").destroy() is executed i.e the drag-drop functionality should be disabled on executing destroy() only that it wasn't. All it did was return some kinda error while the page was inspected.
Find attachment screen of error with this question or the text of error,

Error in event handler for (unknown): TypeError: Cannot read property 'options' of undefined
at y.<anonymous> (chrome-extension://mgijmajocgfcbeboacabfgobmjgjcoja/content.min.js:16:421)

Attaching the jQuery method(will be invoked from databound event of grid) that implements the function,

KendoCustom.OnSortAndGroup = function (e) {
var grid = e.sender;
if (grid.dataSource.group() && grid.dataSource.group().length > 0
&& grid.dataSource.sort() && grid.dataSource.sort().length > 0) {
grid.tbody.find('>tr').each(
function () {
$(this).css('cursor', 'default');
});

if ($("#RulesGrid").data("kendoSortable")) {
$("#RulesGrid").data("kendoSortable").destroy();
}
}
else if (grid.dataSource.sort() && grid.dataSource.sort().length > 0) {
var col = grid.dataSource.sort();
if (col[0]["field"] == 'Rank' || col[0]["field"] == 'VisualRank') {
grid.tbody.find('>tr').each(
function () {
$(this).css('cursor', 'move');
});

$("#RulesGrid").kendoSortable({
"change": onChangeDrag,
"filter": "table > tbody > tr",
"container": "#RulesGrid tbody",
"cursor": "move",
"hint": noHint,
"placeholder": placeholder
});
}
else {
grid.tbody.find('>tr').each(
function () {
$(this).css('cursor', 'default');
});

if ($("#RulesGrid").data("kendoSortable")) {
$("#RulesGrid").data("kendoSortable").destroy();
}
}
}
}

answered on 31 May 2018, 11:14 AM

I've a scenario in which the grid reordering or drag-drop rows(can be achieved using kendoSortable in kendo UI) should be enabled or disabled.
For ex., if a particular set of columns are sorted or grouped the drag-drop function should be disabled and if one specific column is sorted it should be enabled.
The problem occurs when applying filter to some columns. During filtering if kendoSortable is applied to a column it stays the same even if ("kendoSortable").destroy() is executed i.e the drag-drop functionality should be disabled on executing destroy() only that it wasn't. All it did was return some kinda error while the page was inspected.

The text of error,
Error in event handler for (unknown): TypeError: Cannot read property 'options' of undefined
at y.<anonymous> (chrome-extension://mgijmajocgfcbeboacabfgobmjgjcoja/content.min.js:16:421)

Attaching the jQuery method(will be invoked from databound event of grid) that implements the function,

KendoCustom.OnSortAndGroup = function (e) {
var grid = e.sender;
if (grid.dataSource.group() && grid.dataSource.group().length > 0
&& grid.dataSource.sort() && grid.dataSource.sort().length > 0) {
grid.tbody.find('>tr').each(
function () {
$(this).css('cursor', 'default');
});

if ($("#RulesGrid").data("kendoSortable")) {
$("#RulesGrid").data("kendoSortable").destroy();
}
}
else if (grid.dataSource.sort() && grid.dataSource.sort().length > 0) {
var col = grid.dataSource.sort();
if (col[0]["field"] == 'Rank' || col[0]["field"] == 'VisualRank') {
grid.tbody.find('>tr').each(
function () {
$(this).css('cursor', 'move');
});

$("#RulesGrid").kendoSortable({
"change": onChangeDrag,
"filter": "table > tbody > tr",
"container": "#RulesGrid tbody",
"cursor": "move",
"hint": noHint,
"placeholder": placeholder
});
}
else {
grid.tbody.find('>tr').each(
function () {
$(this).css('cursor', 'default');
});

if ($("#RulesGrid").data("kendoSortable")) {
$("#RulesGrid").data("kendoSortable").destroy();
}
}
}
}