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.
Although that the ListBox is similar to the MultiSelect, at the moment it does not have such model binding, because it is also comparable with the data management widgets and for the initial release of the ListBox our developers decided to consider the model binding only if there is demand for it. With that in mind, you could create a feature request in our public portal for that feature: http://www.telerik.com/forums/listbox-bind-to-model-view
Hi Team,
I would like to request the functionality for the user to be able to type a specific letter while focused on the Kendo UI ListBox to navigate to the first selection.
Thank you!