Hello,
We are using 2 list boxes (ASP.NET MVC Kendo ListBox)
Left and Right, and right list box can have duplicate values:
When we
are arranging the items using move up and move down buttons. We are
unable to get the selected items in the order that they appear in the
list box.
<tr>
<td>
@(Html.Kendo().ListBox()
.Name("lstallUsers")
.ConnectWith("assigned")
.DataTextField("NameWithDivision")
.DataValueField("UserId")
.HtmlAttributes(new { style = "height:350px;width:350px" })
.Template(Html.ProfilePic("#: data.FileName #", null, "#: data.NameWithDivision #").ToHtmlString())
//.ValueTemplate(Html.ProfilePic("#: data.FileName #", null, " #: data.Name # ").ToHtmlString())
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetAllApproverUsers", "Workflow", new { area = "Scms", id = Model.FormMasterId });
});
})
)
</td>
<td valign="top">
<button type="button" class="btn btn-primary black-background white" id="transfer-left" onclick="onRightClick()"><span class="fa-lg"> > </span> </button> <br /><br />
<button type="button" class="btn btn-primary btn-md" id="transfer-right" onclick="onLeftClick()"><span class="fa-lg"> < </span></button>
</td>
<td width="20%">
@(Html.Kendo().ListBox()
.Name("assigned")
.DataTextField("NameWithDivision")
.DataValueField("UserId")
.HtmlAttributes(new { style = "height:350px;width:350px" })
.Template(Html.ProfilePic("#: data.FileName #", null, "#: data.NameWithDivision #").ToHtmlString())
.Toolbar(toolbar =>
{
toolbar.Position(Kendo.Mvc.UI.Fluent.ListBoxToolbarPosition.Right);
toolbar.Tools(tools => tools
.MoveUp()
.MoveDown()
);
})
//.Events(events => events
// .Reorder("onMove")
// )
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetAssignedUsers", "Workflow", new { @area = "Scms", id = Model.FormMasterId });
});
})
)
</td>
<script>
function onRightClick() {
var listbox1 = $("#lstallUsers").data("kendoListBox");
var listbox2 = $("#assigned").data("kendoListBox");
if (listbox1.select().length > 0) {
listbox2.add(listbox1.dataItem(listbox1.select()));
//listbox1.remove(listbox1.select());
console.log(listbox2.select());
}
else {
// showMessage("Left ListBox should have selected item!");
}
}
function onLeftClick() {
var listbox1 = $("#lstallUsers").data("kendoListBox");
var listbox2 = $("#assigned").data("kendoListBox");
if (listbox2.select().length > 0) {
listbox1.add(listbox2.dataItem(listbox2.select()));
listbox2.remove(listbox2.select());
console.log(listbox2.select());
}
else {
// showMessage("Right ListBox should have selected item!");
}
}
</script>
Here is a possible workaround suggested by Telerik Team:
1. Attach a Reorder event handler to the second ListBox:
.Events(ev => ev.Reorder("onReorder"))2. In the event handler you can add the following logic:
function onReorder(e) {
e.preventDefault();
var dataSource = e.sender.dataSource;
var dataItem = e.dataItems[0]
var itemElement = e.sender.wrapper.find("[data-uid='" + dataItem.uid + "']");
var index = dataSource.indexOf(dataItem) + e.offset;
e.sender.remove(itemElement);
setTimeout(function () {
dataSource.insert(index, dataItem);
}, 100)
}The logic removes the item and inserts a dataItem at the respective new index in the dataSource.
However, this workaround is not perfect and will have a side effect: the selection of the item is lost. This means that the user has to re-select the item if they want to re-order it again.
Rather then working around it, it would be better to have this functionality built-in in the ListBox.
Thank you.