Telerik Modal Popup Size

Question

我有一个使用Master表单和Telrik AJAX控件的ASP.NET项目。我使用基本列表和编辑控件来帮助保持UI的一致性。在RadGrid的模式弹出窗口中打开编辑控件时，窗体小于控件。有没有办法强制窗口适当的大小，或至少手动设置大小？

基本列表控件：

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ListBaseControl.ascx.cs" Inherits="BaseControls.ListBaseControl" %>
<div>
    <telerik:RadGrid ID="uxBaseList" runat="server" AutoGenerateColumns="false" OnDeleteCommand="uxBaseList_DeleteCommand" 
        OnNeedDataSource="uxBaseList_NeedDataSource" Skin="WebBlue" OnItemDataBound="uxBaseList_ItemDataBound" >
        <MasterTableView EditMode="PopUp" CommandItemDisplay="Top"  >
            <EditFormSettings UserControlName="CustomerEditControl.ascx" EditFormType="WebUserControl" >
                <PopUpSettings Modal="true" />
                <EditColumn UniqueName="EditCommandColumn" ></EditColumn>
            </EditFormSettings>
        </MasterTableView>
    </telerik:RadGrid>
</div>

派生列表控件：

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ShopListControl.ascx.cs" Inherits="ShopUI.ShopListControl" %>
<%@ Register Src="../BaseControls/ListBaseControl.ascx" TagName="ListBaseControl" TagPrefix="uc1" %>

<uc1:ListBaseControl ID="uxShopList" runat="server" DataKeyFields="ShopId" DeleteButtonVisible="false" EditControlName="ShopEditTest.ascx" />

基础编辑控件：

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="EditBaseControl.ascx.cs" Inherits="BaseControls.EditBaseControl" %>
<div class="footer" >
    <div>
        <asp:Button ID="uxSave" runat="server" Text="Save" OnClick="uxSave_Click" CommandName="Update" CssClass="btn btn-primary" />
        <asp:Button ID="uxCancel" runat="server" Text="Cancel" OnClick="uxCancel_Click" CommandName="Cancel" CssClass="btn btn-danger"/>
    </div>
    <div>
        <asp:Label ID="uxChangedBy" runat="server"></asp:Label>
        <asp:Label ID="uxChangedDate" runat="server"></asp:Label>
    </div>
</div>

派生的编辑控件：

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ShopEditBoostrapTest.ascx.cs" Inherits="ShopUI.ShopEditTest" %>
<div class="container" style="height:500px;width:950px;">
    <div class="row" style="background-color: lightgray;">
        <div class="span12" style="background-color: lightblue;">Welcome to my web site</div>
    </div>
    <div class="row" style="background-color: lightgray;">
        <div class="span4" style="background-color: lightcoral;">
            <table style="width: 100%">
                <caption>Span 4</caption>
                <tr>
                    <td>Cell (0, 0)</td>
                    <td>Cell (0, 1)</td>
                </tr>
                <tr>
                    <td>Cell (1, 0)</td>
                    <td>Cell (1, 1)</td>
                </tr>
            </table>
        </div>
        <div class="span8" style="background-color: lightpink;">Span 8</div>
    </div>
</div>

结果：

Answer 1

请尝试使用以下代码段。

方法1。

 <EditFormSettings>
                <PopUpSettings Width="700px" Height="700px" Modal="true" />
 </EditFormSettings>

方法2。

ASPX

        <ClientSettings AllowRowsDragDrop="true">
            <ClientEvents OnPopUpShowing="PopUpShowing" />
        </ClientSettings>

JS

        var popUp;
        function PopUpShowing(sender, eventArgs) {
            popUp = eventArgs.get_popUp();
            popUp.style.width = "500px";
            popUp.style.height = "500px";
        }