Hello,

Keep in mind that the Aikido controls are built on a completely different framework and their behaviors and properties will be different compared to their Classical Controls counterparts.

The WebExplorerBar is built to handle data sets (also hierarchy) with multiple expandable containers, rather than being a single panel like the old control, so there are a few key new concepts changed – such as Groups, Item templates and bindings. To learn more you can start here in the documentation:

http://help.infragistics.com/Doc/ASPNET/2014.2/?page=Web_WebExplorerBar.html

There are some styling options, but just about everything can be achieved through CSS and templates can be used for complete customization. The basic snippet that reflects your old code would be:

<ig:WebExplorerBar ID="WebExplorerBar1" runat="server" Width="250px" BackColor="WhiteSmoke" StyleSetName="Default"

        ExpandButton-ImageUrl="transparent.gif"

        ExpandButton-HoverImageUrl="transparent.gif"

        CollapseButton-ImageUrl="~/controls/images/close.gif"

        CollapseButton-HoverImageUrl="~/controls/images/close.gif">

    <ClientEvents ItemCollapsed="WebExplorerBar1_ItemCollapsed" ItemExpanding="WebExplorerBar1_ItemExpanding"/>

    <Groups>

        <ig:ExplorerBarGroup Text="Filter">

            <Items>

                <ig:ExplorerBarItem TemplateId="SimpleContentTmpl"></ig:ExplorerBarItem>

            </Items>

        </ig:ExplorerBarGroup>

    </Groups>

    <Templates>

        <ig:ItemTemplate TemplateID="SimpleContentTmpl">

                <Template>

                <!-- Content -->

            </Template>

        </ig:ItemTemplate>

    </Templates>

</ig:WebExplorerBar>  

 Note that the images have hover counterparts and both must be changed as the control will provide defaults.

Also as mentioned in this post the control has selection and active styles, rather than expand/collapse. I would suggest you evaluate the behavior of those in the provided sample, but if needed you can add your own styling using the expand/collapse events:

<ClientEvents ItemExpanding="WebExplorerBar1_ItemExpanding"/>

<script type="text/javascript" id="igClientScript">

function WebExplorerBar1_ItemExpanding(sender, eventArgs) {

    eventArgs.getExplorerBarItem().get_element().childNodes[0].style.backgroundColor = "LightSteelBlue";

}

</script>

Take a look at the attached sample (I've made two versions) and let me know if you need further assistance.

Regards,

Damyan Petev

Associate Software Developer