This is a migrated thread and some comments may be shown as answers.

Connected listboxes not accepting dropped in values

3 Answers 175 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Irving
Top achievements
Rank 1
Irving asked on 05 Mar 2019, 09:19 PM

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>

 

 

 

 

3 Answers, 1 is accepted

Sort by
0
Irving
Top achievements
Rank 1
answered on 06 Mar 2019, 09:28 PM
If i change the name of the first box to anything other than "Model.PTLUser.RolesToRemove", it allows me to drag to the 2nd box. However when I submit my form the values never send for the first list. and the 2nd list the count is always zero. Am i posting this question in the right forum?
0
Angel Petrov
Telerik team
answered on 07 Mar 2019, 12:30 PM
Hi,

Indeed the question is posted in the correct forum. As for the problem on hand I would recommend removing the dots from the names of the ListBoxes as this might break jQuery selectors. The aforementioned will resolve the drag and drop problem as for the posting issue I am not sure why it is occurring. The ListBoxes are initialized over a select element and once drag and drop between them is performed we move the option elements of the select. That said when posted the correct values should be present. Can you please send us an example which demonstrates this issue?

Regards,
Angel Petrov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Irving
Top achievements
Rank 1
answered on 07 Mar 2019, 06:43 PM

I was able to resolve my issues. First off the .Name field was having problems with the dots in the name, which as you mentioned would cause issue with the drag and drop with the JQuery selectors. So renaming the .Name field to just "RolesToRemove" Resolved that. The 2nd issue also had to do with the name field. In Kendo setting the.Name field  in the html helper results in the html rendering with an ID of that name, as well as the Name HTML attribute with that name. Like in this example below. 

<div id="RolesToRemove" name="RolesToRemove"></div>

The problem with this is that when posting to a Controller action in an MVC application. The Model property has the name of Model.PTLUser.RolesToRemove.  with the DOTs in the name. And the HTML NAME attribute has  also be named  with the dots. As far as i know there is no way around this. So to go around this I had to add a new HTMLAttribute with the correct name. Long story short  here is my working code.  Now my next issue s filling in that kendo listbox dynamically. But that will be a question for another forum thread lol. thanks for your help Angel.

 

 

 

 

 @(Html.Kendo().ListBox()
                                                                    .Name("RolesToRemove")
                                                                    .DataValueField("RoleName")
                                                                    .DataTextField("RoleName")
                                                                    .Draggable(true)
                                                                    .DropSources("RolesToAssign")
                                                                    .ConnectWith("RolesToAssign")
                                                                    .BindTo(Model.RolesAvailable)
                                                                    .Selectable(ListBoxSelectable.Single)
                                                                   .HtmlAttributes(new { @name = "PTLUser.RolesToRemove" })
                                                    )
                                                    @(Html.Kendo().ListBox()
                                                                    .Name("RolesToAssign")
                                                                    .DataValueField("RoleName")
                                                                    .DataTextField("RoleName")
                                                                    .Draggable(true)
                                                                    .DropSources("RolesToRemove")
                                                                    .ConnectWith("RolesToRemove")
                                                                    .BindTo(new List<string>())
                                                                    .Selectable(ListBoxSelectable.Single)
                                                                    .HtmlAttributes(new { @name = "PTLUser.RolesToAssign" })
                                                    )

 

 

Tags
ListBox
Asked by
Irving
Top achievements
Rank 1
Answers by
Irving
Top achievements
Rank 1
Angel Petrov
Telerik team
Share this question
or