Stange behavior if we have a Dialog Visible=False et beginning

[Brice FROMENTIN]

Hello,

When I made a button that shows a content then the content does not fit in the Dialog., But when the dialog is displayed on start, content is well displayed.

Here my full sample;

@page "/Test"

@using Syncfusion.EJ2.Blazor.Data

@using Syncfusion.EJ2.Blazor.DropDowns

@using Syncfusion.EJ2.Blazor.Grids

@using Syncfusion.EJ2.Blazor.Popups

<EjsButton @onclick=@OnClick>Button</EjsButton>

<EjsDialog @ref="@dialog" IsModal=true CloseOnEscape=true ShowCloseIcon="true" AllowDragging=true EnableResize=true Visible="false" Width="500px" Height="500px">

    <DialogTemplates>

        <Header>

            <EjsDropDownList TValue="int" TItem="Dummy" DataSource="@dataSource" Width="100%x">

                <DropDownListFieldSettings Text="Valeur" Value="Id" />

            </EjsDropDownList>

        </Header>

        <Content>

            <EjsGrid TValue="@ExpandoObject" AllowSorting="true" AllowPaging="true" AllowFiltering="true" AllowResizing=true EnableAltRow="true" Width="100%" Height="100%">

                <EjsDataManager Adaptor="Adaptors.ODataV4Adaptor" Url=@(RestClient.RootUrl + "odata/" + "Utilisateurs") />

                <GridPageSettings PageSize="50" PageSizes="new int[] { 25, 50, 100, 250, 500 }" />

                <GridColumns>

                    <GridColumn Field="Id"></GridColumn>

                    <GridColumn Field="Valeuir"></GridColumn>

                </GridColumns>

            </EjsGrid>

        </Content>

    </DialogTemplates>

</EjsDialog>

<EjsDialog IsModal=true CloseOnEscape=true ShowCloseIcon="true" AllowDragging=true EnableResize=true Width="500px" Height="500px">

    <DialogTemplates>

        <Header>

            <EjsDropDownList TValue="int" TItem="Dummy" DataSource="@dataSource" Width="100%x">

                <DropDownListFieldSettings Text="Valeur" Value="Id" />

            </EjsDropDownList>

        </Header>

        <Content>

            <EjsGrid TValue="@ExpandoObject" AllowSorting="true" AllowPaging="true" AllowFiltering="true" AllowResizing=true EnableAltRow="true" Width="100%" Height="100%">

                <EjsDataManager Adaptor="Adaptors.ODataV4Adaptor" Url=@(RestClient.RootUrl + "odata/" + "Utilisateurs") />

                <GridPageSettings PageSize="50" PageSizes="new int[] { 25, 50, 100, 250, 500 }" />

                <GridColumns>

                    <GridColumn Field="Id"></GridColumn>

                    <GridColumn Field="Valeuir"></GridColumn>

                </GridColumns>

            </EjsGrid>

        </Content>

    </DialogTemplates>

</EjsDialog>

@code

{

    EjsDialog dialog;

    List<Dummy> dataSource = new List<Dummy>();

    public class Dummy

    {

        public int Id;

        public string Valeur;

    }

    protected override void OnInitialized()

    {

        base.OnInitialized();

        for (int index = 0; index < 100; ++index)

        {

            dataSource.Add(new Dummy { Id = index, Valeur = index.ToString() });

        }

    }

    private void OnClick(MouseEventArgs arguments)

    {

        dialog.Show();

    }

}

Thanks.

[Narayanasamy Panneer Selvam]

Hi Brice,

Greetings from Syncfusion support. 

We have validated your query. From the shared code example we have prepared a sample to reproduce your issue. Unfortunately we couldn’t able to reproduce your issue. 

Code example: 

@page "/" 

@using Syncfusion.EJ2.Blazor.Data 

@using Syncfusion.EJ2.Blazor.DropDowns 

@using Syncfusion.EJ2.Blazor.Grids 

@using Syncfusion.EJ2.Blazor.Popups 

 

<EjsButton @onclick=@OnClick>Button</EjsButton> 

 

<EjsDialog @ref="@dialog" IsModal=true CloseOnEscape=true ShowCloseIcon="true" AllowDragging=true EnableResize=true Visible="false" Width="500px" Height="500px"> 

    <DialogTemplates> 

        <Header> 

            <EjsDropDownList TValue="int" TItem="Dummy" DataSource="@dataSource" Width="100%x"> 

                <DropDownListFieldSettings Text="Valeur" Value="Id" /> 

            </EjsDropDownList> 

 

        </Header> 

        <Content> 

            <EjsGrid AllowPaging="true" TValue="OrdersDetails"> 

                <EjsDataManager Url="https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders" CrossDomain="true" Adaptor="Adaptors.ODataAdaptor"></EjsDataManager> 

                <GridPageSettings PageCount="5"></GridPageSettings> 

                <GridColumns> 

                    <GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

                    <GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn> 

                    <GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn> 

                    <GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

                    <GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn> 

                </GridColumns> 

            </EjsGrid> 

        </Content> 

    </DialogTemplates> 

</EjsDialog> 

 

 

<EjsDialog IsModal=true CloseOnEscape=true ShowCloseIcon="true" AllowDragging=true EnableResize=true Width="500px" Height="500px"> 

    <DialogTemplates> 

        <Header> 

            <EjsDropDownList TValue="int" TItem="Dummy" DataSource="@dataSource" Width="100%x"> 

                <DropDownListFieldSettings Text="Valeur" Value="Id" /> 

            </EjsDropDownList> 

 

        </Header> 

        <Content> 

            <EjsGrid AllowPaging="true" TValue="OrdersDetails"> 

                <EjsDataManager Url="https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders" CrossDomain="true" Adaptor="Adaptors.ODataAdaptor"></EjsDataManager> 

                <GridPageSettings PageCount="5"></GridPageSettings> 

                <GridColumns> 

                    <GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

                    <GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn> 

                    <GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn> 

                    <GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

                    <GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn> 

                </GridColumns> 

            </EjsGrid> 

        </Content> 

    </DialogTemplates> 

</EjsDialog> 

 

@code 

{ 

    EjsDialog dialog; 

 

    List<Dummy> dataSource = new List<Dummy>(); 

 

    public List<OrdersDetails> GridData { get; set; } 

    public class OrdersDetails { 

        public string OrderID { get; set; } 

        public string CustomerID { get; set; } 

        public string OrderDate { get; set; } 

        public string Freight { get; set; } 

        public string ShipCountry { get; set; } 

    } 

 

    public class Dummy 

    { 

        public int Id { get; set; } 

        public string Valeur { get; set; } 

    } 

 

    protected override void OnInitialized() 

    { 

        base.OnInitialized(); 

 

        for (int index = 0; index < 100; ++index) 

        { 

            dataSource.Add(new Dummy { Id = index, Valeur = index.ToString() }); 

        } 

    } 

 

    private void OnClick(MouseEventArgs arguments) 

    { 

        dialog.Show(); 

    } 

} 

We have ensured and we couldn’t able to find difference in dialog content while using Visible property. It will be helpful for us to get your issue, if you share issue reproducing screenshot, video or share reproducing steps. 

Regards,
Narayanasamy P. 

[Sabitha Rajamani]

From: Brice FROMENTIN
Sent: Monday, March 16, 2020 6:44 AM
To: Syncfusion Support <[email protected]>
Subject: RE : Syncfusion support community forum 152439, Stange behavior if we have a Dialog Visible=False et beginning, has been updated. 

 

Thanks for your answer, but you forgot to fix to both grid :  « < Width="100%" Height="100%" > ». With this addition, you will reproduce my issue. 

 

Regards. 

[Narayanasamy Panneer Selvam]

Hi Brice, 

 

Thanks for your information.

We have validated further on your issue. The reported problem arises due to, grid was rendered before the dialog get opened. We suggest you to use two way property binding for Visible property. Use @bind-Visible property and render grid on after the dialog get opened. 

 

Code example:

 

@page "/" 

@using Syncfusion.EJ2.Blazor.Data 

@using Syncfusion.EJ2.Blazor.DropDowns 

@using Syncfusion.EJ2.Blazor.Grids 

@using Syncfusion.EJ2.Blazor.Popups 

 

<EjsButton @onclick=@OnClick>Button</EjsButton> 

 

<EjsDialog @ref="@dialog" IsModal=true CloseOnEscape=true ShowCloseIcon="true" AllowDragging=true EnableResize=true @bind-Visible="@visibility" Width="500px" Height="500px"> 

    <DialogTemplates> 

        <Header> 

            <EjsDropDownList TValue="int" TItem="Dummy" DataSource="@dataSource" Width="100%x"> 

                <DropDownListFieldSettings Text="Valeur" Value="Id" /> 

            </EjsDropDownList> 

 

        </Header> 

        <Content> 

            @if(visibility) { 

            <EjsGrid AllowPaging="true" TValue="OrdersDetails" Width="100%" Height="100%" > 

                <EjsDataManager Url="https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders" CrossDomain="true" Adaptor="Adaptors.ODataAdaptor"></EjsDataManager> 

                <GridPageSettings PageCount="5"></GridPageSettings> 

                <GridColumns> 

                    <GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

                    <GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn> 

                    <GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn> 

                    <GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

                    <GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn> 

                </GridColumns> 

            </EjsGrid> 

            } 

        </Content> 

    </DialogTemplates> 

</EjsDialog> 

 

 

<EjsDialog IsModal=true CloseOnEscape=true ShowCloseIcon="true" AllowDragging=true EnableResize=true Width="500px" Height="500px"> 

    <DialogTemplates> 

        <Header> 

            <EjsDropDownList TValue="int" TItem="Dummy" DataSource="@dataSource" Width="100%x"> 

                <DropDownListFieldSettings Text="Valeur" Value="Id" /> 

            </EjsDropDownList> 

 

        </Header> 

        <Content> 

            <EjsGrid AllowPaging="true" TValue="OrdersDetails" Width="100%" Height="100%" > 

                <EjsDataManager Url="https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders" CrossDomain="true" Adaptor="Adaptors.ODataAdaptor"></EjsDataManager> 

                <GridPageSettings PageCount="5"></GridPageSettings> 

                <GridColumns> 

                    <GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

                    <GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn> 

                    <GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn> 

                    <GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

                    <GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn> 

                </GridColumns> 

            </EjsGrid> 

        </Content> 

    </DialogTemplates> 

</EjsDialog> 

 

@code 

{ 

    EjsDialog dialog; 

 

    List<Dummy> dataSource = new List<Dummy>(); 

    public bool visibility { get; set; } = false; 

 

    public List<OrdersDetails> GridData { get; set; } 

    public class OrdersDetails { 

        public string OrderID { get; set; } 

        public string CustomerID { get; set; } 

        public string OrderDate { get; set; } 

        public string Freight { get; set; } 

        public string ShipCountry { get; set; } 

    } 

 

    public class Dummy 

    { 

        public int Id { get; set; } 

        public string Valeur { get; set; } 

    } 

 

    protected override void OnInitialized() 

    { 

        base.OnInitialized(); 

 

        for (int index = 0; index < 100; ++index) 

        { 

            dataSource.Add(new Dummy { Id = index, Valeur = index.ToString() }); 

        } 

    } 

 

    private void OnClick(MouseEventArgs arguments) 

    { 

        dialog.Show(); 

    } 

} 

Get back to us, if you need further assistance on this. 

 

Regards,
Narayanasamy P. 

[Sabitha Rajamani]

From: Brice FROMENTIN
Sent: Tuesday, March 17, 2020 6:30 AM
To: Syncfusion Support <[email protected]>
Subject: RE : Syncfusion support community forum 152439, Stange behavior if we have a Dialog Visible=False et beginning, has been updated. 

 

Thanks, I adapt your trick to my strong use of RenferFragment 😊 

[Narayanasamy Panneer Selvam]

Hi Brice, 

 

Most welcome.

We glad to hear that the provided suggestion resolved reported problem.

Regards,
Narayanasamy P.