We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Grid Dialog style inside TabItem gets overwritten / is not setable

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:



5 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team November 29, 2018 08:50 AM UTC

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. 


  • 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. 



FS Florian Schwendtner November 29, 2018 09:11 AM UTC

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


TS Thavasianand Sankaranarayanan Syncfusion Team November 30, 2018 12:42 PM UTC

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> 



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 2nd table). 

Regards, 
Thavasianand S. 



FS Florian Schwendtner December 2, 2018 11:06 AM UTC

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

It works:




TS Thavasianand Sankaranarayanan Syncfusion Team December 3, 2018 05:26 AM UTC

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.                         


Loader.
Live Chat Icon For mobile
Up arrow icon