[theunborncoder]

Hi,

We can use this type of functionality to make user more sure about his decision
eg. If i am showing some car related information in grid like car model make brand total users color and price now if some customer is interested in my car and he wants to see some more details then just clicking on "Show complete details" that perticular row expand without post back and show some more details like power HP, fuel type, Registration year etc.

So lets begin....

-first we need DataGrid with templateField
-Now customize that templateField and and one panel into it called pnl
-now on that panel add one link button named as mylink
-and add other information below that link

something like this...

<asp:TemplateField HeaderText="Other Details">
					<ItemTemplate>
						<asp:Panel ID="Panel1" runat="server" Height="16px" style="OVERFLOW: hidden" 
							Width="376px" Wrap="False">
							Car Model : 
							<a ID="mylink" runat="server" href="#" onclick="showdetails(this)">View Complete 
							Car Details</a><br />
							OtherDetails :
							<asp:Label ID="Label5" runat="server" Text='<%# Eval("OtherDetails") %>'></asp:Label>
							 <br />
							Registration City :
							<asp:Label ID="Label2" runat="server" Text='<%# Eval("RegistrationCity") %>'></asp:Label>
							<br />
							Registration Date :
							<asp:Label ID="Label3" runat="server" Text='<%# Eval("RegistrationDate") %>'></asp:Label>
							<br />
							Current Location :
							<asp:Label ID="Label4" runat="server" Text='<%# Eval("CurrentLocationCity") %>'></asp:Label>
								<br />
							Phone: 2300000000<br />
							Mobile: 9800000000
							<br />
							For the best quote, refer to Yash Car Auto when calling!</asp:Panel>
					</ItemTemplate>

I have some labels which bind with my table values you can change as per you requirement

ok we done with dataGrid

now we have to show row expanded at client end without post back for that we need to use java script
we have already bind link's onclick event to some function called "showdetails" and we pass parameter as this hence we can access our link button inside that function for chage

now write function inside java script

<script language="javascript" type="text/javascript">
		function showdetails(ctrl)
		{
				pnl = ctrl.getAttribute("ID");
				pnl = pnl.substring(0,pnl.indexOf("mylink")-1);
				pnl = pnl + "_Panel1";
			if(ctrl.innerText == "View Complete Car Details")
			{
				ctrl.innerText = "Hide Complete Car Details";
				document.getElementById(pnl).style.height="130px";
				document.getElementById(pnl).style.width="400px";
			}
			else
			{
				ctrl.innerText="View Complete Car Details";
				document.getElementById(pnl).style.height="16px";
				document.getElementById(pnl).style.width="300px";			}
		}
	</script>

now in this function get whole control now we need to find our control and access. For this we can use "ctrl.getAttribute("ID")" using this we can traverse all control inside that template control hence and check for link now once we find link change its innerText(caption) and change size of panel(pnl) using "document.getElementById(pnl).style.height" and width i change because we can have column size small at the start but on click we can show big column with more details in it.

[Frinavale]

Not a bad article

I remember helping someone recently and gave them a very similar solution. I'm sure this article will help others looking for such a solution.

Right now I'm taking a course about online business principles and one of the topics covered is "tracking users actions". The text covered the "more details" link as an example of something that you would want to track: you want to track how many people clicked the "more details" link to determine which items are most popular!

Your solution will work great and it reduces server requests; however, if you want to track which items are most popular it might be a good idea to leave it as a postback to the server

-Frinny

[Frinavale]

Trollpower, on 15 July 2010 - 05:37 AM, said:

Nice one, but maybe you take some ideas into account:

First: I would use the Expandable Panel from ajax-toolkit. It has automatically expand/collapse functionality.

Nice recommendation

Trollpower, on 15 July 2010 - 05:37 AM, said:

Second: Instead of making a full postback try to use ajax to only have a partial postback for tracking purposes. This decreaes the amount of data.

The response from the server is stripped down to the HTML content for just the UpdatePanel involved in the asynchronous (partial) postback; but the amount of data sent to the server during a partial postback is the same amount of data that is sent during a full postback.

Trollpower, on 15 July 2010 - 05:37 AM, said:

You can also have the details that will be showed in the expanded panel requested by ajax. This way you dont have to send all the data to the client but you can request the details on demand and have you tracking in one step.

Better yet, you could use this as practice to see how to make a call to a Web Service via Ajax.NET!

-Frinny

This post has been edited by Frinavale: 15 July 2010 - 06:19 AM