I am working on a web application with DevExtreme JQuery. In the frontend I am displaying a DataGrid which is created in a cshtml file. With DevExtreme you can add an Add Button to the DataGrid opening a popup where you fill the DataGrid with the content you want for each Datagrid row. Which looks in cshtml something like this
@(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");
});
Now the thing is I want to customize the popup window in typescript. (For example I want to change the size of the popup in Typescript) In order to do so I thought I can put an wrapper Attribut over the page and select the popup. Which kinda works (The Popup gets selected) but I can't get the specific DevExtreme options to modify the popup in 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
If you have any tips, what I can try or if my approach could work or not is highly appreciated!