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.