简体   繁体   中英

Replacing ajax:ModalPopupExtender with Telerik Radwindow

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

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)

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM