Telerik Forums
UI for ASP.NET MVC Forum
3 answers
179 views

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>

 

 

 

 

Irving
Top achievements
Rank 1
 answered on 07 Mar 2019
8 answers
187 views

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"))
            )

Edward
Top achievements
Rank 1
 answered on 28 Feb 2019
10 answers
565 views

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)
 
)
Tsvetomir
Telerik team
 answered on 08 Feb 2019
3 answers
84 views

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.

 

Georgi
Telerik team
 answered on 26 Oct 2018
2 answers
98 views

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

erwin
Top achievements
Rank 1
Veteran
Iron
 answered on 24 Aug 2018
1 answer
890 views

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!

Georgi
Telerik team
 answered on 22 Aug 2018
10 answers
592 views

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?

Mike
Top achievements
Rank 1
 answered on 09 Aug 2018
1 answer
985 views

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

 

Attila Antal
Telerik team
 answered on 20 Jul 2018
10 answers
583 views

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?

Viktor Tachev
Telerik team
 answered on 27 Jun 2018
4 answers
504 views

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

Stefan
Telerik team
 answered on 20 Jun 2018
Narrow your results
Selected tags
Tags
+? more
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?