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

KendoUI drag and drop rearranging + drag and drop between grids.

6 Answers 455 Views

Grid

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

6 Answers, 1 is accepted

answered on 23 May 2013, 05:39 PM

I saw your other post and my original reply to that one only dealt with sorting within a single grid. I've figured out how to do the sorting within each grid and across two different grids in both directions. In all cases, you need the JQuery UI plugin - it's not an out-of-the-box Kendo function. I've included all my code so you can see how I've set it up. Hopefully this will help you or someone else in the future. Documentation on this stuff is abysmal!

<div style="width: 75%; display: inline-block; float: left;">

<h2>Just Posted</h2>

@(Html.Kendo().Grid(Model.JustPosted)

.Name("justposted-grid")

.Columns(columns =>

{

columns.Bound(e => e.Name)

.Title("highlighted documents on the home page");

columns.Bound(e => e.PostingDate)

.Title("posting date")

.HeaderHtmlAttributes(new { @class = "dateColumn" });

columns.Bound(e => e.Id)

.Title("")

.HeaderHtmlAttributes(new { @class = "iconColumn" });

})

.ClientRowTemplate(

"<tr class='#: CssClass#' data-id='#: Id#' data-index='#: Index#'>" +

"<td>#= Name#</td>" +

"<td class='dateColumn'>#= kendo.toString(PostingDate, 'MM/dd/yyyy')#</td>" +

"<td class='iconColumn'><a href='/Admin/RecentPostings/View/#: Id#'><img src='/images/admin/_view.gif' /></a></td>" +

"</tr>"

)

.TableHtmlAttributes(new { @id = "justposted-table", @class = "sortable" })

.Sortable()

.Scrollable(scrolling => scrolling.Enabled(false))

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("GetJustPosted", "RecentPostings", new { area = "Admin" }))

)

<h2>Recent Documents</h2>

@(Html.Kendo().Grid(Model.RecentDocuments)

.Name("recentdocs-grid")

.Columns(columns =>

{

columns.Bound(e => e.Name)

.Title("documents 'approved' in the last 28 days");

columns.Bound(e => e.PostingDate)

.Title("posting date")

.HeaderHtmlAttributes(new { @class = "dateColumn" });

columns.Template(e => e.Id)

.Title("")

.HeaderHtmlAttributes(new { @class = "iconColumn" });

})

.ClientRowTemplate(

"<tr class='#: CssClass#' data-id='#: Id#' data-index='#: Index#'>" +

"<td>#= Name#</td>" +

"<td class='dateColumn'>#= kendo.toString(PostingDate, 'MM/dd/yyyy')#</td>" +

"<td class='iconColumn'><a href='/Admin/RecentPostings/View/#: Id#'><img src='/images/admin/_view.gif' /></a></td>" +

"</tr>"

)

.TableHtmlAttributes(new { @id = "recentdocs-table", @class = "sortable" })

.Sortable(sorting => sorting.Enabled(true))

.Scrollable(scrolling => scrolling.Enabled(false))

.Pageable(paging => paging.Enabled(true))

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("GetRecentDocuments", "RecentPostings", new { area = "Admin" }))

.PageSize(10)

)

</div>

<div class="help" style="width: 20%; float: right;">

<h2>Help</h2>

<ul>

<li

>To select an item to appear in the Just Posted section on the home page, drag that item from the "Recent Documents" list to the "Just Posted" list and drop it in the appropriate position.</

li>

<li

>To remove an item from the Just Posted section on the home page, drag that item from the "Just Posted" list and drop it anywhere in the "Recent Documents" list.</

li>

<li>You may drag and drop items in the "Just Posted" list to reorder them.</li>

</ul>

</div>

<div class="clear"></div>

The corresponding Javascript is here:

<script type="text/javascript">

$(function () {

configureSortableRows();

$("#justposted-table,#recentdocs-table").sortable({

items: 'tr',

connectWith: '.sortable',

helper: fixHelperModified,

}).disableSelection();

// This function handles when an item is moved from the recent docs table to the just posted table

$("#justposted-table").bind("sortreceive", function (event, ui) {

var confirmationText = 'Are you sure you want to move ' + $(ui.item).find(">:first-child").text();

var destinationIndex = $(ui.item).index();

if (destinationIndex == 0) {

confirmationText = confirmationText + ' first';

}

else {

if (destinationIndex == $("#justposted-table tbody tr").length - 1) {

confirmationText = confirmationText + ' last';

}

else {

confirmationText = confirmationText + ' above ' + $("#justposted-grid tbody tr[data-index='" + (destinationIndex) + "']").find(">:first-child").text();

}

confirmationText = confirmationText + ' in Recent Postings?';

if (confirm(confirmationText)) {

$("#justposted-grid").data("kendoGrid").refresh();

}

else {

$("#recentdocs-table").sortable('cancel');

}

});

// This function handles when an item is sorted within the just posted table

$("#justposted-table").bind("sortupdate", function (event, ui) {

if ($(ui.item).parent().parent().attr('id') == 'justposted-table' && $(ui.sender).attr('id') != 'recentdocs-table') {

var confirmationText = 'Are you sure you want to move ' + $(ui.item).find(">:first-child").text();

var destinationIndex = $(ui.item).index();

if ($(ui.item).data('index') < ($(ui.item).index())) {

confirmationText = confirmationText + ' below ';

}

else {

confirmationText = confirmationText + ' above ';

}

var destination = $("#justposted-grid tbody tr[data-index='" + (destinationIndex) + "']");

confirmationText = confirmationText + $(destination).find(">:first-child").text() + '?';

if (confirm(confirmationText)) {

$("#justposted-grid").data("kendoGrid").refresh();

}

else {

$("#justposted-table").sortable('cancel');

}

});

// This function handles when an item is sorted within the recent docs table (nothing happens - this isn't allowed)

$("#recentdocs-table").bind("sortupdate", function (event, ui) {

if ($(ui.item).parent().parent().attr('id') == 'recentdocs-table' && $(ui.sender).attr('id') != 'justposted-table') {

event.preventDefault();

}

});

// This function handles when an item is moved from the just posted table to the recent docs table

$("#recentdocs-table").bind("sortreceive", function (event, ui) {

if (confirm('Are you sure you want to remove ' + $(ui.item).find(">:first-child").text() + ' from Recent Postings?')) {

$("#recentdocs-grid").data("kendoGrid").refresh();

}

else {

$("#justposted-table").sortable('cancel');

}

});

var fixHelperModified = function (e, tr) {

var $originals = tr.children();

var $helper = tr.clone();

$helper.children().each(function (index) {

$(this).width($originals.eq(index).width());

});

return $helper;

};

function configureSortableRows() {

$("tbody tr").hover(function () {

$(this).css('cursor', 'move');

});

}

</script>

Note: in my particular instance, sorting was only allowed in the top table and not the bottom one. You can see in the code were I disabled the sorting.

answered on 23 May 2013, 08:26 PM

Went through svn, got my old code that worked with KendoUI. This is the script for 3 tables: Tables, Fields and FieldsToExport (which was given the internal name charonFormat)

 

<script type="text/javascript"> 

 

$("#fieldGrid").delegate("tbody>tr", "dblclick", 

function () { 

transferField(); 

}); 

 

$("#FieldsToExport").delegate("tbody>tr", "dblclick", 

function () { 

transferCharonFormattedField(); 

}); 

 

$("#incrementalSearch").keyup(function () { 

var newVal = $("#incrementalSearch").val().toUpperCase(); 

$("#Tables").data("kendoGrid").dataSource.filter({ field: "TableName", operator: "startswith", value: newVal }); 

}); 

 

function moveCharonRowUp() { 

var charonGrid = $('#FieldsToExport').data("kendoGrid"); 

var selectedRow = charonGrid.select(); 

var list = charonGrid.dataSource.data(); 

 

var selectedItem; 

selectedRow.each(function () { 

selectedItem = charonGrid.dataItem($(this)); 

}); 

 

var selectedIndex = list.indexOf(selectedItem); 

 

if (selectedIndex == 0 || selectedItem == undefined) { 

return; 

} 

 

switchRows(list, selectedIndex, selectedIndex - 1, selectedItem); 

 

$('.charonFormatGrid tbody tr:nth-child(' + selectedIndex + ')').addClass('k-state-selected'); 

} 

 

function moveCharonRowDown() { 

var charonGrid = $('#FieldsToExport').data("kendoGrid"); 

var list = charonGrid.dataSource.data(); 

var selectedItem; 

charonGrid.select().each(function () { 

selectedItem = charonGrid.dataItem($(this)); 

});//todo remove 

 

var selectedIndex = list.indexOf(selectedItem); 

 

if (selectedIndex == list.length-1 || selectedItem == undefined) { 

return; 

} 

 

var nextRowToHighlight = selectedIndex + 2; 

 

switchRows(list, selectedIndex, selectedIndex + 1, selectedItem); 

 

$('.charonFormatGrid tbody tr:nth-child(' + nextRowToHighlight + ')').addClass('k-state-selected'); 

} 

 

function switchRows(list, sourceRow, destinationRow, selectedItem) { 

list.splice(sourceRow, 1); 

list.splice(destinationRow, 0, selectedItem); 

} 

 

function transferAllFields() { 

var fieldGrid = $("#Fields").data("kendoGrid"); 

var charonGrid = $("#FieldsToExport").data("kendoGrid"); 

var fields = fieldGrid.dataSource.data(); 

var charonfields = charonGrid.dataSource.data(); 

var emptyList = new Array(); 

 

var fullList = new Array(); 

 

for (var j = 0; j < charonfields.length; j++) { 

fullList.push(charonfields[j]); 

} 

for (var i = 0; i < fields.length; i++) { 

fullList.push(fields[i]); 

} 

 

fieldGrid.dataSource.data(emptyList); 

charonGrid.dataSource.data(fullList); 

}; 

 

function transferAllCharonFormattedFields() { 

var fieldGrid = $("#Fields").data("kendoGrid"); 

var charonGrid = $("#FieldsToExport").data("kendoGrid"); 

var fields = fieldGrid.dataSource.data(); 

var charonfields = charonGrid.dataSource.data(); 

 

if (charonfields.length == 0) { 

return; 

} 

var emptyList = new Array(); 

 

var fullList = new Array(); 

 

for (var i = 0; i < fields.length; i++) { 

fullList.push(fields[i]); 

} 

for (var j = 0; j < charonfields.length; j++) { 

fullList.push(charonfields[j]); 

} 

 

fieldGrid.dataSource.data(fullList); 

charonGrid.dataSource.data(emptyList); 

 

fieldGrid.dataSource.sort([{ field: "FieldDefinition.IsAutoGenerated", dir: "desc" }, { field: "FieldDefinition.IsKeyField", dir: "desc" }, { field: "FieldDefinition.FieldName", dir: "asc" }]);<

br>

}; 

 

function transferCharonFormattedField() { 

var fieldsGrid = $("#Fields").data("kendoGrid"); 

var charonExportGrid = $("#FieldsToExport").data("kendoGrid"); 

 

transferBetweenTables(charonExportGrid, fieldsGrid); 

 

var rowPosition =  fieldsGrid.dataSource.sort([{ field: "FieldDefinition.IsAutoGenerated", dir: "desc" }, { field: "FieldDefinition.IsKeyField", dir: "desc" }, { field: "FieldDefinition.FieldName", dir: "asc" }]);<

br>

if (rowPosition != 0) { 

$($('#FieldsToExport tbody tr')[rowPosition]).addClass("k-state-selected"); 

} 

 

function transferField() { 

var fieldsGrid = $("#Fields").data("kendoGrid"); 

var charonExportGrid = $("#FieldsToExport").data("kendoGrid"); 

 

var rowPosition = transferBetweenTables(fieldsGrid, charonExportGrid); 

if (rowPosition != 0) { 

$($('#Fields tbody tr')[rowPosition]).addClass("k-state-selected"); 

} 

 

function transferBetweenTables(sourceTable, destinationTable) { 

var toAdd = sourceTable.dataItem(sourceTable.select()); 

var toRemove = toAdd; 

var rowPosition = sourceTable.select().prevAll().length; 

 

destinationTable.dataSource.data().splice(0, 0, toAdd); 

 

var index = sourceTable.dataSource.data().indexOf(toRemove); 

sourceTable.dataSource.data().splice(index, 1); 

 

return rowPosition; 

 

} 

 

function formatCells() { 

$("#Fields tbody tr").each(function() { 

var currentRow = $(this); 

var currentRowItem = $("#Fields").data("kendoGrid").dataItem($(this)); 

if (currentRowItem.FieldDefinition.IsAutoGenerated) { 

currentRow.addClass('fieldIsAutoGenerated'); 

} 

if (currentRowItem.FieldDefinition.IsKeyField) { 

currentRow.addClass('fieldIsPrimaryKey'); 

} 

}); 

} 

 

function tableSelected() { 

$("#FieldsToExport").data("kendoGrid").dataSource.read(); 

$("#Fields").data("kendoGrid").dataSource.read(); 

} 

 

function retrieveFieldData() { 

var result = $('#Tables').data('kendoGrid').select()[0].textContent; 

return { 

tableName: result 

}; 

} 

</script>