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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid Dialog style inside TabItem gets overwritten / is not setable

Thread ID:

Created:

Updated:

Platform:

Replies:

141175 Nov 28,2018 11:18 AM UTC Dec 3,2018 05:26 AM UTC ASP.NET Core - EJ 2 5
loading
Tags: DataGrid
Florian Schwendtner
Asked On November 28, 2018 11:18 AM UTC

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 [Syncfusion]
Replied On 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. 


Florian Schwendtner
Replied On 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

Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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. 


Florian Schwendtner
Replied On 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:



Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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.                         


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon