Description:-
In
this example I explain that how to Showing and hiding details in a datagrid row
in asp.net.
DataGrid is an ASP.NET server side control to display data in a tabular format with
options of choice, sorting, and editing entries.it is same like Gridview
control to manipulate data in tabular format.
In this example we use XML file in which data are stored and
we are bind XML data to DataGrid control.in Datagrid we provide to link for
each and every rows to show and Hide the details of the record. When user click
on show details then prize coloumn of Datagrid will be shown and click on hide
link then it will be hide the prize coloumn.
Dynamically Bind data in Ajax Accordion Panel Ajax Accordion panel Example in asp.net
how to Restrict the size of file upload when upload by user restrict the size of file upload control in asp.net
ShowDetails.aspx:-
<%@ Page Language="C#" Debug="true" %>
<%@ import Namespace="System.Data" %>
<script runat="server">
public void
Page_Load(Object sender, EventArgs e)
{
//ClientScript.RegisterClientScriptBlock(GetType(),"key","<script>
alert('Inserted successfully');
string books = Server.MapPath("aspnetbooks.xml");
DataSet
dataSet = new DataSet();
dataSet.ReadXml(books);
datagrid1.DataSource = dataSet;
datagrid1.DataBind();
ClientScript.RegisterClientScriptBlock(GetType(), "key", "<script>alert('Record
Added successfully');", true);
}
</script>
<html>
<head>
<script type="text/javascript">
var action;
IE4
= (document.all && !document.getElementById) ? true
: false;
NS4
= (document.layers) ? true : false;
IE5
= (document.all && document.getElementById) ? true
: false;
NS6
= (!document.all && document.getElementById) ? true
: false;
function showDetails(action)
{
x
= 0;
changeText(arguments[x]);
if (IE4) {
prefix = document.all(arguments[x]).style; }
if (NS6 || IE5) { prefix = document.getElementById(arguments[x]).style
}
if (NS4){ prefix = document.layers(arguments[x]); }
if (prefix.visibility == "visible")
{
prefix.visibility
= "hidden";
prefix.fontSize = "0";
}
else
{
prefix.visibility
= "visible";
prefix.fontSize
= "18";
}
}
function changeText(link)
{
link += "link";
linkText = document.getElementById(link);
linkText.firstChild.nodeValue;
if
(linkText.firstChild.nodeValue == "Show Details")
{
linkText.firstChild.nodeValue = "Hide Details";
}
else
{
linkText.firstChild.nodeValue = "Show Details";
}
}
</script>
</head>
<title> how to Showing and hiding details in a datagrid row
in asp.net.</title>
<body>
<form runat="server"><b>click to Show
and hide details in a datagrid row </b>
<asp:DataGrid id="datagrid1"
runat="server"
Height="35px"
autoGenerateColumns="False"
BorderWidth="2px">
<AlternatingItemStyle
forecolor="#99CC99"
backcolor="#FFEADE"></AlternatingItemStyle>
<ItemStyle forecolor="#FFCC99"
backcolor="#99AA99"></ItemStyle>
<Columns>
<asp:TemplateColumn>
<ItemTemplate>
<table
border="0"
id= "Table1">
<tr>
<td>
<a id='<%#
DataBinder.Eval(Container.DataItem, "bookID") %>link' href="javascript:showDetails('<%#
DataBinder.Eval(Container.DataItem, "bookID") %>')">Show
Details</a>
</td>
<td>
<b>Title:</b><%# DataBinder.Eval(Container.DataItem,
"Title") %></td>
</tr>
<tr id='<%#
DataBinder.Eval(Container.DataItem, "bookID") %>' style="font-size: 0px; height: 0px; visibility: hidden;" border="0">
<td>
</td>
<td>
<b>Price:</b><%# DataBinder.Eval(Container.DataItem,
"Price") %> <b>Year:</b><%# DataBinder.Eval(Container.DataItem,
"Year") %></td>
</tr>
</table>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
</form>
</body>
</html>
Aspnetbooks.xml:-
<?xml version="1.0" encoding="UTF-8"?>
<books>
<book bookID="100">
<title>Teach
Yourself Active Server Pages 3.0 in 21 Days</title>
<price>34.95</price>
<year>1999</year>
</book>
<book bookID="101">
<title>Designing
Active Server Pages</title>
<price>29.95</price>
<year>2000</year>
</book>
<book bookID="102">
<title>ASP.NET:
Tips, Tutorials, and Code</title>
<price>34.95</price>
<year>2001</year>
</book>
<book bookID="103">
<title>ASP
Unleashed</title>
<price>24.95</price>
<year>1998</year>
</book>
<book bookID="104">
<title>ASP.NET
Unleashed</title>
<price>32.45</price>
<year>2002</year>
</book>
<book bookID="105">
<title>Creating
Data Driven ASP.NET Applications</title>
<price>31.95</price>
<year>2002</year>
</book>
<book bookID="106">
<title>ASP.NET
Data Web Controls Kick Start</title>
<price>29.95</price>
<year>2003</year>
</book>
<book bookID="107">
<title>Programming
ASP.NET</title>
<price>19.95</price>
<year>2002</year>
</book>
</books>
0 comments:
Post a Comment