如何修改使用 Typescript 在 cshtml 文件中创建的现有 DevExtreme JQuery DataGrid

Question

我正在使用 DevExtreme JQuery 开发一个 Web 应用程序。在前端，我显示一个在 cshtml 文件中创建的 DataGrid。使用 DevExtreme，您可以向 DataGrid 添加一个“添加”按钮，打开一个弹出窗口，您可以在其中为每个 Datagrid 行填充所需的内容。在 cshtml 中看起来像这样

@(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");
        });

现在的问题是我想在打字稿中自定义弹出窗口。 （例如我想更改 Typescript 中弹出窗口的大小） 为了做到这一点，我想我可以在页面上放置一个包装器属性并选择弹出窗口。哪种有效（弹出窗口被选中），但我无法获得特定的 DevExtreme 选项来修改 TypeScript 中的弹出窗口。

// gets all Elements with '.dx-popup-normal'
const $test = $('#Note').find('.dx-popup-normal') 

// selects the Popup I want
const $popup = $test[0] 

//Another Idea which didn't work
//const popupTest = DxHelpers.tryGetInstanceFromElem($test) as DevExpress.ui.dxPopup

如果您有任何建议，我可以尝试什么，或者我的方法是否有效，我们非常感激！

Answer 1

我对你的问题有一些想法。 因为你使用 DataGrid 中的模式编辑来打开 Popup（默认），所以你可以创建自己的自定义弹出窗口：

@(
Html.DevExtreme().Popup().ID("dxPopup").ShowTitle(true).Title("Your Title").Width("20%").Height("34%")
    .DragEnabled(false).Visible(false).ShowCloseButton(true).HideOnParentScroll(false)
    .ToolbarItems(toolBar =>
    {
        toolBar.Add().Widget(w => w.Button().Text("Create").OnClick("ShowRadioButton").Icon("plus").Type(ButtonType.Success)).Location(ToolbarItemLocation.After).Toolbar(Toolbar.Bottom);
    })
    .ContentTemplate(new TemplateName("Form_Template_In_Popup"))
)

以及代码内容模板：

@using (Html.DevExtreme().NamedTemplate("ChooseTypeRecipt"))
{
     @(Html.DevExtreme().Form<T>().ID("dxForm").ScrollingEnabled(true).LabelLocation(FormLabelLocation.Top)
 .Items(items =>
 {
     
 })
 .LabelMode(FormLabelMode.Static)
 .LabelLocation(FormLabelLocation.Left)
 )
}