Sidebar doesn't show active item in DHTMLX version 5.02 or 5.1


#1

I am trying to create a dhtmlXSideBar and everything gets created fine and looks fine.
The dhtmlXSideBar always starts showing the first item in the list, but when the active item of the dhtmlXSideBar is too far down to fit in the visible area, it is not shown.
The dhtmlXSideBar does show the up and down arrows, indicating more items are present and scrolling is possible.
The dhtmlXTreeObject has a function ‘focusItem()’, which was created exactly for this purpose, to scroll the an item into view.
However the dhtmlXSideBar object doesn’t have such a function.
How can I make sure an active item is always visible to the user after creating a dhtmlXSideBar object?
This is an example of the current code, used to create the dhtmlXSideBar object inside a dhtmlXAccordion object:

function doOnLoad()
{
	var accord;
	var item;
	var sideConfig = {skin: "dhx_skyblue", icons_path: "icons32/", template: "icons_text", single_cell: true, header: false, autohide: false, width: 168};

	accord = new dhtmlXAccordion("SMSBar");
	accord.setSkin("dhx_skyblue");
	accord.addItem("1", "Bedrijven", true);
	item = accord.cells("1").attachSidebar(sideConfig);
	item.addItem({id: "11", text: "Detail", icon: "details.png"});
	item.addItem({id: "12", text: "Personen", icon: "contact.png"});
	item.addItem({id: "13", text: "Activiteiten", icon: "history.png"});
	item.addItem({id: "14", text: "Dossiers", icon: "dossier.png"});
	item.addItem({id: "15", text: "Kenmerk Bedrijfsgegevens", icon: "custom.png"});
	item.addItem({id: "16", text: "Organisatie", icon: "organisation.png"});
	item.addItem({id: "17", text: "Betrokkenheid", icon: "link.png"});
	item.addItem({id: "18", text: "Adresinformatie", icon: "address.png"});
	item.addItem({id: "19", text: "Locaties", icon: "location.png"});
	item.addItem({id: "20", text: "Financiële details", icon: "finance.png"});
	item.addItem({id: "21", text: "Accounts", icon: "fincalc.png"});
	item.addItem({id: "22", text: "Events", icon: "events.png"});
	item.addItem({id: "23", text: "Selecties", icon: "campaign.png"});
	item.addItem({id: "24", text: "DMU", icon: "check.png"});
	item.addItem({id: "25", text: "Handelsregister", icon: "chamber.png"});
	item.addItem({id: "25", text: "Financiële kengetallen", icon: "element.png"});
	item.addItem({id: "27", text: "SWOT", icon: "magnify.png"});
	item.addItem({id: "28", text: "Administratie", icon: "export.png"});
	item.addItem({id: "29", text: "Financieel Overzicht", icon: "piechart.png", selected: true});
}

Best regards,

Adri.


#2

Does anyone (dHtmlx support?) have an idea how to implement the equivalent for the dhtmlXTreeObject::focusitem() for a dhtmlXSideBar?


#3

Unfortunately the current API of the sidebar does not allow to focus on the item.


#4

I already know the focusitem() isn’t available for the sidebar.
My question was how to achieve this functionality, since currently I have sidebars, where the selected item is way down, out of view and I need it to scroll into view, so the user can see it!