Change image in AccordionPane Header on collapse and expand

Here's how to use image in AccordionPane header and change the image on expand and collapse.

Step 1: Create an Accordion with three AccordionPane

<ajaxToolkit:Accordion ID="MyAccordion" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent" FadeTransitions="false" FramesPerSecond="40" TransitionDuration="250" AutoSize="None" RequireOpenedPane="false" SuppressHeaderPostbacks="true">
<Panes>
<ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
<Content>
First Accordion Pane
Content>
ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
<Content>
Second Accordion Pane
Content>
ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="AccordionPane3" runat="server">
<Content>
Third Accordion Pane
Content>
ajaxToolkit:AccordionPane>
Panes>
ajaxToolkit:Accordion>

Step 2: Add

in each AccordionPane like below. Header contains anchor and image, anchor tag invokes javascript meethod ChangeImage. The id of the image needs to passed to ChangeImage javascript. The id of the image should be same followed by 1,2 and 3 etc because we need to chane image(Collapse Image) of previously opened accordion pane.

This header will go in the AccordionPane with ID AccordionPane1

<Header>
<a href="" onclick="ChangeImage('imgAcc1');" class="accordionLink">
<img src="right_arrow.jpg" id="imgAcc1" />Accordion Image Demo1a>
Header>

This header will go in the AccordionPane with ID AccordionPane2

<Header>
<a href="" onclick="ChangeImage('imgAcc2');" class="accordionLink">
<img src="right_arrow.jpg" id="imgAcc2" />Accordion Image Demo2a>
Header>

This header will go in the AccordionPane with ID AccordionPane3

<Header>
<a href="" onclick="ChangeImage('imgAcc3');" class="accordionLink">
<img src="right_arrow.jpg" id="imgAcc3" />Accordion Image Demo3a>
Header>

Step 3: Add ChangeImage javascript, while loop will execute less than or equal to number of images.

<script language="javascript" type="text/javascript">
function ChangeImage(imgID)
{
var imgURL = document.getElementById(imgID).src.split('/');
if(imgURL[imgURL.length - 1] == 'down_arrow.jpg')
{
document.getElementById(imgID).src = "right_arrow.JPG";
}
else
{
document.getElementById(imgID).src = 'down_arrow.jpg';
}
var cnt = 1;
while(cnt <= 3)
{
var imgIdRec = "imgAcc" + cnt;
if(document.getElementById(imgIdRec)!= 'null' && imgIdRec != imgID)
{
var imgURL = document.getElementById(imgIdRec).src.split('/');
document.getElementById(imgIdRec).src = "right_arrow.JPG";
}
cnt = cnt + 1;
}
}
script>

Visit www.dotnetspeaks.com for live Demo and download the code

Wrap Column in GridView

This article tells how to wrap text in GridView column. There is no inbuilt wrapping of text property is available in gridview column. If we put some long text without any space like URLs in a column of gridview, it doesn't wrap and column width increases to a width of maximum non space text like below

It should wrap text after certain specified character even if there is no space between characters like below screen shot.

Let's see how we can do this:

Step 1: Place a gridview in the aspx page

<asp:GridView ID="gvWrappinColumn" runat="server" AutoGenerateColumns="false">
<Columns>
Columns>
<HeaderStyle HorizontalAlign="Left" Height="20px" BackColor="#880015" ForeColor="#ffffff" Font-Bold="true" Font-Size=".75em" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" />
<AlternatingRowStyle BackColor="#eeeeee" />
asp:GridView>

Step 2: Create GridViewItemTemplat class which will inherit ITemplate interface, implement InstantiateIn member of ITemplate, InstantiateIn member will create Literal object which will be placed in the gridview column to wrap the text. Literal needs to bind in every row of the column using DataBinding and EventHandler and then it needs to add in the container.

void ITemplate.InstantiateIn(System.Web.UI.Control container)
{
Literal lit = new Literal();
lit.DataBinding += new EventHandler(lit_DataBinding);
container.Controls.Add(lit);
}

Step 3: lit_DataBinding method will bind Literal control to every row, add
after certain characters as per need before assigning to Literal. Here i am putting
after every 40 characters.

protected void lit_DataBinding(object sender, EventArgs e)
{
int intNoOfCharacters =40;
Literal litColData = (Literal)sender;
GridViewRow container = (GridViewRow)litColData.NamingContainer;
object colDataValue = DataBinder.Eval(container.DataItem, strColName);
if (colDataValue != DBNull.Value)
{
string str = colDataValue.ToString();
int i = 0;
while (i < style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "> {
if (str.Contains("
"))
{
i = i + intNoOfCharacters + 5;
}
else
{
i = i + intNoOfCharacters;
}
if (i < style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "> {
str = str.Insert(i, "
");
}
}
litColData.Text = str;
}
}

Step 4: Create a constructor GridViewItemTemplate and declare two global variables ListItemType and string

ListItemType lstItemType;
string strColName;
public GridViewItemTemplate(ListItemType lstItmType, string colname)
{
lstItemType = lstItmType;
strColName = colname;
}

Step 5: Create GetData() method to bind data to GridView

private DataTable GetData()
{
DataTable dt = new DataTable("Data");
dt.Columns.Add(new DataColumn("ID"));
dt.Columns.Add(new DataColumn("Comments"));
dt.Rows.Add(1, "Testing column of GridView Wrapping1");
dt.Rows.Add(2, http://www.bing.com/search?q=microtsoft+visual+studio+2010&form=QBLH&qs=n&sk=);
dt.Rows.Add(3, "Testing column of GridView Wrapping2");
return dt;
}

Step 6: On Page_Load method of aspx page create a BoundField and TemplateField, create instance of GridViewItemTemplateclass and assign it to ItemTemplate of TemplateField.

protected void Page_Load(object sender, EventArgs e)
{
DataTable dt = GetData();
BoundField bndFld = new BoundField();
bndFld.DataField = "id";
bndFld.HeaderText = "ID";
gvWrappinColumn.Columns.Add(bndFld);
TemplateField tmpltField = new TemplateField();
tmpltField.ItemTemplate = new GridViewItemTemplate(ListItemType.Item, "Comments");
gvWrappinColumn.Columns.Add(tmpltField);
gvWrappinColumn.DataSource = dt;
gvWrappinColumn.DataBind();
}

This ends the article, you can see Live Demo and download the code as well.

visit www.dotnetspeaks.com for live demo and download the code.