IE9 - Pinning of image

In my previous article IE 9 more exciting features I mentioned about pinning of site. In this article we will explore how to use image to pin site in IE 9.

Continue reading of IE9 - Pinning of image

Add image in the gridview and zoom it on click

Here is a sample to show image in the gridview and zoom it on mouse click. The filename of the image and imageurl is placed in the xml file.

Step 1: Create an Image.xml with FileName and ImageURL attribute. This XML will be datasource to gridview.

<?xml version="1.0" encoding="utf-8" ?>
<Images>
<Image FileName="Suzuki-Swift.jpg" ImageURL="images/Suzuki-Swift.jpg"></Image>
<Image FileName="Aston_Martin-V12_Vantage_2010.jpg" ImageURL="images/Aston_Martin-V12_Vantage_2010.jpg"></Image>
<Image FileName="Honda-CR-Z_2011.jpg" ImageURL="images/Honda-CR-Z_2011.jpg"></Image>
<Image FileName="Hummer-H3_Alpha_2008.jpg" ImageURL="images/Hummer-H3_Alpha_2008.jpg"></Image>
<Image FileName="Mercedes-Benz-SL63_AMG_2009.jpg" ImageURL="images/Mercedes-Benz-SL63_AMG_2009.jpg"></Image >
<Image FileName="Seat-Altea_TDI_2005.jpg" ImageURL="images/Seat-Altea_TDI_2005.jpg"></Image>
</Images>

Step 2: Place a gridview in the aspx page with a BoundField and TemplateField.

<asp:GridView ID="gvImage" runat="server" AutoGenerateColumns="false" OnRowDataBound="gvImage_RowDataBound">
<Columns>
<asp:BoundField HeaderText="FileName" DataField="FileName"></asp:BoundField>
<asp:TemplateField HeaderText="Image">
<ItemTemplate>
<div>
<asp:Image ID="Image1" Height="80" Width="80" ToolTip="Click to enlarge" runat="server" ImageUrl='<%# Eval("ImageURL") %>' />
</div>
<div id="divImg" runat="server" style ="float: left;">
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<HeaderStyle HorizontalAlign="Left" Height="0px" BackColor="#880015" ForeColor="#ffffff" Font-Bold="true" Font-Size=".75em" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" />
<AlternatingRowStyle BackColor="#eeeeee" />
</asp:GridView>

Step 3: Create GetImageData() method to load XML data to GridView.

private void GetImageData()
{
string xmlImageFilePath = Server.MapPath(@"Image.xml");
if (File.Exists(xmlImageFilePath))
{
using (DataSet ds = new DataSet())
{
ds.ReadXml(xmlImageFilePath);
gvImage.DataSource = ds;
gvImage.DataBind();
}
}
}

Step 4: gvImage_RowDataBound will add onclick javascript event on each image in a cell, on click of image EnlargeImage javascript will be invoked

protected void gvImage_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
HtmlGenericControl divImg = (HtmlGenericControl)e.Row.Cells[1].FindControl("divImg");
Image img = (Image)e.Row.Cells[1].FindControl("Image1");
img.Attributes.Add( "onclick", "return ElargeImage('" + divImg.ClientID + "','" + img.ImageUrl + "');");

}
}

Step 5: Add EnlargeImage and CloseImage javascript method in the aspx page. EnlargeImage will enlarge the image in the same cell and CloseImage will close enlarged image.

<script language="javascript" type="text/javascript">
function EnlargeImage(divid, src) {
eDiv = document.getElementById(divid);
eDiv.innerHTML = "<table><tr><td><a href="#" onclick=CloseImage('" + divid + "');>Close</a></td></tr><tr><td><img src=\"" + src + "\"/ height="500" width="750"></td></tr><tr><td><a href="#" onclick=CloseImage('" + divid + "');>Close</a></td></tr></table>";
}

function CloseImage(divid) {
eDiv = document.getElementById(divid);
eDiv.innerHTML = ';
}

</script>

Live demo and downloadable code is available in Add image in the gridview and zoom it on click

Set Index of AccordionPane using Javascript

In this article, I will explain how to set index of Accordion pane using javascript.

Step 1: Create an Accordion control with three panes

<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">
<Header>Accordion Set Index Demo1</Header>
<Content>First Accordion Pane</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
<Header>Accordion Set Index Demo2</Header>
<Content>Second Accordion Pane</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="AccordionPane3" runat="server">
<Header>Accordion Set Index Demo3</Header>
<Content>Third Accordion Pane</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>

Step 2: Create three buttons to set index of each accordion pane. Each button will call SetIndex javascript method.

<asp:Button ID="btnTest" OnClientClick="return SetIndex(0)" runat="server" Text="Set Index1" />
<asp:Button ID="btnTest1" OnClientClick="return SetIndex(1)" runat="server" Text="Set Index2" />
<asp:Button ID="btnTest2" OnClientClick="return SetIndex(2)" runat="server" Text="Set Index3" />

Step 3: Create SetIndex javascript method which sets the index of Accordion Pane based on the index number passed to SetIndex method.

<script language="javascript" type="text/javascript">

function SetIndex(index) {
var acc = $get('<%=MyAccordion.ClientID%>');
if (acc != null) {
var accBehave = acc.AccordionBehavior;
accBehave.set_SelectedIndex(index);
}
return false;
}

</script>

Visit Set Index of AccordionPane using Javascript for live demo and downloadable code.

LINQ - How to read and search an element in XML

In this article, I will explain how to use XDocument to read XML Attribute value.

Step 1: Add a TextBox and Button, TextBox will be used to search the attribute value based on the Id entered in the textbox.

<asp:TextBox ID="txtId" runat="server"></asp:TextBox>
<asp:Button ID="btnGetValue" Text="Get Value" runat="server" OnClick="btnGetValue_Click" />

Step 2: Create a XML file like below structure.

<Messages>
<Message id='One'>
<Display>Messageid is one.</Display>
</Message>
<Message id='Two'>
<Display>Messageid is two.</Display>
</Message>
<Message id='Three'>
<Display>Messageid is three.</Display>
</Message>
<Message id='Four'>
<Display>Messageid is four.</Display>
</Message>
<Message id='Four'>
<Display>Messageid is again four.</Display>
</Message>
<Message id='One'>
<Display>Messageid is again one.</Display>
</Message>
</Messages>

Step 3: Create a method GetValues which will return List of matching elements found in the XML document.

public static List<string> GetValues(string strFileName, string strDescendants, string strAttribute, string strAttributeValue, string strElement)
{
XDocument xmlDoc = XDocument.Load(strFileName); //Open XML file
var xmlValue = from c in xmlDoc.Descendants(strDescendants)
where c.Attribute(strAttribute).Value.ToLower().Equals(strAttributeValue.ToLower())
select (string)c.Element(strElement);
List<string> strList = xmlValue.ToList<string>();
return strList;
}

Step 4: btnGetValue_Click event of button will invoke GetValues

protected void btnGetValue_Click(object sender, EventArgs e)
{
string strFileName = Server.MapPath("Message.xml");
string strDescendants = "Message";
string strAttribute = "id";
string strAttributeValue = txtId.Text;
string strElement = "Display";
List<string> lstValues = GetValues(strFileName, strDescendants, strAttribute, strAttributeValue, strElement);
if (lstValues.Count > 0)
{
foreach (string strValue in lstValues)
{
Response.Write(strValue + "<br/>");
}
}
else
{
Response.Write("No matching record found.");
}
}

Visit LINQ - How to read and search an element in XML for live demo and download the code