Grid Dialog style inside TabItem gets overwritten / is not setable

[Florian Schwendtner]

Hi Team, 

we placed an ejs-grid inside an ejs-tabitem via content/#section and set the grid edit-mode to "dialog". Unfortunately we are not able to set the width or height of the dialog window as it works if we placed it outside the tabitem. The dialog-popup gets always shrinked to the smallest possible size. Away from that hte "dialog.position.Y" for example gets applied and works. Is it a bug or is there any chance to override something? 

Its my first time in this forum but i try to provide the affected code snippets:

The Tab and the Grid:

The function:

And the Result:

[Thavasianand Sankaranarayanan]

Hi Florian, 

Thanks for contacting Syncfusion support. 

We have validated the provided information and checked with our end but we are unbale to reproduce the reported problem in our sample. Could you please provide more information or below details it will be more helpful for us to provide a better solution as soon as possible. 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/GridinsideTab-core1190025243  

• Share the Grid package version that you are used in your application.
• Reported problem occurred in all browser or any specific browser(share browser details)
• If possible share the sample or reproduce the reported problem in the above sample.

Regards, 

Thavasianand S. 

[Florian Schwendtner]

Hi Support,

thanks for the fast reply and the sample project. I opend it, hit F5 and tried the Website with Chrome, Firefox and Edge... every Browser shows the same super-small dialog:

Chrome:

Firefox:

Edge:

And here are the versions i was using in my project:

If i can give you any further information - please let me know. 

Attachment: SyncfusionGridInTabExamplePageWithError_ad260f86.rar

[Thavasianand Sankaranarayanan]

Hi Florian, 

Thanks for your update. 

Query : every Browser shows the same super-small dialog: 

By default, we have applied max-height for the edit dialog based(may vary on browsers) on the html and body element height. We suggest you to apply the height for the html and body element as 100% to resolve the reported problem (super small dialog). 

Please refer to the below code example for more information. 

<ejs-tab id="defaultTab" heightAdjustMode="Auto" overflowMode="Scrollable"> 

    <e-tab-tabitems> 

        <e-tab-tabitem header="ViewBag.headerTextTwo" content="#general-section"></e-tab-tabitem> 

        <e-tab-tabitem header="ViewBag.headerTextOne" content="#user-section"></e-tab-tabitem> 

    </e-tab-tabitems> 

</ejs-tab> 

 

<div id="general-section" style="display: none"> 

    <h1>TEST</h1> 

</div> 

 

    <div id="user-section" style="display: none"> 

        <div class="row"> 

        <ejs-grid id="Grid" actionComplete="actionComplete" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" dataSource="ViewBag.dataSource"> 

            <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog"></e-grid-editSettings> 

            <e-grid-columns> 

                <e-grid-column field="CustomerID" headerText="Customer Name" width="150"></e-grid-column> 

            </e-grid-columns> 

        </ejs-grid> 

   </div> 

    <style> 

      // Its need to add the below CSS 

 

        html, body{ 

            height: 100% !important; 

        } 

    </style> 

    <style> 

     // add the below css to set grid form table width 100% 

    .e-edit-dialog .e-gridform .e-table { 

        border-collapse: separate; 

        border-spacing: 11px; 

        width: 100%; 

    } 

 

    .e-edit-dialog .e-dlg-content { 

        position: relative; 

    }        

    </style> 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/Syncfusioneditdialog-151374598  

Note : We have already included the above CSS in source level since the CDN is not refreshed so we suggest you to apply the CSS in sample level. Once the cdn refreshed there is no need to add the above CSS(for apply width 2^nd table). 

Regards, 

Thavasianand S. 

[Florian Schwendtner]

Thanks a lot! This was the best and fastest support ever! Big thanks to the team!

It works:

[Thavasianand Sankaranarayanan]

Hi Florian, 

 

We are happy that the problem has been solved. 

 

Please get back to us if you need any further assistance.  

                          

Regards, 

Thavasianand S.