Connected listboxes not accepting dropped in values

[Irving]

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]

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?

[Angel Petrov]

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

[Irving]

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