I have 2 Kendo UI Listboxes, I am not able to drag items from Model.PTLUser.RolesToRemove to the other listbox. I dont see any javascript errors in the console. My code currently looks like this.
<
div
role
=
"application"
class
=
""
id
=
"RolesList"
>
@(Html.Kendo().ListBox()
.Name("Model.PTLUser.RolesToRemove")
.DataValueField("RoleName")
.DataTextField("RoleName")
.Draggable(true)
.DropSources("Model.PTLUser.RolesToAssign")
.ConnectWith("Model.PTLUser.RolesToAssign")
.BindTo(Model.RolesAvailable)
.Selectable(ListBoxSelectable.Single)
)
@(Html.Kendo().ListBox()
.Name("Model.PTLUser.RolesToAssign")
.DataValueField("RoleName")
.DataTextField("RoleName")
.Draggable(true)
.DropSources("Model.PTLUser.RolesToRemove")
.ConnectWith("Model.PTLUser.RolesToRemove")
.BindTo(new List<
string
>())
.Selectable(ListBoxSelectable.Single)
)
</
div
>
Have listbox...
Works fine... chrome, edge... but on IE 11 scrolling does not seem to work... have to use the up/down arrows...
@(Html.Kendo().DropDownList()
.Name("admin_tableName")
.DataTextField("Text")
.DataValueField("Text")
.OptionLabel("- Select -")
.DataSource(source => source
.Custom()
.Transport(transport => transport
.Read(read => read.Action("GetTableNames", "Admin"))
)
)
.HtmlAttributes(new { style = "width: 100%" })
.Events(e => e.Change("admin_tablename_change"))
)
Hi, this seems like it should be easy to do, but all the suggestions I've tried have failed. I simply want to move items from searchResults to Assigned when the user double clicks on an item in searchResults. The examples I've seen have all been for Kendo for Jquery and I keep getting errors on the "wrapper" piece.
Any help would be appreciated.
@(Html.Kendo().ListBox()
.Name("searchResults")
.BindTo(new List<
TPResourceVM
>())
.DataValueField("Id")
.DataTextField("FullName")
.HtmlAttributes(new { style = "height:600px;width:40%" })
.Toolbar(toolbar =>
{
toolbar.Position(Kendo.Mvc.UI.Fluent.ListBoxToolbarPosition.Right);
toolbar.Tools(tools => tools
.TransferTo()
.TransferFrom()
);
})
.Selectable(ListBoxSelectable.Multiple)
.ConnectWith("assigned")
)
@(Html.Kendo().ListBox()
.Name("assigned")
.HtmlAttributes(new { style = "height:600px;width:40%" })
.DataValueField("Id")
.DataTextField("FullName")
.Selectable(ListBoxSelectable.Multiple)
)
Telerik UI for ASP.NET MVC
I have wrongly assumed that the ListBox would work the same or similar to the grid.
I have created and populated a ListBox
cshtml..
@(Html.Kendo().ListBox()
.Name(componentName: "lstRewindRolls")
.Selectable(ListBoxSelectable.Single)
.HtmlAttributes(new { tabindex = -1, @class = "k-listbox", style = "background-color:black; color:white; height:450px" })
.DataValueField("DoffID")
.DataTextField("RollID")
.DataSource(dataSource => dataSource
.Read(read => read.Action(actionName: "GetRolls", controllerName: "Rewind").Data("{ DispositionCode: 'R' }"))
)
.Events(events=> events.Change("RewindRollSelected"))
)
controller...
public
JsonResult GetRolls(
string
DispositionCode)
{
try
{
var result = db.tblRolls.Where(r => r.strDispositionCode == DispositionCode && r.dtmInventoryRemoved ==
null
)
.Join(db.tblProductSKUs, p => p.lngProductSKUID, q => q.lngProductSKUID, (r, q) =>
new
{ r, q })
.Join(db.tblProducts, s => s.q.lngProductID, t => t.lngProductID, (s, t) =>
new
{ s, t })
.Select(o =>
new
{
DoffID = o.s.r.lngDoffID.ToString(),
LaneID = o.s.r.strLaneID,
RollID = o.s.r.lngDoffID.ToString() + o.s.r.strLaneID
}).OrderBy(t =>
new
{ t.DoffID, t.LaneID }).ToList();
;
return
Json(result, JsonRequestBehavior.AllowGet);
}
catch
(Exception ex)
{
...
}
When the page loads the ListBox is populated as expected.
Once I have processed an item in the list, if appropriate (the disposition changed) I want it removed from the list.
I thought I could simply do a dataSource.read()
var lstBox = $("#lstRewindRolls").data("kendoListBox");
lstBox.dataSource.read();
I also tried
var lstBox = $("#lstRewindRolls").data("kendoListBox");
lstBox.dataSource.read({ DispositionCode: 'R' });
I cannot seem to get it to work.
Please help.
Hi,
I'm trying to minimize the height of the listbox because of layout restrictions. Played around with css (beginner here) a little but need help on how I can reduce the spacing between toolbar buttons so that I can further reduce the height - see attached image?
(Bootstrap 4 styling)
Kind regards
Erwin
Hi, I'm using a ListBox with a template.
<script id="roleChoiceTemplate" type="text/x-kendo-template">
<div class="row"><div class="col-sm-9"> #: data.RoleName #</div> <div class="col-sm-3">#: data.RoleNeedsAttention == true ? 'Y' : ''#</div></div>
</script>
@(Html.Kendo().ListBox()
.Name("roleChoices")
.DataTextField("RoleName")
.DataValueField("RoleName")
.TemplateId("roleChoiceTemplate")
.HtmlAttributes(new { style = "width: 100%; overflow: hidden;" })
.DataSource(source => source
.Read(read => read.Action("GetRoles", "Home"))
)
)
As is, this works fine, but instead of displaying a 'Y' in the template when the value is true, I want to display a formatted span like <span class=\'needsAttention\'>Attention</span>. When I try to do this, I either see the text '<span>...' or with different alterations I get an invalid template javascript error. Can you help me get the syntax right because I'm out of ideas.
Thanks!
In my application, I need to assign items to groups. I would like to use the ListBox widget (https://demos.telerik.com/aspnet-mvc/listbox) because I like its built-in transfer controls. This would allow me to display the unassigned items in one ListBox, the assigned items in another ListBox, and then transfer the items from Unassigned to Assigned, or vice versa.
However, I may have several thousand items in a list and I doubt it would be performant for the ListBox to show all of these at once. Is there a way to add paging to the ListBox? If not, is there a different widget you would suggest? I did see a StackOverflow article where someone used two Kendo grids for this purpose. If that is the best option, do you have a complete example?
I would like to get the selected values of the listbox in the POST method of my controller once the form is submitted but I haven't figured out how (it's always just coming in null). To help me out, how would I get the selected values of the "selected" listbox in the example here:
https://demos.telerik.com/aspnet-mvc/listbox
Thanks,
Dave
I have a listbox pair, and I am removing an item or items from one and transferring them to the other. Some code is executed when this is done.
The problem is that the ListBox selects an item in the list when the transfer is done, and this is not what I want it to do.
I have tried to use javascript to unselect all items in the list to no avail.
<
div
style
=
"width:100%;"
>
<
div
style
=
"width:50%;float:left;"
>
@(
Html.Kendo()
.ListBox()
.Name("NotReviewers")
.DataTextField("FullName")
.DataValueField("user_name")
.TemplateId("itemTemplate")
.ConnectWith("Reviewers")
.HtmlAttributes(new { style = "width:100%;" })
.Selectable(ListBoxSelectable.Multiple)
.Toolbar(toolbar =>
{
toolbar.Position(Kendo.Mvc.UI.Fluent.ListBoxToolbarPosition.Right);
toolbar.Tools(
tools => tools
.Remove()
.TransferAllFrom()
.TransferAllTo()
.TransferFrom()
.TransferTo()
);
}
)
.BindTo((System.Collections.IEnumerable)ViewBag.nonreviewers)
)
</
div
>
<
div
style
=
"width:50%;float:right;"
>
@(
Html.Kendo()
.ListBox()
.HtmlAttributes(new { style = "width:100%;" })
.Name("Reviewers")
.Events( events=>{
events.Add("AddReviewer");
events.Remove("RemoveReviewer");
}
)
.TemplateId("itemTemplate")
.DataTextField("FullName")
.DataValueField("user_name")
.ConnectWith("NotReviewers")
.Selectable(ListBoxSelectable.Multiple)
.BindTo((System.Collections.IEnumerable)ViewBag.reviewers)
)
</
div
>
</
div
>
I use the following javascript to handle the transfer:
function AddReviewer(e)
{
var dataItems = e.dataItems;
var url = window.location.href.replace("Requestors", "AddRequestor");
if (dataItems.length > 0) {
for (var i = 0; i < dataItems.length; i++) {
var dataItem = dataItems[i];
$.ajax({
url: url,
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ user_name: dataItem.user_name }),
async: false,
processData: false,
cache: false,
error: function (xhr) {
}
});
}
}
var reviewers = document.getElementById("Reviewers");
for ( i = 0; i < reviewers.options.length; i++) {
reviewers.options[i].selected = false;
}
var notreviewers = document.getElementById("NotReviewers");
for (i = 0; i < notreviewers.options.length; i++) {
notreviewers.options[i].selected = false;
}
reviewers.value = "";
notreviewers.value = "";
reviewers.selectedIndex = -1;
notreviewers.selectedIndex = -1;
reviewers.blur();
notreviewers.blur();
return true;
}
None of the section of the code that I am using to remove the selection works.
The other javascript callback works in a similar manner.
Does anyone have any suggestions on how to remove the selection from the listbox once the work is done?
Accessing the Selected DataText and DataValue
Please help...
@(Html.Kendo().ListBox()
.HtmlAttributes(new { title = "Accounts"})
.Name("ListAccounts")
.DataTextField("AccountName")
.DataValueField("AccountID")
.BindTo(Model)
.Events(events => events.Change("onChange"))
)
<script>
function onChange(e) {
var
value =
$("#ListAccounts").data("kendoListBox").dataSource._data[$("#ListAccounts").data("kendoListBox").selectedIndex].value;
GetFleetAssets(value);
}
</script>
How can i get the DataValueField "AccountID" for the selected item within an Event Script? I can see that the data is loaded by viewing the source.
script above does not function