VB.NET Using Wizard, Changing selected Side Bar (Button) color

Question

I have a web application where I built a wizard, going from panel to panel. Besides using the Next, Previous buttons, one can use the Side Bar to select what panel to go to. The problem is that while the selected Panel's side bar button is Highlighted / Bolded, it is barely discernable to my client. Not only do they want the button highlighted, but they want the (selected) side bar button to change color as well. Has anybody done this, if so, could you provide me with some code. I have been floundering with this, I thought it would be relatively simple...

Thank you,

Laurie Mc

Answer 1

I'd like to say it's a simple CSS selector, but unfortunately a quick check shows the control renders the bold style inline, and that the only cue you have by default.

That means you'll need to add some server code to write something to client you can find the desired element with javascript and change it that way. To do this, handle the ActiveStepChanged event for your wizard control and check the ActiveStep property. You should be able to use that to deduce the ID of the element.

Unfortunately, the only place our current code base uses that control doesn't show the sidebar at all, so I can't be more specific at the moment.

Answer 2

I had a co-worker help me with this problem, and he found the following code using the side bar template. It does work:

        <SideBarTemplate>
            <asp:DataList ID="SideBarList" runat="server">
                <ItemTemplate>
                    <asp:LinkButton ID="SideBarButton" runat="server" 
                        BackColor="#507CD1" 
                        Font-Names="Verdana" ForeColor="White"></asp:LinkButton>
                </ItemTemplate>
                <SelectedItemTemplate>
                    <asp:LinkButton ID="SideBarButton" runat="server" 
                        BackColor="#507CD1"  Font-Bold="true"
                        Font-Names="Verdana" ForeColor="Yellow" Enabled="true"></asp:LinkButton>
                </SelectedItemTemplate>
                <SelectedItemStyle Wrap="false" />
                <ItemStyle Wrap="false" />
            </asp:DataList>
        </SideBarTemplate>
        <SideBarStyle Width="5%" Wrap="false" />

        <StepStyle Font-Size="0.8em" ForeColor="#333333" />

It's the that really answered the problem