Replacing ajax:ModalPopupExtender with Telerik Radwindow

578 views Asked by At

At the current my website is using ajax:ModalPopupExtender to show my grid data as a popup, and now I want to replace it with Telerik RadWindow to consistent with the UI of the website.

BUT, I still have not found a way to do it. Because ajax:ModalPopupExtender is server-side while Radwindow is Client-side.

Is there any way that can solve my problem?

Please give me an advice.

Scenario: In my website, there is a button named "mybutton". When I hit it, ajaxToolkit:ModalPopupExtender will be shown my data under a popup.

Here is the code in my *.ascx file:

<asp:LinkButton ID="myHiddenControl" runat="server" Text=""></asp:LinkButton>

<ajaxToolkit:ModalPopupExtender runat="server" 
    ID="myModalPopupExtender"
    TargetControlID="myHiddenControl" 
    BehaviorID="programmaticModalPopup"
    PopupControlID="myPanel" 
    BackgroundCssClass="modalBackground"
    DropShadow="True" 
    RepositionMode="RepositionOnWindowScroll" 
    DynamicServicePath=""
    Enabled="True">
</ajaxToolkit:ModalPopupExtender>

<asp:Panel runat="server" 
    CssClass="modalPopup" 
    ID="myPanel"
    Style="width: 440px; height: 500px; padding: 10px;" meta:resourcekey="Resource2">

    <div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <table>
                    <!-- show my data in a table -->
                </table>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
</asp:Panel>

And here is vb code

Protected Sub mybutton_Click(ByVal sender As Object, ByVal e As EventArgs) Handles mybutton.Click
    myModalPopupExtender.Show()
End Sub
1

There are 1 answers

0
rdmptn On

Use the ContentTemplate of the dialog and register a script to show it. Basically

        <telerik:RadWindow ID="RadWindow1" runat="server">
            <ContentTemplate>
                <asp:Panel runat="server"
                           CssClass="modalPopup"
                           ID="myPanel"
                           Style="width: 440px; height: 500px; padding: 10px;" meta:resourcekey="Resource2">

                    <div>
                        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                            <ContentTemplate>
                                <table>
                                    <!-- show my data in a table -->
                                </table>
                            </ContentTemplate>
                        </asp:UpdatePanel>
                    </div>
                </asp:Panel>
            </ContentTemplate>
        </telerik:RadWindow>

and

 Dim script As String = "function f(){$find(""" + RadWindow1.ClientID + """).show(); Sys.Application.remove_load(f);}Sys.Application.add_load(f);"
 ScriptManager.RegisterStartupScript(Page, Page.GetType(), "key", script, True)