Listbox Reordering

2 posts, 0 answers
  1. Owen
    Owen avatar
    4 posts
    Member since:
    Sep 2014

    Posted 18 Apr 2018 Link to this post

    Hi, 
    I hope someone can help me with is. I used the basic usage example (from the demo page) and built upon this to be able to read data from my database and then capture both lists in my controller. List two works as expected, however when re-ordering list one, the list item index remains the same. 

    View

    @(Html.Kendo().ListBox()
                                .Name("RegionOne")
                                .DataValueField("Id")
                                .DataTextField("Name")
                                .DataSource(source => source
                                        .Read(read => read.Action("_GetAvailableDashboardItems_ListOne", "Home"))
                                )
                                .Toolbar(toolbar =>
                                {
                                    toolbar.Position(Kendo.Mvc.UI.Fluent.ListBoxToolbarPosition.Right);
                                    toolbar.Tools(tools => tools
                                        .MoveUp()
                                        .MoveDown()
                                        .TransferTo()
                                        .TransferFrom()
                                        .TransferAllTo()
                                        .TransferAllFrom()
                                    //.Remove()
                                    );
                                })
                                .Events(events => events
                                    .Reorder("test")
                                )
                                .ConnectWith("RegionTwo")
                                .BindTo(Model.RegionOne)
                            )
     
                            @(Html.Kendo().ListBox()
                                .Name("RegionTwo")
                                .DataValueField("Id")
                                .DataTextField("Name")
                                .DataSource(source => source
                                        .Read(read => read.Action("_GetAvailableDashboardItems_ListTwo", "Home"))
                                )
                                .BindTo(Model.RegionTwo)
                                .Selectable(ListBoxSelectable.Multiple)
                                .ConnectWith("RegionOne")
                            )

     

    Controller

    public JsonResult _GetAvailableDashboardItems_ListOne()
            {
                var items = _userTask.GetAvailableDashboardItems(CurrentUserId, false);
                return Json(items, JsonRequestBehavior.AllowGet);
            }
     
     public JsonResult _GetAvailableDashboardItems_ListTwo()
            {
                var items = _userTask.GetAvailableDashboardItems(CurrentUserId, true);
                return Json(items, JsonRequestBehavior.AllowGet);
            }

     

    Task 

    public IEnumerable<AvailableDashboardItems> GetAvailableDashboardItems(string userId, bool Region)
            {
                var userItems = _userRepository.GetUserDashboardItems(userId);
                if (userItems.Count() != 0)
                {
                    var items = userItems.Where(x => x.Region == Region).OrderBy(x => x.Position);
                    return Mapper.Map<IEnumerable<UserDashboardItem>, IEnumerable<AvailableDashboardItems>>(items);
                }
                else
                {
                    if (!Region)
                        return Mapper.Map<IEnumerable<DashboardItem>, IEnumerable<AvailableDashboardItems>>(_userRepository.GetAvailableDashboardItems());
                }
                return null;
            }

     

    Any help would be greatly appreciated, Thanks 

    Rich

  2. Stefan
    Admin
    Stefan avatar
    2525 posts

    Posted 20 Apr 2018 Link to this post

    Hello, Rich,

    Thank you for the details.

    This is expected as the ListBox will not automatically update the dataSource indexes of the reordered items by design.

    We have an article demonstrating how the indexes can be updated on the reorder event:

    https://docs.telerik.com/kendo-ui/knowledge-base/list-box-reordering-not-working

    I hope this is helpful.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top