New Article: Building On Demand Loading Master/Details using GridView, CollapsiblePanelExtender and ASP.NET Ajax PageMethods

by mosessaur| 06 August 2008| 16 Comments

Well, I'm done with this article that show in details how to build on demand loaded details from master data using GridView and CollapsiblePanelExtender control. Read the article.

Earlier this year Matt Berseth posted about Building a Grouping Grid with the ASP.NET 3.5 LinqDataSource and ListView Controls. Then I followed his post with 2 other posts discussing same idea but with different implementation:

Later I got few comments about how to implement that using AJAX, in order to display the details data on demand. At that time Dave was demonstrating the usage of jQuery AJAX on his post Using jQuery to consume ASP.NET JSON Web Services. So I came up with another demo to apply on demand loading of details data in my post GridView Grouping Master/Detail Drill Down using AJAX and jQuery.

Again I got few other comments on how to apply same approach, but using ASP.NET AJAX Control Toolkit CollapsiblePanelExtender control. So here I'm going to provide how to do that using CollapsiblePanelExtender and ASP.NET AJAX PageMethods call to apply on demand loading of details from the master data. You can read my article and view Demo here.

Comments can be left on this post as currently pages feature of BlogEngine.Net doesn't support comments.

Comments (16) -

Bartek
Bartek Australia on 8/12/2008 1:32 AM Great article Muhammad, very useful!

Cheers,
Bartek
http://blog.evonet.com.au/
|
Pete
Pete United States on 8/16/2008 10:00 AM This is another great article.   Whated to know your opion of JQGrid a JQuery plugin for grids.   The link below goes into the features of JQGrid.  At the bottom of the article it has a link for documentation ( 86 pages), and demos ( more that 20 ).  I am currently playing with it so that it calls a WebService to get grid display information.

http://www.jgari.com/?tag=jqgrid

|
mosessaur
mosessaur Egypt on 8/16/2008 10:33 AM Thank you Pete for the comment. I didn't try JQGrid, but I think it is fine. I'm a fan of jQuery actually, and I built this sample to match the old one I built using jQuery.
Thank you for the link I'm going to check it out.
|
Justin Riggs
Justin Riggs United States on 8/16/2008 11:42 PM Muhammad,

Great blog - I've used a lot of your ideas in my work. When I downloaded the sample and ran this project, I keep getting "Error executing child request for handler 'System.Web.UI.Page'. I didn't touch the files - didn't even open Default.aspx, just hit F5 after opening the Solution. Any ideas on what's causing this, and how to fix it?

Thanks again for the great work. I look forward to more reading soon...
|
Justin Riggs
Justin Riggs United States on 8/16/2008 11:47 PM Sorry, I lied... I did change the connection string - that's what allowed the Master GridView to display in the first place.
|
mosessaur
mosessaur Egypt on 8/17/2008 6:45 AM @Justin, thank you! and I hope that everything is working fine with you now! let me know if you have any problem Smile
|
Justin Riggs
Justin Riggs United States on 8/17/2008 8:47 PM Muhammad,

I'm okay with that issue, but I do have a quick question for you. I've been combining your collapsible panel with Matt Berseth's hovermenu for awhile now, but when I populated my details gridview with your method, the "edit" function no longer worked. When I click the edit link, the details gridview closes, and I can no longer expand the master gridview. I replicated the problem using code only from your CollapsiblePanel demo and Matt's HoverGridviewEditMenu demo, so my hunch is that it has something to do with the way you're populating that details gridview.

Any help you could offer would be appreciated - I'm about done with this project, and just want to move on to something else! I'd be happy to send you code, if that would help.

Justin
|
Justin Riggs
Justin Riggs United States on 8/17/2008 8:51 PM Sorry, I keep breaking these posts into two...

I should have mentioned, I *can* still page through the data, and when I do, I'm able to expand/collapse the panel again... until I try to edit a row. Then it locks up again!
|
mosessaur
mosessaur Egypt on 8/17/2008 10:47 PM @Justin Well sending the code would be great. And are you trying to edit the Master rows or details rows?!
Editing the detail rows will not work properly at these samples. It needs some redo work to make it possible.
|
Angel Escobedo
Angel Escobedo Peru on 9/17/2008 7:59 AM Hi there, im trying to use the onExpand property and set it with a javascript but i get the following error "There was an error rendering the control" 'onExpand' could not be set on property 'OnExpand'

it could be for version of toolkit? thanks in advance!
|
mosessaur
mosessaur Egypt on 9/17/2008 8:02 AM @Angel Escobedo There is no such property in the existing Toolkit. I made this property myself just to enhance design time.
You can use the code attached where these properties exist. I had to inherit from the existing Collapsible Panel to provide these properties.
|
Angel Escobedo
Angel Escobedo Peru on 9/18/2008 7:30 AM Im using Web Application, i import the class you extend as a component, It appears in the top of the toolbar, i drag it to the code view and property shows but cant assign the javascript function to it :/
|
mosessaur
mosessaur Egypt on 9/18/2008 7:33 AM @Angel Escobedo Well this is weird. Can you send me sample project to my e-mail through contact form?
|
Angel Escobedo
Angel Escobedo Peru on 9/18/2008 8:26 AM Hi there i sent it, please stay in contact please thanks in advance ^^
|
mosessaur
mosessaur Egypt on 9/18/2008 12:21 PM @Angel Escobedo I guess this is a designer issue
checkout this post http://www.west-wind.com/Weblog/posts/484172.aspx
|
Angel Escobedo
Angel Escobedo Peru on 9/21/2008 9:43 PM Hi there, thanks for all your support, i noticed that is true! is a visual designer issue (service pack 1), well about your demo, is possible to use it like a viewer, and then select one row from the header and transport data between webforms? i said, using your demo in a popup window, and then using javascript to paste the data(header and detail) from a selected header row, i was using it with a link that contains a javascript function but now i dont know where to reubicate that...
|
Comments are closed