Tags: ajax, aspnet, button, clicks, datagrid, dropdown, dynamic, inside, link, modelpopup, net, showing

modelpopup ..

On .Net » ASP.NET AJAX

16,417 words with 11 Comments; publish: Sun, 06 Jan 2008 06:56:00 GMT; (10062.50, « »)

I have a link button inside the dynamic datagrid, when it is clicks this modelpopup will be showing it will have only one dropdown and ok button cancel button. How can I do? I thought I need to use this code above, but I don't know where to put the code inside the datagrid or outside? If it is long thing I 'll be glad to create a new question?

found this , don't know how to implement it..

<ajaxToolkit:ModalPopupExtender ID="MPE" runat="server"

TargetControlID="LinkButton1"

PopupControlID="Panel1"

BackgroundCssClass="modalBackground"

DropShadow="true"

OkControlID="OkButton"

OnOkScript="onOk()"

CancelControlID="CancelButton"

PopupDragHandleControlID="Panel3" />

All Comments

Leave a comment...

  • 11 Comments
    • Because datagrid can contain many rows (so many link buttons) and all of them have to popup the same modalpopup, I would suggest you do the following.

      1. Create the linkbutton in the datagrid and in the click event of the linkbutton show the modal from the code like this.

      mpe.Show()
      2. Create the Modalpopup as follows.
      <asp:Button ID="FakePopButton" runat="server" style="display:none;" /><ajaxToolkit:ModalPopupExtender ID="mpe" runat="server" BackgroundCssClass="modalBackground" TargetControlID="FakePopButton" PopupControlID="Panel1" CancelControlID="CancelButton" />
      #1; Sun, 06 Jan 2008 06:57:00 GMT
    • I am not really clear where to put

      mpe.Show()
      and why I am putting button? And I suppose I need to put this outside the updatepanel and datagrid?
      #2; Sun, 06 Jan 2008 06:58:00 GMT
    • I understood my second question, but would I put MPE.Show to in server side code inside the function on linkbutton clickevent?

      #3; Sun, 06 Jan 2008 06:59:00 GMT
    • Yes, that's correct. If you don't do this way, then you have to put a modalpopup in ItemTemplate of the datagrid which would mean heavier web page and viewstate.

      #4; Sun, 06 Jan 2008 07:00:00 GMT
    • I did this stuff and cannot see any pop up

      this is in datagrid

      <asp:TemplateColumnHeaderText="link">

      <ItemTemplate>

      <asp:LinkButtonID="LinkButton1"OnClientClick="ShowModalPopup()"runat="server">Click here to choose Error Reason</asp:LinkButton>

      </ItemTemplate>

      </asp:TemplateColumn>

      then I called this on server side

      PublicFunction ShowModalPopup()

      MPE.Show()

      EndFunction

      then I put this code after datagrid and updatepanel and contenttemplate

      <asp:PanelID="Panel1"runat="server"Height="104px"Width="233px"style="z-index: 100; left: 298px; position: absolute; top: 126px">

      <asp:DropDownListID="DropDownList1"runat="server"style="z-index: 100; left: 0px; position: absolute; top: 0px"Width="188px">

      </asp:DropDownList>

      <asp:ButtonID="Button1"runat="server"Style="z-index: 101; left: 3px; position: absolute;

      top: 38px"Text="Button"/>

      <asp:ButtonID="Button2"runat="server"Style="z-index: 103; left: 79px; position: absolute;

      top: 35px"Text="Button"/>

      </asp:Panel>

      <asp:ButtonID="FakePopButton"runat="server"style="display:none;"/>

      <ajaxToolkit:ModalPopupExtenderID="MPE"runat="server"BackgroundCssClass="modalBackground"

      TargetControlID="FakePopButton"PopupControlID="Panel1"

      CancelControlID="CancelButton"/>

      can not even see my panel pop up, what am I doing wrong?

      #5; Sun, 06 Jan 2008 07:01:00 GMT
    • Protected sub ShowModalPopup(sender asObject, e as EventArgs) MPE.Show()End Sub
      <asp:LinkButtonID="LinkButton1"OnClientClick="ShowModalPopup()"runat="server">

      If you see the linkbutton's declaration the handle for the click event is run on the clientside whereas the ModalPopup.Show is run at server side. You can use either client side or server side to show the modalpopup. I have never run the popup from the client side because I had to process the modalpopup contents according to the grid data. This should work, but I haven't tried it. Keep the above code as it is and add the following to the aspx page

      <script language="javascript"

      function ShowModalPopup()

      {

      $find("MPE").show();

      // return false;

      }

      function HideModalPopup()

      {

      $find("MPE").hide();

      }

      </script

      Other way is to change the linkbutton to run the Click event on the server side.

      <asp:LinkButton ID="LinkButton1" runat="server" OnClick="ShowModalPopup">
      Change your method declaration as below
      #6; Sun, 06 Jan 2008 07:02:00 GMT
    • for some reason it is expecting object, keep saying null or object expected something like that. Maybe because checkox inside the datagrid and also linkbutton inside too, when user clicks checkbox linkbutton will be clickable and whenuser clicks linkbutton for that row, it will pop up panel having dropdown in it...

      have a warning saying Warning 1 Function 'ShowModalPopup' doesn't return a value on all code paths. A null reference exception could occur at run time when the result is used.

      and when I put my cursor on link button I can see javascript error below..I see this below the page

      Javascript:_doPostBack('dg$ct02$Linkbutton1',") and says object expected..

      #7; Sun, 06 Jan 2008 07:03:00 GMT
    • Here is a working example:

      <asp:GridView ID="Grid1" runat="server" > <Columns> <asp:TemplateField> <ItemTemplate> <asp:LinkButton ID="LinkButton1" runat="server" OnClientClick="return ClientShowModal();" Text="Show Modal" /> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView><asp:Panel ID="NotePopup" runat="server" CssClass="modalPopup" style="display:none;"> <h1>A Note</h1> <p>Yes this is a modal popup</p></asp:Panel> <asp:Button ID="FakeNote" runat="server" style="display:none;" /> <ajaxToolkit:ModalPopupExtender ID="notempe" runat="server" BackgroundCssClass="modalBackground" TargetControlID="FakeNote" PopupControlID="NotePopup" BehaviorID="ModalBehaviour" /><script type="text/javascript"> function ClientShowModal() { $find("ModalBehaviour").show(); return false; }
      If you have any doubts reply to the post.
      #8; Sun, 06 Jan 2008 07:04:00 GMT
    • THANK YOU SO MUCH! At least I understood how it works, how about if I want to apply styles, because on popup panel it only has plain text you showed and I want to know how to do that it will show around panel color, that time panel sticks out more..

      #9; Sun, 06 Jan 2008 07:05:00 GMT
    • I guess what I mean

      BackgroundCssClass="modalBackground" is set to this but nothing happening on my page , it is almost like this page I am replying you now,reply panel popup and around is like gray out.. I want that..

      #10; Sun, 06 Jan 2008 07:06:00 GMT
    • If you have AjaxToolkit samples website, then look at the stylesheet and looks for ModalPopup's CSS properties. The grayed look is obtained by the css property opacity. At the moment, I can't get hold of the css. But I copied the CSS from the abovementioned CSS file.

      #11; Sun, 06 Jan 2008 07:07:00 GMT