I'm currently developing a web application using DevExtreme JQuery. Within the frontend, I have set up a DataGrid in a cshtml file. With DevExtreme functionality, it's possible to include an Add Button to the DataGrid that triggers a popup for inputting content into each row of the DataGrid. This is how it appears in the 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");
});
My goal now is to personalize the popup window using TypeScript. For instance, adjusting the size of the popup through TypeScript. Initially, I attempted adding a wrapper Attribute to the page and selecting the popup element, which was somewhat successful (the Popup was selected). However, I struggled to access and modify the specific DevExtreme options for 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 suggestions on different approaches I could take, or if my current strategy is viable, your insights would be greatly appreciated!