Connected listboxes not accepting dropped in values

4 posts, 0 answers
  1. Irving
    Irving avatar
    4 posts
    Member since:
    Sep 2018

    Posted 05 Mar Link to this post

    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>

     

     

     

     

  2. Irving
    Irving avatar
    4 posts
    Member since:
    Sep 2018

    Posted 06 Mar in reply to Irving Link to this post

    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?
  3. Angel Petrov
    Admin
    Angel Petrov avatar
    1102 posts

    Posted 07 Mar Link to this post

    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.
  4. Irving
    Irving avatar
    4 posts
    Member since:
    Sep 2018

    Posted 07 Mar in reply to Angel Petrov Link to this post

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

     

     

Back to Top