1. Home
  2. Forum
  3. Blazor
  4. Problem Resizing Dialog in Target

Problem Resizing Dialog in Target

Hi,

I have a dialog component targeted in my data grid. When I try to resize the dialog component, it shrinks down a lot and is not able to expand past a certain height.

I updated Syncfusion from 19.1.0.69 to 19.2.0.49 and received this problem.




Attachment: ResizeDialogBug_2a807676.zip

6 Replies
GK Gunasekar Kuppusamy Syncfusion Team August 3, 2021 12:55 PM UTC

Hi Kenney,

We have validated your reported query "I have a dialog component targeted in my data grid. When I try to resize the dialog component, it shrinks down a lot and is not able to expand past a certain height" and we were not able to reproduce the mentioned issue from our end.

We also prepared a sample for your reference

Sample: https://www.syncfusion.com/downloads/support/forum/167791/ze/DataGrid_Server-1605279282

Please share the following details, 
  • If possible share the simple sample or sufficient code snippets to replicate the issue
  • Or modify the above sample to replicate the issue
The above details will be helpful for us to validate and reproduce the issue from our end and assist you at the earliest. 


Regards,
Gunasekar


KP Kenney Phan August 3, 2021 05:24 PM UTC

Hi,


I found out the problem occurs when there is a GridForeignColumn in the Datagrid. When a GridForeignColumn exists, the dialog component targeted in the datagrid is not able to resize correctly in SF 19.2.0.49.


I have attached the modified sample project


Attachment: ResizeDueToGridForeignColumn_c7c59bff.zip

GK Gunasekar Kuppusamy Syncfusion Team August 4, 2021 01:05 PM UTC

Hi Kenney,


Good day to you.


We have checked the shared sample from our end and we were able to reproduce the issue.

On the initial loading, grid height is not properly set. So we suggest you set a minimum height for the grid component element.

We have prepared a sample for your reference.

Code snippets:
<style>
  #datagrid {
      min-height: 500px;
  }
</style>


Please check the sample and lets us know if the solution meets your requirement.

Regards,
Gunasekar


GK Gunasekar Kuppusamy Syncfusion Team August 4, 2021 01:08 PM UTC

Hi Kenney,


Good day to you.


We have checked the shared sample from our end and we were able to reproduce the issue.

On the initial loading, grid height is not properly set. So we suggest you set a minimum height for the grid component element.

We have prepared a sample for your reference.

Code snippets:
<style>
  #datagrid {
      min-height: 500px;
  }
</style>


Please check the sample and lets us know if the solution meets your requirement.

Regards,
Gunasekar


KP Kenney Phan August 4, 2021 05:53 PM UTC

Hi,


Sure the fixed min-height will allow the dialog to resize correctly. However, if I use the search bar to minimize the amount of records on the table, there is a gap of white space below the table.

Is there a way to make the table height responsive while allowing the dialog to resize correctly within the datagrid?


I have demonstrated the issue in the attached video with the modified sample project.


Thank you


Attachment: FixedSizedBug_183eb992.zip


GK Gunasekar Kuppusamy Syncfusion Team August 5, 2021 02:41 PM UTC

Hi Kenney, 

Good day to you.


We have validated your reported query "However, if I use the search bar to minimize the amount of records on the table, there is a gap of white space below the table." and its reprocible from our end.

To resolve this issue, we have rendered dialog on the grid component DataBound event.
So that, the dialog is opened after the data is loaded on the grid and also has a proper height at that time.

We have modified the sample also,

Code snippets:
<SfGrid DataSource="@Orders" AllowFiltering="true" AllowPaging="true" ID="datagrid" Toolbar="@(new List<Object>() { "Search" })">
    <GridEvents DataBound="OnOpen" OnActionComplete="ActionCompletedHandler" TValue="Order"></GridEvents>
    <GridFilterSettings Type="FilterType.CheckBox"></GridFilterSettings>
    <GridColumns>
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
        <GridForeignColumn Field=@nameof(Order.EmployeeID) ForeignKeyField=@nameof(EmployeeData.EmployeeID) ForeignKeyValue=@nameof(EmployeeData.FirstName) ForeignDataSource="@Employees" HeaderText="ID" TextAlign="TextAlign.Center" Width="120"></GridForeignColumn>
        <GridColumn Field=@nameof(Order.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
    </GridColumns>
</SfGrid>

@if (isShow) {
<SfDialog @ref="dialogObj" Target="#datagrid" Width="900px" ShowCloseIcon="true" IsModal="true" CloseOnEscape="true" AllowDragging="true" EnableResize="true">
    <DialogTemplates>
        <Header> About SYNCFUSION succinctly series </Header>
        <Content>
            <p>
                In the Succinctly series, Syncfusion created a robust, free library of more than 130 technical e - books formatted for PDF, Kindle, and EPUB.<br> <br>
                The Succinctly series was born in 2012 out of a desire to provide concise technical e-books for software developers. Each title in the Succinctly series
                is written by a carefully chosen expert and provides essential content in about 100 pages.
            </p>
        </Content>
    </DialogTemplates>
</SfDialog>
}
@code{
   
    public async Task OnOpen()
    {
        this.isShow = true;
    }



Please check the sample and let us  know if the solution meets your requirement

Regards,
Gunasekar


Loader.
Up arrow icon