Accordion Header Colour Change Issue.. RSS

• • Reply
  

  geniusvishal

  Star

  14296 Points

  2820 Posts

  Accordion Header Colour Change Issue..

  Mar 30, 2012 08:57 AM|LINK

  Hi all,

  I am using an accordion control in my webpage.. There is a collapsible pane containing multiple headers.. I am using HeaderSelectedCssClass for changing the colour of the header.. Everything works fine but the colour of the unselected header doesnt change after selecting another header in the subcategory portion..

  The codes are as follows:

  .accordionHeader a:hover
  {
  	 color: #fc7e0e;
  	 
  }
  .accordionHeader
  {
       
      /*background-color: #eaeae7;
  	font-weight: bold;*/
  	font-family: Arial, Helvetica, sans-serif;
  	font-size: 14px;
      padding: 5px;
      margin-top: 5px;
      cursor: pointer;
      text-align:left;
  }
  .accordionHeaderSelected
  {
      /*border: 1px solid Gray;
      background-color: #eaeae7;*/
  	font-family: Arial, Helvetica, sans-serif;
  	font-size: 14px;
  	font-weight: bold;
  	color:#aa0101;
      padding: 5px;
      margin-top: 5px;
      cursor: pointer;
      text-align:left;
        
  }
  .accordionContent
  {
     padding: 5px;
     padding-top: 5px;
   }

  <ajaxToolkit:Accordion ID="Accordion1" runat="server"  FadeTransitions="true" 
                                  TransitionDuration="250" 
                                  FramesPerSecond="50" 
                                  HeaderCssClass="accordionHeader" 
                                  ContentCssClass="accordionContent"
                                  HeaderSelectedCssClass="accordionHeaderSelected" 
                                  SelectedIndex="0" OnItemDataBound="Accordion1_ItemDataBound">
      <HeaderTemplate>
      <table id="tblDestination" runat="server" width="100%">
              <tr>
              <td class="bottomborder" valign="top"  align="left">
      <asp:Label runat="server" Id="lbHeaderId" Text='<%#Eval("SubCategoryName") %>'> </asp:Label> 
      </td>
      </tr>
      </table>
      </HeaderTemplate>
      
      <ContentTemplate>
      <asp:HiddenField runat="server" id="hdnDestination" value='<%#Eval("SubCategoryId") %>'> </asp:HiddenField> 
         <asp:DataList ID="dlDestinationName" runat="server" HorizontalAlign="Center" DataKeyField="SubCategoryId" 
         Width="100%" OnItemCommand="dlDestinationName_ItemCommand">
       <ItemTemplate>
       <table id="tblDestination" runat="server" width="100%">
              <tr>
              <td class="bottomborder" valign="top"  align="left"  style="padding:0px 2px 2px 7px;">            
              <asp:LinkButton runat="server" ID="lnkBtnDestination" CssClass="lblDlSubCatName" Text='<%#Eval("DestinationName") %>'
               CommandArgument='<%#Eval("DestinationId") %>' CommandName="Link">            
              </asp:LinkButton>            
              </td>
              </tr>
              </table> 
       </ItemTemplate>
       </asp:DataList>     
       </ContentTemplate>
      </ajaxToolkit:Accordion>

  
  
  
  

  Vishal Ranjan
  
  My Website
  www.dotnetvishal.com
  
• • Reply
  

  geniusvishal

  Star

  14296 Points

  2820 Posts

  Re: Accordion Header Colour Change Issue..

  Mar 30, 2012 09:06 AM|LINK

  

  Vishal Ranjan
  
  My Website
  www.dotnetvishal.com
  
• • Reply
  

  geniusvishal

  Star

  14296 Points

  2820 Posts

  Re: Accordion Header Colour Change Issue..

  Mar 30, 2012 09:27 AM|LINK

  The c# code behind for databinding is :

  protected void Accordion1_ItemDataBound(object sender, AjaxControlToolkit.AccordionItemEventArgs e)
      {
          if (e.ItemType == AjaxControlToolkit.AccordionItemType.Content)
          {
              DataList dlDestinationName = (DataList)e.AccordionItem.FindControl("dlDestinationName");
              HiddenField hdnField = (HiddenField)e.AccordionItem.FindControl("hdnDestination");
  
              objCategory.SubCategoryId = Convert.ToInt32(hdnField.Value);
              dlDestinationName.DataSource = objCategory.SelectDestinationPriceBySubCategoryId();
              dlDestinationName.DataBind();
              //dlDestinationName.Visible = true;
                          
              tblEmpty.Visible = false;
              tblDestDetails.Visible = true;
              tblWorld_Map.Visible = false;
  
              CreateDataTable();
              DataSet dsGetAllDestinationId = objCategory.SelectDestinationPriceBySubCategoryId();
              if (dsGetAllDestinationId.Tables[0].Rows.Count > 0)
              {
                  dt = (DataTable)ViewState["holidaysDetails"];
  
                  for (int i = 0; i < dsGetAllDestinationId.Tables[0].Rows.Count; i++)
                  {
                      dr = dt.NewRow();
                      objCategory.DestinationId = Convert.ToInt32(dsGetAllDestinationId.Tables[0].Rows[i].ItemArray[7]);
                      DataSet dsSelectTop1DestImage = objCategory.Selecttop1DestinationImage();
                      if (dsSelectTop1DestImage.Tables[0].Rows.Count > 0)
                      {
                          dr["Image1"] = dsSelectTop1DestImage.Tables[0].Rows[0].ItemArray[0].ToString();
                      }
                      else
                      {
                          dr["Image1"] = null;
                      }
  
                      DataSet dsSelect = objCategory.SelectDestinationPriceByDestinationId();
                      dr["DestinationId"] = objCategory.DestinationId;
                      dr["DestinationName"] = dsSelect.Tables[0].Rows[0].ItemArray[1].ToString();
  
                      if (dsSelect.Tables[0].Rows.Count > 0)
                      {
                          dr["DestinationDesc"] = dsSelect.Tables[0].Rows[0].ItemArray[6].ToString();
                      }
                      else
                      {
                          dr["DestinationDesc"] = null;
                      }
  
                      if (dsSelect.Tables[0].Rows.Count > 0)
                      {
                          dr["DestinationInclusion"] = dsSelect.Tables[0].Rows[0].ItemArray[4].ToString();
                      }
                      else
                      {
                          dr["DestinationInclusion"] = null;
                      }
  
                      if (dsSelect.Tables[0].Rows.Count > 0)
                      {
                          dr["DestinationPrice"] = Convert.ToDecimal(dsSelect.Tables[0].Rows[0].ItemArray[5]);
                      }
                      else
                      {
                          dr["DestinationPrice"] = null;
                      }
  
                      dt.Rows.Add(dr);
                      ViewState["holidaysDetails"] = dt;
                  }
                  
                  dlDestDetails.DataSource = (DataTable)ViewState["holidaysDetails"];
                  dlDestDetails.DataBind();
                  dt.Clear();
              }
  
              else
              {
                  lblNotFound.Text = "Data Not Found.";
                  tblEmpty.Visible = true;
                  tblDestDetails.Visible = false;
              }
          }
      }

  
  
  

  Vishal Ranjan
  
  My Website
  www.dotnetvishal.com
  
• • Reply
  

  geniusvishal

  Star

  14296 Points

  2820 Posts

  Re: Accordion Header Colour Change Issue..

  Mar 30, 2012 12:24 PM|LINK

  Need Suggestion on this...

  Vishal Ranjan
  
  My Website
  www.dotnetvishal.com
  
• • Reply
  

  BU XI - MSFT

  All-Star

  22367 Points

  2704 Posts

  Microsoft

  Re: Accordion Header Colour Change Issue..

  Apr 03, 2012 05:23 AM|LINK

  Hello

  You may achieve this by javascript, after one header is activated, then save it. When another header is clicked, change the prior one's css class, remove the css class that has the highlight effect. If you are in jQuery, refer to removeClass method, http://api.jquery.com/removeClass/

   

  Please mark the replies as answers if they help or unmark if not.
  If you have any feedback about my replies, please contact msdnmg@microsoft.com.
  Microsoft One Code Framework
  • Marked as answer by BU XI - MSFT on Apr 06, 2012 04:39 AM