Quantcast
Channel: ASP.NET AJAX + Ajax Control Toolkit (ACT)
Viewing all articles
Browse latest Browse all 5678

Accordion ItemDataBound and pane Header CSS question

$
0
0

Hey all,

I hope all is well with you today.

I have an accordion control, which I was tasked to specify the pane's header's css with a different color based on a text value in the pane's header section.

This is my first time using this control, so I decided to approach this in the ItemDataBind method.

Changing the content color works ok this way, but HeaderCssClass is a different matter.

The test css in the aspx file:

.NotReviewed 
{
background-color: #006699;
border-color: #004f99;

}

.InProcess 
{
background-color: #2e8b89;
border-color: #157972;

}

.Reviewed 
{
background-color: #990000;
border-color: #750011;

}


These work fine if i place set a single one in the accordion tag's HeaderCssClass or programatically for the pane's ContentCssClass, so I don't think it is the css, and I am misunderstanding the control in regards to the header in the code behind.

FYI, the following and the code behind method for it are scrubbed id and content wise to minimum content.

<ajaxToolkit:Accordion ID="accrds" 
                    runat="server" 
                    OnItemDataBound="accrds_ItemDataBound" 
                    Width="100%" 
                    FramesPerSecond="40" 
                    RequireOpenedPane="false" 
                    FadeTransitions="true" 
                    AutoSize="Fill" 
                    TransitionDuration="250"><HeaderTemplate><asp:Label ID="lblID" 
                            run="server" /><div><asp:Label ID="lblStatus" 
                                runat="server" 
                                Text='<%# Bind("Status") %>' /></div><HeaderTemplate><ContentTemplate><asp:DropDownList ID="ddlDecision" 
                            runat="server" 
                            Enabled="true"></asp:DropDownList></ContentTemplate></ajaxToolkit:Accordion>

But unlike the ContentCssClass, this will not visually effect the control when applied in the ItemDataBound method, as i have an style free pane header:

protected void accrds_ItemDataBound(object sender, AccordionItemEventArgs e)
{
    if (e.ItemType == AccordionItemType.Header)
    {
        Label lblTemp =
            e.AccordionItem.FindControl("lblStatus") as Label;

        AccordionPane p =
                accrds.Panes[e.ItemIndex];

        if (lblTemp.Text.Equals("Not Reviewed"))
        {
            p.HeaderCssClass = "NotReviewed";
            p.ContentCssClass = "NotReviewed";
        }
        else if (lblTemp.Text.Equals("In Progress"))
        {
            p.HeaderCssClass = "InProcess";
            p.ContentCssClass = "InProcess";
        }
        else if (lblTemp.Text.Equals("Reviewed"))
        {
            p.HeaderCssClass = "Reviewed";
            p.ContentCssClass = "Reviewed";
        }
        else
        {
            p.HeaderCssClass = "NotReviewed";
            p.ContentCssClass = "NotReviewed";
        }
    }
}

Debug wise, this hits correctly.

So, is there an alternative approach I should be using that is based on the state of the control not being fully bound, or am I missunderstanding the concept of headers and content templates in this control?

Thanks in advance for suggestions.


Viewing all articles
Browse latest Browse all 5678

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>