Master Details using AJAX and the UpdatePanelPopupExtender - Raj Kaimal

Master Details using AJAX and the UpdatePanelPopupExtender

This is old code. Consider using these methods instead:

Ajax control toolkit Modal Popup
iQuery Dialog

----


The UpdatePanelPopupExtender is a simple ASP.Net AJAX extender that can be attached to any UpdatePanel control. This extender allows you to postion the attached UpdatePanel beside any control you specify. Here are a couple screen shots of what you can do with it.

Master Details
This shows an UpdatePanel positioned next to a "Details Icon". The UpdatePanel contains a DetailsView which displays details of the record selected. This allows for editing of the current row in the GridView.

UpdatePanelPopupExtender1

Master Multiple Details
Uses the Wizard control as a sidebar navigator

UpdatePanelPopupExtender3

 

AJAX search
The results are returned in a multiple column GridView with the GridView paging turned on.

 UpdatePanelPopupExtender2

Download Code and sample here (look under Flan AJAX Controls)
Mirror

Please let me know what you think. Thanks.

Published Wednesday, January 17, 2007 5:33 PM by rajbk

Comments

# re: Master Details using AJAX and the UpdatePanelPopupExtender

I am really impressed with the control. It is really wonderful and very easy to use control. The functionality it provides is really great.

Thursday, January 18, 2007 8:06 AM by A.R. Ashraf

# re: Master Details using AJAX and the UpdatePanelPopupExtender

Thanks for you contribution. This simplifies things for a project I'm working on.  Anything that saves room on the screen helps.

Friday, January 19, 2007 8:31 PM by cspikes

# re: Master Details using AJAX and the UpdatePanelPopupExtender

Awesome control.  I am playing with it as I type.  But I had a quick question...My DetailsView in the Wizard is using an ObjectDatasource instead of the SQLSource...how can I expose the ID from the initial Gridview to my ObjDataSource?

Cheers!

Thursday, March 8, 2007 5:47 PM by Ryan

# re: Master Details using AJAX and the UpdatePanelPopupExtender

Better than i would ever.

Sunday, April 15, 2007 3:07 AM by Alejandro

# re: Master Details using AJAX and the UpdatePanelPopupExtender

Looks impressive !! I will really give it a try :)

Monday, April 23, 2007 10:51 AM by jaja

# re: Master Details using AJAX and the UpdatePanelPopupExtender

That is a really great funcionality, but how do you do it?

You only show, but don't explain :(

Wednesday, May 16, 2007 6:02 AM by Nuno Ferreira

# re: Master Details using AJAX and the UpdatePanelPopupExtender

Nuno,

The sample code link is included at the end of the post.

Wednesday, May 16, 2007 8:07 AM by rajbk

# re: Master Details using AJAX and the UpdatePanelPopupExtender

Raj, this is a wonderful tool, well designed and easy to use, thanks for sharing it with us!

Sunday, May 27, 2007 11:05 AM by Luis Quintero

# re: Master Details using AJAX and the UpdatePanelPopupExtender

I have found your control really useful. I was wondering if you could give me some advice on how to modify the control in order to make it work similar to the AJAX Toolkit's ModalPopUpExtender, I mean to gray the backgroud behind the UpdatePanelPopUpExtender and to disable all interactions with the page elements behind it.

Would you mind to help me on this?

Wednesday, June 13, 2007 6:52 PM by Alejandro García

# re: Master Details using AJAX and the UpdatePanelPopupExtender

Hi Raj - Excellent control :) Have been incorporating into my site. However, as the last post mentioned, is there a way to disable interactions with page behind the popup? I am finding a user opens the popup and edits the entry. If they accidently click outside the popup on the page behind or just press the enter key, the popup  closes and all updates are lost. If you could provide some way or some advice on how to stop this happening, it would be greatly appreciated ! Many Thanks for all the work you have done on this ! :)

Tuesday, June 26, 2007 2:20 AM by C27Smithson

# re: Master Details using AJAX and the UpdatePanelPopupExtender

U r answer to my qustion about this AJAX control

Saturday, August 4, 2007 9:33 AM by kiran chougule

# re: Master Details using AJAX and the UpdatePanelPopupExtender

Hi Raj

This is control is amazing, I wish i had the skills to create such a control hehehe (One Day I will have the skills.) Its quite obvious I'm new to ASP.NET and AJAX, so I've got just one thing that I would like you to help me with or maybe 2. I've been coding in VB since asp days so I don't really know C# and your entire Project is in C#, I was wondering if you had the same project in VB?

and being a VB person I seem to always find example C# and I cant really learn from because I don't know were to start. Is there a way that I can convert from C# to VB?

anyway thanks in Advance.

Saturday, August 11, 2007 4:48 PM by Muzi

# re: Master Details using AJAX and the UpdatePanelPopupExtender

is there a way the above code can be make it to AutoComplete? instead of click on search button? and also when the user click on select i want to that value to be in the textbox, wondering how would you do?

thanks.

Saturday, August 11, 2007 5:52 PM by Nisar Khan

# re: Master Details using AJAX and the UpdatePanelPopupExtender

Hi Raj

I did it, I was able to convert the code from C# to VB! YEAH!!! it was actually quite easy, now I'm able to use the UpdatePanelPopupExtender control. I'm going to use it to Display a Form. anyway back to coding....

later

Saturday, August 11, 2007 6:47 PM by Muzi

# re: Master Details using AJAX and the UpdatePanelPopupExtender

Hi Raj,

i have implemented Master/Detail sample into my project everything is good but i have to click TWICE sometimes more then TWICE to get DetailsView, why is that happening?

anybody?

thanks.

Monday, August 13, 2007 2:08 PM by Mike

# re: Master Details using AJAX and the UpdatePanelPopupExtender

does anybody happen to figured out?

Wednesday, June 13, 2007 6:52 PM by Alejandro GarcĂ­a:

I have found your control really useful. I was wondering if you could give me some advice on how to modify the control in order to make it work similar to the AJAX Toolkit's ModalPopUpExtender, I mean to gray the backgroud behind the UpdatePanelPopUpExtender and to disable all interactions with the page elements behind it.

Would you mind to help me on this?

Monday, August 13, 2007 2:13 PM by Mike

# re: Master Details using AJAX and the UpdatePanelPopupExtender

Hi Raj.

Awesome control. I was hoping you can help me with this. Instead of detail view i would like to use some label and textboxes and fill values in to it based on the row selected. how can i get the selected value in code behind. is there a method or properties i can use to get this value.

Raj

Wednesday, August 29, 2007 11:32 PM by Raj

# re: Master Details using AJAX and the UpdatePanelPopupExtender

Raj, thank you very much, this is great, just what I needed!

Wednesday, September 5, 2007 11:15 AM by Sonic

# re: Master Details using AJAX and the UpdatePanelPopupExtender

Hi Raj,

This is a Awesome Control i ever seen. I am trying to incorporate the controls provided by you in my project. As many of the people asked how to stop closing the popup whenever user clicks anywhere in the webpage.

Hope you would help me in this. Thank you very much.

Friday, September 21, 2007 5:08 AM by Kumar

# re: Master Details using AJAX and the UpdatePanelPopupExtender

The reason why the popup is hidden is to preserve the state of the page. For example, lets say you have the popup visible and we left it visible while someone performed some other action on the page that

a) caused the page to partially refresh

b) deleted the record being viewed

c) caused the position of the gridview to be changed.

 
Actions like this and others make the item being viewed in the popup in a "dirty state", which is why it is hidden when you click on the page.

I think you can comment certain lines in the javascript code which will prevent the popup from being hidden but do so at your own risk.
 

Raj

Monday, September 24, 2007 4:17 AM by Raj Kaimal

# re: Master Details using AJAX and the UpdatePanelPopupExtender

I've having some trouble with the UpdatePanelPopupExtender inside a multiview.  When I display a different view, the controls javascript wants to fire, but since that particular view is not visible I get javascript errors.  (it's trying to set the style attribute to hide/show the element and the element does not exist)

Monday, September 24, 2007 8:39 AM by Randell

# re: Master Details using AJAX and the UpdatePanelPopupExtender

Thank you very much Raj.

Tuesday, September 25, 2007 3:39 AM by Kumar

# re: Master Details using AJAX and the UpdatePanelPopupExtender

Hello Raj, Thanks for the great toys!

I was reading through this last post and I wondered if I could avoid those issues from happening if I referenced the button control for the event of clicking a row?

I am trying set an OnRowCreated="RowCreated" reference in the gridview to link with the asp:ImageButton itemTemplate control?

Currently I have added my event to change color when I click a row in the mypage.cs file:

protected void RowCreated(object sender, GridViewRowEventArgs e)

   {

       e.Row.Attributes.Add("onClick", "this.style.background='#FFC0C0'");

   }

Would wiring it up to run the same as the button still cause these failures you spoke of?

Tuesday, September 25, 2007 5:12 PM by Chris Moor

# re: Master Details using AJAX and the UpdatePanelPopupExtender

Chris,

Doing that will not break anything. You will have a UI issue though. Anytime you click on a row, it will get highlighted and it will remain like that since there is no code to revert the row back to its original color.

You could fix this by causing the GridView to refresh on async postback or you may be able to write some additional JavaScript code to enumerate the rows and revert them back to their color on async postback. IMHO, highlighting the row is unnecessary since you already know which row you are working with by the little triangle on the left.

Hope that helps.

Raj

Tuesday, September 25, 2007 10:32 PM by rajbk

# re: Master Details using AJAX and the UpdatePanelPopupExtender

Thanks Raj! What I really wanted to do was have the entire row highlight work the same as clicking the image button. Brings up the DetailsView data of that of that GridView row?

I can't seem to find the CSS they used in the AJAX demo of their GridView update panel working where any click on the row fires the details view.

Friday, September 28, 2007 4:48 PM by Chris Moor

# re: Master Details using AJAX and the UpdatePanelPopupExtender

Simon,

Read this:

www.asp.net/.../UpdatePanelOverview.aspx

Look under the section "Controls that Are Not Compatible with UpdatePanel Controls"

Raj

Thursday, October 18, 2007 11:56 PM by rajbk

# re: Master Details using AJAX and the UpdatePanelPopupExtender

Hey Raj, How are you?

Well Im working on grid view. what I wanted is

-> when ever i select a data I need a popup which displays the details of that particular data without refreshing the page & I need to call the details from the another control.

to be more specific -> I need to get the controls from different ascx files on my default.aspx file.

-> I need to extend the selection of the data couple of times.

Thanks,

Sagar

Tuesday, October 30, 2007 4:07 AM by Sagar

# re: Master Details using AJAX and the UpdatePanelPopupExtender

I get the following stack trace and have not been able to veiw your product:  

Error 1 Could not load type 'System.Web.UI.Compatibility.CompareValidator' from assembly 'System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35'. (C:\Downloads\UpdatePanelUpdateViaScript\UpdatePanelUpdateViaScript\web.config line 22) C:\Downloads\UpdatePanelUpdateViaScript\UpdatePanelUpdateViaScript\Default.aspx 5

Thursday, November 8, 2007 6:09 PM by Darrell

# re: Master Details using AJAX and the UpdatePanelPopupExtender

When using this great extender, I sometimes get the error "elt has no properties" when raising a linkbutton event. (In IE, the error message is "style is null or not an object".) I can work around it by adding a asp:PostbackTrigger to the updatepanel, but that is a pretty ugly work around off course. Any ideas, anyone?

Kind regards Lars  

Tuesday, January 15, 2008 2:23 AM by Lars

# re: Master Details using AJAX and the UpdatePanelPopupExtender

hey raj

great extender!

i wish i found it earlier

i have a question -

im putting a datalist in the UPPEx

the datalist is filled with links to the db

hitting a link updates the db

it all works great

...

except that hitting the link

doesnt close the panel after it updates

any thoughts?

all my divs and spans are set

please help

thanks!

Saturday, January 26, 2008 11:05 PM by toy

# re: Master Details using AJAX and the UpdatePanelPopupExtender

toy,

Call the .Hide() method on the UpdatePanelPopupExtender from code behind.

Raj

Saturday, January 26, 2008 11:29 PM by rajbk

# re: Master Details using AJAX and the UpdatePanelPopupExtender

hey raj -

thanks that worked like a dream

i love this control!

so my next question is -

using your flan project -

my intellisense seems to be messed up

i put that datalist in the UPPEx instead of the details view

and now when i try to access it via code-behind

it deosnt recognise it as a legal control

if i use it anyway the code compiles fine

im just a little spoiled and

would like to have my intellisense popup my answers for me...

Monday, January 28, 2008 4:35 PM by toy

# re: Master Details using AJAX and the UpdatePanelPopupExtender

Hi Raj,

I am trying to use this amazing control in my project. When I click on details icon the popup opens fine with my detailsview. Though, I spent a long time trying to figure out why it always the record shown on detailsview is always the fisrt record from my datasource.

I saw that you left a comment in you code:

//We have declared that UpdatePanel2 should refresh when the SelectedIndex for GridView1 changes

//<asp:AsyncPostBackTrigger ControlID="GridView1" EventName="SelectedIndexChanged"></asp:AsyncPostBackTrigger>

So I am using the trigger, but unfortunately it doesn't work.

What else I might be doing wrong?

Thanks.

Friday, February 1, 2008 11:01 AM by Leonardo

# re: Master Details using AJAX and the UpdatePanelPopupExtender

Leonardo,

I don't think you have setup the DetailsView control to change based on the SelectedValue of GridView1.

<asp:ControlParameter ControlID="GridView1" Name="CustomerID" PropertyName="SelectedValue"

                       Type="String" />

Saturday, February 2, 2008 10:54 PM by rajbk

# re: Master Details using AJAX and the UpdatePanelPopupExtender

>i have one panel that requires an ID from selected value of the gridview

Toy,

Here is one way of doing it:

forums.asp.net/.../1108433.aspx

Saturday, February 2, 2008 11:15 PM by rajbk

# re: Master Details using AJAX and the UpdatePanelPopupExtender

First of all thanks for the wonderful code. I was able to get your VS2005 download to work perfectly. However, in your VS2008 I'm getting design time errors in the Updatepanels that say "Error Creating Control" -UpdatePanelPopupExtender1 A script manager must exist on the current page. Have you experienced this? and if so, is there an easy work around?

Tuesday, March 11, 2008 12:33 PM by Mark Solomon

# re: Master Details using AJAX and the UpdatePanelPopupExtender

I'm getting design time (not runtime) errors with the UpdatePanelPopupExtender. The error that is on the control is specifically, ["Error Creating Control" -UpdatePanelPopupExtender1 A script manager must exist on the current page.] When this error occurs, your wonderful DetailsView controls disappear from view in the designer. But the code does compile and run just fine. It's the design view I'm refering to. (If you just code via HTML, I'm wondering if you didn't notice this issue, or perhaps, I need to re-install Visual Studio 2008).

Wednesday, March 12, 2008 10:44 AM by Mark Solomon

# re: Master Details using AJAX and the UpdatePanelPopupExtender

Mark,

I see the error in design mode. I will release a fix sometime tonight. All I need to do is add a this.DesignMode check in the extender.

Thanks for letting me know.

Raj

Wednesday, March 12, 2008 11:25 AM by rajbk

# re: Master Details using AJAX and the UpdatePanelPopupExtender

Hi,

when the page loads (and the popup should be invisible), the popup always seems to suddenly flicker, before it gets hidden again. Is there a way of getting rid of this?

Kind regards Lars

Thursday, April 3, 2008 4:05 AM by Lars

# re: Master Details using AJAX and the UpdatePanelPopupExtender

Hi Raj,

I've just seen your answer about my question regarding to select a specific record on detailsview when clicking to the "details icon" of the GridView.

You were right, I am not using asp:ControlParameter and the reason is because it is not supported, because I am using a csla:CslaDataSource.

Is there another way around to get an specific record selected on the detailsview based on the selected value of the grid?

Appreciate your help.

Thanks a lot.

Friday, April 11, 2008 12:39 PM by Leonardo

# re: Master Details using AJAX and the UpdatePanelPopupExtender

Leonarda,

The CslaDataSource raises the SelectObject event. Handle that event and set your parameter there.

Raj

Friday, April 11, 2008 2:30 PM by rajbk

# re: Master Details using AJAX and the UpdatePanelPopupExtender

nice control.... very useful

Thursday, April 24, 2008 7:50 AM by Shiva

# re: Master Details using AJAX and the UpdatePanelPopupExtender

AJAX search

The results are returned in a multiple column

GridView with the GridView paging turned on.

which code should i download to get the Ajax Search

Friday, May 2, 2008 12:46 PM by Mahesh

# re: Master Details using AJAX and the UpdatePanelPopupExtender

Dear Raj.

I'm getting the "error creating control" with UpdatePanelPopupExtender1 in design time on VS2008.

Did you released the fix? Where?

Thanks.

Tuesday, May 6, 2008 9:40 PM by ismlynx

# re: Master Details using AJAX and the UpdatePanelPopupExtender

Line 132:                    return sm;

Line 133:                }

Line 134:                throw new HttpException("A ScriptManager control must exist on the current page.");

Line 135:            }

Line 136:        }

Source File: E:\Softwares\Flan\FlanAjaxControls-211\Development\FeatureBranch1\Flan.Controls\UpdatePanelPopupExtender\UpdatePanelPopupExtender.cs    Line: 134

Tuesday, May 13, 2008 7:38 AM by A ScriptManager control must exist on the current page

# re: Master Details using AJAX and the UpdatePanelPopupExtender

I fail to see a control in designer. I was able to in vs2005. Any way I can fix this problem by myself? thx :)

Monday, May 19, 2008 8:21 AM by anothervs2008user

# re: Master Details using AJAX and the UpdatePanelPopupExtender

This is a great control, but I am not able to get it to work with drag & drop functionality. I have tried it with the dragpanelextender in ajax control toolkit.

Are there any plans of adding drag & drop functionality to this control?

/Fredric

Wednesday, June 11, 2008 7:19 AM by Fredric

# re: Master Details using AJAX and the UpdatePanelPopupExtender

Is there anyway to use a checkbox?

Wednesday, June 11, 2008 10:42 PM by Travis

# re: Master Details using AJAX and the UpdatePanelPopupExtender

Hi Raj,

I had trouble downloading the source code from the site you mentioned.

Please advise

thanks

ajay

Tuesday, June 17, 2008 4:36 PM by Ajay Mishra

# re: Master Details using AJAX and the UpdatePanelPopupExtender

Hi Raj,

You have used the SQL data source -> to populate the details page/panel.

How would one go about if the data in the details - popup - panel  is populated by a Getmethod() ?

Please help..

thanks

ajay

Wednesday, June 18, 2008 2:07 PM by Ajay Mishra

# re: Master Details using AJAX and the UpdatePanelPopupExtender

Hye Raj i Must say u have done work very hard on this ....Hats off to ur efforts...

Friday, July 4, 2008 10:48 AM by Ruchit

# re: Master Details using AJAX and the UpdatePanelPopupExtender

Is there a way to make the panel extend upwards(so the callout is at the bottom corner of the panel)?

Im using the panel at the bottom of a page.  It contains an accordion control, and when it extends down, the user has to scroll every time.

Thursday, August 7, 2008 11:25 AM by ata1k

# re: Master Details using AJAX and the UpdatePanelPopupExtender

Hi, I have been using your component and I think that is genial. Sometimes I experimented some errors, that I think it is caused by a bad configuration or something like that, becouse when I run an application in my VS runs correctly, but when I publish my application on the server doesn't run or in some cases it runs correctly. I compared sources codes and I saw the same code when I show the component. Which could be a cause of my problem??

Thursday, December 18, 2008 2:50 PM by Cesar Madrid

# re: Master Details using AJAX and the UpdatePanelPopupExtender

Hi,

Would it be possible to use the DragPanelExtender control with this control?

At this moment I am trying and after pressing a button inside of a panel, the position will be changed. It is not kept!

Any ideas?

Thanks in advance.

Friday, April 23, 2010 5:41 AM by nguyenxh

# re: Master Details using AJAX and the UpdatePanelPopupExtender

I found a problem. If I put a textbox and a requiredfieldvalidator control in your sample(for example master_detail_with_edit sample).

The web page can popup but I can't edit if I don't input a character in that textbox.

Wednesday, June 9, 2010 2:06 AM by wtmw