Tuesday, April 29, 2014

DevExpress modals

<dx:ASPxPopupControl ID="ProgressBarPopup"
      ClientInstanceName="ProgressBarPopup" runat="server" AllowDragging="true"
      ShowOnPageLoad="false" Modal="true" ShowCloseButton="false"
      CloseAction="None" Width="310px" Height="350px"
      PopupHorizontalAlign="WindowCenter" PopupVerticalAlign="WindowCenter"
      HeaderText="Change Me" EditTitleKey="UpdatingWhatever" >
   <Windows>
      <dx:PopupWindow Name="ProgressBarPopupWindow" CloseAction="None">
         <ContentCollection>
            <dx:PopupControlContentControl ID="ProgressBarPopupWindowContent"
                  runat="server">
               <asp:Panel ID="ProgressBarPopupWindowContentPanel" runat="server">
                  <uc3:editformheader id="ProgressBarPopupHeader" runat="server"
                        resourcekey="Whatever.UpdatingWhatever" />
                  <div>Hello World...</div>
               </asp:Panel>
            </dx:PopupControlContentControl>
         </ContentCollection>
      </dx:PopupWindow>
   </Windows>
</dx:ASPxPopupControl>

 
 

uc3:editformheader above is a web user control which is going to slurp copy out of a resource and replace the header of the modal with it. This is in-house stuff of the company I work for and not something of DevExpress itself. In order to show the modal, one needs to call this code from the JavaScript side:

ProgressBarPopup.ShowWindow(ProgressBarPopup
      .GetWindowByName("ProgressBarPopupWindow"));

 
 

Close the modal like so:

ProgressBarPopup.HideWindow(ProgressBarPopup
      .GetWindowByName("ProgressBarPopupWindow"));

No comments:

Post a Comment