I have inline edit feature in my kendo grid, i newly introduce Drag and Drop feature for this grid..But after introduced that feature, My inline edit textbox seems like not editable... It might be due to some style changes... Please help me to find the issue....i attach my jquery code to implement the feature of drag and drop
$.fn.reverse = [].reverse;
$(document).ready(function () {
var mainGrid = $("#grid_Task").data("kendoGrid");
var mainDataSource = $("#grid_Task").data("kendoGrid").dataSource;
var selectedClass = 'k-state-selected';
$(document).on('click', '#grid_Task tbody tr', function (e) {
if (e.ctrlKey || e.metaKey) {
$(this).toggleClass(selectedClass);
} else {
$(this).addClass(selectedClass).siblings().removeClass(selectedClass);
}
});
mainGrid.table.kendoDraggable({
filter: "tbody tr",
group: "gridGroup",
axis: "y",
hint: function (item) {
var helper = $('<div class="k-grid k-widget drag-helper"/>');
if (!item.hasClass(selectedClass)) {
item.addClass(selectedClass).siblings().removeClass(selectedClass);
}
var elements = item.parent().children('.' + selectedClass).clone();
item.data('multidrag', elements).siblings('.' + selectedClass).remove();
return helper.append(elements);
}
});
mainGrid.table.kendoDropTarget({
group: "gridGroup",
drop: function (e) {
var draggedRows = e.draggable.hint.find("tr");
var target = mainDataSource.getByUid($(e.draggable.currentTarget).data("uid"));
e.draggable.hint.hide();
var dropLocation = $(document.elementFromPoint(e.clientX, e.clientY)),
dropGridRecord = mainDataSource.getByUid(dropLocation.parent().attr("data-uid"));
if (dropLocation.is("th")) {
return;
}
var beginningRangePosition = mainDataSource.indexOf(dropGridRecord),//beginning of the range of dropped row(s)
rangeLimit = mainDataSource.indexOf(mainDataSource.getByUid(draggedRows.first().attr("data-uid")));//start of the range of where the rows were dragged from
//if dragging up, get the end of the range instead of the start
if (rangeLimit > beginningRangePosition) {
draggedRows.reverse();//reverse the records so that as they are being placed, they come out in the correct order
}
//assign new spot in the main grid to each dragged row
draggedRows.each(function () {
var thisUid = $(this).attr("data-uid"),
itemToMove = mainDataSource.getByUid(thisUid);
mainDataSource.remove(itemToMove);
mainDataSource.insert(beginningRangePosition, itemToMove);
});
//set the main grid moved rows to be dirty
draggedRows.each(function () {
var thisUid = $(this).attr("data-uid");
mainDataSource.getByUid(thisUid).set("dirty", true);
});
//remark things as visibly dirty
var dirtyItems = $.grep(mainDataSource.view(), function (e) { return e.dirty === true; });
for (var a = 0; a < dirtyItems.length; a++) {
var thisItem = dirtyItems[a];
mainGrid.tbody.find("tr[data-uid='" + thisItem.get("uid") + "']").find("td:eq(0)").addClass("k-dirty-cell");
mainGrid.tbody.find("tr[data-uid='" + thisItem.get("uid") + "']").find("td:eq(0)").prepend('<span class="k-dirty"></span>');
};