Wednesday, March 30, 2011

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

Friday, June 11, 2010

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

Friday, May 28, 2010

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.

Saturday, May 15, 2010

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

Site Meter