Telerik Forums
UI for ASP.NET Core Forum
0 answers
145 views
I'm using two related listboxes to transfer data from one list to another.  In my backend, when I reference Request.Form["lstAssociated"] I can get a list of the id's from the listbox that contains the item I selected to send to the other list, however, I don't see anywhere in the data how I can obtain the ID of just the item I have selected.  We are using Razor forms.
Danielle
Top achievements
Rank 1
Iron
 asked on 14 Mar 2023
1 answer
151 views

I have

@(Html.Kendo().TreeView()
    .Name("treeviewAvail")

...and...

 @(Html.Kendo().ListBox()
      .Name("listboxAvail")

How can I 'have both of those so that I can drag/drop from either into another list box?  (It's not needed to go the other way.)

@(Html.Kendo().ListBox()
    .Name("listboxSelected")

 

I've seen this topic, but it does not handle what I need for TreeView too

https://www.telerik.com/forums/listbox-drag-and-drop-1557506

 

Alexander
Telerik team
 answered on 31 Jan 2023
1 answer
83 views

Hi

We are having a grid with editable field option which triggers when you click on the field.

I wanted to enable tab functionality so that if you are on any field and click tab it should make the next field enable/editable.

When I am clicking on any field to show like this. On tab press I wanted make Charlotte editable.

ANY help appreciated. Thanks!

1 answer
43 views

Right now, I have a ListBox on a ASP.NET Core MVC application that has some "clonky" behavior.  When I press the "Up/Down" arrows to reorder the contents of the ListBox, it redirects over to the controller then loads an "Edit" view then when I save the Edit result (item index) and it directs back to the view with the ListBox.  This is not a good user experience.

Instead, I want to push the up/down arrow and have it perform the update without it redirecting over to the Controller/Edit page.  How do I accomplish this?

 


                <div class="container">
                    @(Html.Kendo().ListBox()
                        .Name("listBox")
                        .DataTextField("Name")
                        .DataValueField("Id")
                        .DataSource(source =>
                            source.Read(read =>
                                read.Action("IndexJson", "SessionOptionItems").Data("gridGetData"))
                        )
                        .TemplateId("item-template")
                        .Toolbar(toolbar =>
                        {
                            toolbar.Position(ListBoxToolbarPosition.Right);
                            toolbar.Tools(tools => tools
                                .MoveUp()
                                .MoveDown()
                                .Remove()
                                );
                        })
                        .Events(events => events
                            .Reorder("onReorder")
                            .Remove("onRemove"))
                        .HtmlAttributes(new { style = "height:550px;width:530px" })
                        .BindTo(new List<SessionOptionTemplate>()))
                </div>


    function onReorder(e) {
        //alert("onReorder");

        $("#isbusy").show();

        var dataSource = e.sender.dataSource;
        var element = e.sender.select();
        var dataItem = e.sender.dataItem(element[0]);

        //alert("id: " + dataItem.Id);
        //alert("name: " + dataItem.Name);

        var index = dataSource.indexOf(dataItem) + e.offset;

        //alert("index: " + index);

        var url = '@Url.Action("Edit", "SessionOptionItems")?id=' + dataItem.Id + '&order=' + index + '@Model.GetUrlParameters("&")';
        // Replace &amp with & as the above encoding step changes & to &amp.
        window.location.href = url.replace(/&amp;/g, "&");
    }

Stoyan
Telerik team
 answered on 22 Sep 2022
1 answer
76 views

This demo with 2 list boxes and the transfer buttons is the exact use case that I have. I'm trying to make it less work for the users since there will be several employees to select. I would like to avoid having to click the transfer button after clicking each employee or having to remember to control click to select more than one.

I tried to use a template to make the items checkboxes, but the checkboxes were rendered as text fields.

I also tried defining the change event to click on the transferTo link whenever an item is selected.

$('a[data-command="transferTo"]').click();

When an item is clicked, ALL of the list items are transferred instead of the one that was clicked.

Is there any way to do either of the following?

1. Make the list items checkboxes. Clicking the transfer button will transfer all of the checked items.

2. Transfer an item to the other listbox when it is clicked.

If not I think I will use plain HTML select elements.

Thanks

 

Stoyan
Telerik team
 answered on 30 Aug 2022
1 answer
186 views

Is there a way to drag and drop from one ListBox to any number of other ListBoxes? I have a use case where I have a list of items and I want to be able to drag those items to any one of multiple other ListBoxes to assign them to a group. The documentation and examples show being able to drag to ony one other ListBox.  

Has anyone done this before and can point me to some example code?

 

Thank you!

Aleksandar
Telerik team
 answered on 17 Mar 2022
1 answer
136 views

Hello,

I create a ListBox that I bind to a list of SelectListItem. In this list i use the Group property. But i don't know how to render groups in Html.Kendo().ListBox()

I'm using mvc core and Telerik.UI.for.ASP.Net.Core version 2021.2.511 package

 

Regards

 

Tsvetomir
Telerik team
 answered on 05 Jul 2021
3 answers
316 views

I have a ListBox with a Row Template that contains a Button.  There is no guarantee that the user will press the button for the "selected" item in the ListBox.  So, I need to capture the Data Item in the ListBox that is related to the button that was pressed.  How do I accomplish this?  

Thanks for your help, 

Joel

Note:  My goDetail script currently just grabs the listBox control and posts for the selected item.  It doesn't post based on the Row that contained the Button that fired the event.

        <div class="container">
            @(Html.Kendo().ListBox()
                .Name("listBox")
                .DataTextField("Name")
                .DataValueField("Id")
                .DataSource(source =>
                    source.Read(read =>
                        read.Action("IndexJson", "SessionOptionTemplates").Data("gridGetData"))
                )
                .TemplateId("item-template")
                .Toolbar(toolbar =>
                {
                    toolbar.Position(ListBoxToolbarPosition.Right);
                    toolbar.Tools(tools => tools
                        .MoveUp()
                        .MoveDown()
                        .Remove()
                        );
                })
                .Events(events => events
                    .Reorder("onReorder")
                    .Remove("onRemove"))
                .HtmlAttributes(new { style = "height:550px;width:530px" })
                .BindTo(new List<SessionOptionTemplate>()))
        </div>
    </div>
</div>
 
<script id="item-template" type="text/x-kendo-template">
    <span><input type="submit" value="Details" class="btn" onclick="goDetail()" style="margin:5px" /></span>
    <span class="k-state-default" style="margin-left:10px"><h5>#: data.Name #</h5><p>#: data.Description != null ? data.Description : '' #</p></span>
</script>
 
    function goDetail(e) {
        //alert("goDetail");
 
        var listbox = $("#listBox").data("kendoListBox");
        var element = listbox.select();
        var dataItem = listbox.dataItem(element[0]);
 
        var url = '@Url.Action("Details", "SessionOptionTemplates")?id=' + dataItem.Id + '@Model.GetUrlParameters()';
 
        // Replace & with & as the above encoding step changes & to &.
        window.location.href = url.replace(/&/g, "&");
    }

 

Anton Mironov
Telerik team
 answered on 07 Jan 2021
2 answers
78 views

I am able to get data from the source.Read method as pictured.  However, the control doesn't display back the data.

Once I get that working, I need to post changes to the item order.  If I have:

  1. a
  2. b
  3. c

Then I move c up one:

  1. a
  2. c
  3. b

How do I capture the position of c and the position of b to update the database using the Order property?  I assume I capture the onReorder event.  

    public partial class Option
    {
        public int Id { get; set; }
 
        [MaxLength(50)]
        public string Name { get; set; }
        [MaxLength(128)]
        public string Description { get; set; }
 
        public int Order { get; set; }
...
@(Html.Kendo().ListBox()
    .DataTextField("Name")
    .DataValueField("Id")
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("IndexJson", "SessionOptionTemplates").Data("gridGetData");
        });
    })
    .Toolbar(toolbar =>
    {
        toolbar.Position(ListBoxToolbarPosition.Right);
        toolbar.Tools(tools => tools
            .MoveUp()
            .MoveDown()
            .Remove());
    })
    .Events(events => events
        .Remove("onRemove")
        .Reorder("onReorder")
    ))

 

Thanks in advance for your help, Joel

Georgi Denchev
Telerik team
 answered on 18 Dec 2020
10 answers
664 views

Tag helpers in a form allow the following:

https://docs.microsoft.com/en-us/aspnet/core/mvc/views/working-with-forms

@model CountryViewModel

<form asp-controller="Home" asp-action="Index" method="post">

<select asp-for="Country" asp-items="Model.Countries">

</select>

<br />

<button type="submit">Register</button>

</form>

 

How do I accomplish the same thing with Kendo Listbox?

Nikolay
Telerik team
 answered on 08 Sep 2020
Narrow your results
Selected tags
Tags
+? more
Top users last month
Dominik
Top achievements
Rank 1
Giuliano
Top achievements
Rank 1
Dominic
Top achievements
Rank 1
Glendys
Top achievements
Rank 1
NoobMaster
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Dominik
Top achievements
Rank 1
Giuliano
Top achievements
Rank 1
Dominic
Top achievements
Rank 1
Glendys
Top achievements
Rank 1
NoobMaster
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?