Sunday, 30 December 2012 13:55

how to use ajaxcontroltoolkit to show Datalist items details

Written by 
Rate this item
(0 votes)

If you want to show DataList control's each item's
details when clicked in the 'details' link then
there is a easy way to do that is to use
CollapsiblePanelExtender.

This ajaxcontroltoolkit is avalable to achieve this kind of task
without writing large codes.in this post i am
going to show that.to use this CollapsiblePanelExtender
you have to have ajaxcontroltoolkit installed.
this post will guide you-
http://www.asp.net/ajaxlibrary/act.ashx

the following codes shows how to do-

<asp:DataList ID="StudListDataList" DataKeyField="id"
runat="server" RepeatDirection="Horizontal" RepeatColumns="3">
<ItemTemplate>
<asp:Image id="StudImage" ImageUrl='<%# Eval("imageurl") %>'
Height="110" Width="110" runat="server" /><br />
<b><asp:Label CssClass="StudNameStyle" ID="StudName"
runat="server" Text='<%# Eval("studname") %>' /></b><br />

<asp:Label ID="BreedLabel" Text="Breed:" runat="server" />
<asp:Literal ID="BreedName" runat="server"
Text='<%# Eval("breedname") %>'/><br />
<asp:Label ID="StateLabel" Text="State:" runat="server" />
<asp:Literal ID="Literal1" runat="server"
Text='<%# Eval("state") %>'/><br />

<asp:Label ID="Label11" Text="Price:" runat="server" />
<asp:Literal ID="Literal10" runat="server"
Text='<%# Eval("price") %>'/><br />

<asp:LinkButton ID="textLabel" runat="server"
Text="Show Details" />

<asp:Panel ID="detailsPanel" CssClass="ModalWindow"
runat="server">
<asp:Label ID="Label4" CssClass="popuUpTextStyle"
Text="First Name:" runat="server" /><br />
<asp:Literal ID="Name" runat="server"
Text='<%# Eval("name") %>'/><br />
<asp:Label ID="Label6" CssClass="popuUpTextStyle"
Text="Address:" runat="server" /><br />
<asp:Literal ID="Literal2" runat="server"
Text='<%# Eval("address") %>'/><br />
<asp:Label ID="Label7" CssClass="popuUpTextStyle"
Text="City:" runat="server" /><br />
<asp:Literal ID="Literal3" runat="server"
Text='<%# Eval("city") %>'/><br />
<asp:Label ID="Label8" CssClass="popuUpTextStyle"
Text="Zip:" runat="server" /><br />
<asp:Literal ID="Literal4" runat="server"
Text='<%# Eval("zip") %>'/><br />
<asp:Label ID="Label9" CssClass="popuUpTextStyle"
Text="Phone:" runat="server" /><br />
<asp:Literal ID="Literal5" runat="server"
Text='<%# Eval("phone") %>'/><br />
<asp:Label ID="Label10" CssClass="popuUpTextStyle"
Text="Email:" runat="server" /><br />
<asp:Literal ID="Literal6" runat="server"
Text='<%# Eval("email") %>'/><br />
</asp:Panel>

<asp:CollapsiblePanelExtender ScrollContents="true"
ID="Collaps1" TargetControlID="detailsPanel"
CollapsedText="Show Details" ExpandControlID="textLabel"
CollapseControlID="textLabel"
SuppressPostBack="True" ExpandedText="Hide Details"
Collapsed="true" runat="server" ExpandedSize="70"
TextLabelID="textLabel">

by this above code when user clicks show Details
link of datalist item then the details will be
shown from the detailsPanel Panel.this Panel is set
as TargetControlID by the CollapsiblePanelExtender.

Read 1871 times
Super User

Email This email address is being protected from spambots. You need JavaScript enabled to view it.
Login to post comments