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

Keep selected item

3 Answers 337 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Eric
Top achievements
Rank 1
Eric asked on 10 Jan 2013, 09:19 PM
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);
                            }
                        }
                    });
            })            
        )    
    }  
 }

3 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 14 Jan 2013, 01:41 PM
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!
0
Eric
Top achievements
Rank 1
answered on 14 Jan 2013, 03:42 PM
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);         }     }
0
Accepted
Daniel
Telerik team
answered on 16 Jan 2013, 12:09 PM
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!
Tags
PanelBar
Asked by
Eric
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Eric
Top achievements
Rank 1
Share this question
or