Archive for the ‘GridView’ Category

Hyperlinked Images in ASP.NET GridView (Open content in new page)

Solution : 1

TemplateField with Hyperlink and img Element

<asp:TemplateField>
<ItemTemplate>
<asp:HyperLink runat=”server” NavigateUrl='<%# Eval(“PAGE_Or_PDF_URL”) %>’
Target=”_blank”>
<img src='<%# Eval(“Image_URL”) %>’ alt=”PDF IMAGE” />
</asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>

Solution : 2
TemplateField with ImageButton

<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton runat=”server” ImageUrl='<%# Eval(“Image_URL”) %>’
PostBackUrl='<%# Eval(“Target_URL”) %>’ AlternateText=”Alternate Text” />
</ItemTemplate>
</asp:TemplateField>
Solution : 3

TemplateField with Javascript
<asp:TemplateField>

<asp:ImageButton ID=”ImageButton1″ runat=”server” ImageUrl='<%# Eval(“Image_URL”) %>’ OnClientClick='<%# String.Format (“javascript:return openTargetURL(\”{0}\”)”, Eval(“Target_URL”)) %>’ AlternateText=”Alternate Text” />

</asp:TemplateField>

Advertisements

MouseOver background color effect in gridview

Solution : 1

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes.Add(“onmouseover”, “this.originalcolor=this.style.backgroundColor;” + ” this.style.backgroundColor=’#0090CB’; this.style.color = ‘white'”);
e.Row.Attributes.Add(“onmouseout”, “this.style.backgroundColor=this.originalcolor; this.style.color = ‘black'”);
}
}

Solution : 2

#GridView1 tr.rowHover:hover
{
background-color: Yellow;
font-family: Arial;
font-size:12px;
}

<asp:gridview id=”GridView1″ runat=”server” enableviewstate=”false” rowstyle-cssclass=”rowHover” clientidmode=”Static” />

 

 

Maintain GridView scroll position on postback

Copy blow code and paste it in your page to maintain Gridview Scroll position during postback event fire.

 

<script type=”text/javascript”>

var xPos, yPos;
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);
function BeginRequestHandler(sender, args) {
xPos = $get(‘scrollDiv’).scrollLeft;
yPos = $get(‘scrollDiv’).scrollTop;
}
function EndRequestHandler(sender, args) {
$get(‘scrollDiv’).scrollLeft = xPos;
$get(‘scrollDiv’).scrollTop = yPos;
}

</script>