Keep selected item

4 posts, 1 answers
  1. Eric
    Eric avatar
    57 posts
    Member since:
    Aug 2012

    Posted 10 Jan 2013 Link to this post

    How can I keep the selected item selected after a collapse then expand?

    @{   
        if (Session["VendorList"] != null)
        {
            List<PA.Service.AdminTools.VendorDTO> vendors = (List<PA.Service.AdminTools.VendorDTO>)Session["VendorList"];
            
            @(Html.Kendo().PanelBar()
                .Name("Vendors")
                .ExpandMode(Kendo.Mvc.UI.PanelBarExpandMode.Multiple)
                .Items(panelbar =>
                {
                    panelbar.Add().Text("Vendors")
                        .Expanded(true)
                        .Enabled(true)
                        .Items(items =>
                        {
                            foreach (var vendor in vendors)
                            {
                                if (vendor.IsDefault)
                                {
                                    items.Add()
                                        .Text(vendor.VendorName)
                                        .HtmlAttributes(new { onclick = "SetVendorID("+vendor.VendorID.ToString()+")" })
                                        .Selected(true);
     
                                }
                                else
                                {
                                    items.Add()
                                        .Text(vendor.VendorName)
                                        .HtmlAttributes(new { onclick = "SetVendorID(" + vendor.VendorID.ToString() + ")" })
                                        .Selected(false);
                                }
                            }
                        });
                })            
            )    
        }  
     }
  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 14 Jan 2013 Link to this post

    Hi,

    A single item can be selected in the PanelBar at a time so when selecting the parent, the child selection will be lost. It is possible to restore it by using the select event to save the currently selected item and the expand event to select it.

    function select(e) {
        var parent = $(e.item).closest(".k-group").closest(".k-item");
        if (parent.length) {
            parent.data("selectedChild", e.item);
        }
    }
      
    function expand(e) {
        var selected = $(e.item).data("selectedChild");
        if (selected) {
            this.select(selected);
        }
    }
    Kind regards,
    Daniel
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Eric
    Eric avatar
    57 posts
    Member since:
    Aug 2012

    Posted 14 Jan 2013 Link to this post

    So far so good but one last thing still doesn't work. Using the code below the selection is saved a reselected on expand if you click the item but it doesn't work when the form first opens and the default selection is programmatically selected (.Selected(true)). It only works if you click on the subitem with the mouse after the view is rendered.

    $(function ()     {         
    var panelBar = $("#Vendors").data("kendoPanelBar").bind("select", onSelect);         
    panelBar.bind("expand", onExpand);     });     

    function
     onSelect(e)     {         
    var
     parent = $(e.item).closest(".k-group").closest(".k-item");         
    if (parent.length)         {             parent.data("selectedChild", e.item);         }     }     

    function
     onExpand(e)     {         
    var selected = $(e.item).data("selectedChild");         
    if (selected)         {             this.select(selected);         }     }
  5. Answer
    Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 16 Jan 2013 Link to this post

    Hello again Eric,

    You should include the selected element in its parent data in order for this approach to work initially e.g.

    $(function () {
        var selectedItem = $("#Vendors").find(".k-state-selected").closest(".k-item");
        var parent = selectedItem.closest(".k-group").closest(".k-item");
        parent.data("selectedChild", selectedItem);
    });
    Regards,
    Daniel
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready