How do I modify an existing DevExtreme JQuery DataGrid created in a cshtml file with Typescript

23 Views Asked by At

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!

0

There are 0 best solutions below