Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
70
Web Explorer Bar Group CSS
posted

I have been trying to dynamically modify the CssClass property of a web explorer bar group using code similar to the following. We would like to have a different style for the first few group items; all other groups use the default style. The problem is the code does not seem to have any effect on the output. I checked the HTML output. It still uses the default CssClass defined in the styleSet. Is there any extra code i have to write to modify the style behavior?

 

<ig:WebExplorerBar ID="WebExplorerBar1" runat="server" Width="250px"
            >         
        </ig:WebExplorerBar>

protected void Page_Load(object sender, EventArgs e)
        {
            if(!Page.IsPostBack)
                this.WebExplorerBar1.Groups[0].CssClass = "otherStyleClass";
        }

Parents
  • 15979
    posted

    Hello thehitman,

    Thank you for posting on Infragistics forum.

    I have created a sample with your code and CSS styles were applied correctly to the “WebExplorerBar” groups from code behind.

    You can try to apply styles directly from the .aspx page adding them like that:

    <style type="text/css">

       

            .modifiedCSS

            {

                 background-image:none;

                 background-color:Red;

            }

           

            .modifiedCSS_1

            {

               background-image:none;

               background-color:Green;

               width:250px;

               height:20px;          

            }

       

        </style>

     

    Then in code behind file just refer to these styles and apply them:

    protected void Page_Load(object sender, EventArgs e)

        {

            if (!Page.IsPostBack)

            {

                // setting new CssClass for Group and for single Item

                WebExplorerBar1.Groups[0].CssClass = "modifiedCSS";

                WebExplorerBar1.Groups[0].Items[0].CssClass = "modifiedCSS_1";

                // setting new CssClass for the second Group

                WebExplorerBar1.Groups[1].CssClass = "modifiedCSS_1";

            }

        }

    Additionally you can change “ActiveCssClass”, “HooverCssClass” or “SelectedCssClass” properties of the “WebExplorerBar” Group/Item to apply your style to these events also.

     

    If this approach does not work for you, I can send you the example itself and you can modify it to reproduce your scenario.

    Thank you for choosing Infragistics.

Reply Children