如何用TypeScript修改CSHTML中创建的DevExtreme jQuery DataGrid弹窗？

方案1：直接在CSHTML配置中修改（最简单直接） #

不需要额外TypeScript代码，直接在DataGrid的弹窗配置中添加尺寸或其他自定义属性：

@(Html.DevExtreme().DataGrid<T>()
    .Editing(editing =>
    {
        editing.AllowAdding(true).Mode(GridEditMode.Popup).Form(c =>
        {
            c.LabelLocation(FormLabelLocation.Left);
        });
        editing.Popup(c =>
        {
            c.WrapperAttr(new { Id = "Note" });
            c.ShowTitle(true);
            c.Title("Neue Notiz");
            // 直接添加自定义尺寸
            c.Width(600);
            c.Height(450);
            // 还可以配置位置、动画等其他属性
            c.Position(p => p.My("center").At("center").Of(window));
        });
    })
)

方案2：通过DataGrid事件动态获取弹窗实例 #

如果需要在前端动态修改（比如根据业务逻辑调整），可以通过弹窗的onShowing事件绑定回调，在回调中获取实例并修改配置：

步骤1：在CSHTML中绑定事件

editing.Popup(c =>
{
    c.WrapperAttr(new { Id = "Note" });
    c.ShowTitle(true);
    c.Title("Neue Notiz");
    // 绑定前端回调函数
    c.OnShowing("handlePopupShowing");
});

步骤2：TypeScript中实现回调

function handlePopupShowing() {
    // 通过容器ID直接获取弹窗实例
    const popupInstance = $("#Note").dxPopup("instance") as DevExpress.ui.dxPopup;
    // 修改弹窗配置
    popupInstance.option({
        width: 700,
        height: 500,
        // 按需添加其他配置，比如禁用关闭按钮
        showCloseButton: false
    });
}

方案3：监听弹窗显示事件获取实例 #

如果需要在弹窗完全显示后修改，可监听dxshown事件：

// 监听弹窗显示完成事件
$("#Note").on("dxshown", function() {
    const popupInstance = $(this).dxPopup("instance") as DevExpress.ui.dxPopup;
    popupInstance.option("width", 650);
});

关键注意点 #

• DevExtreme组件实例获取方式是$(选择器).dx组件名('instance')，不需要查找内部的.dx-popup-normal类，直接用你设置的容器ID（#Note）即可。
• 确保代码在DOM渲染完成后执行（比如放在$(document).ready()中，或使用DevExtreme的dxready事件）。

内容的提问来源于stack exchange，提问作者user23509416