Razor Component On a Dialog Box

[Riaz Ahmed Farooqui]

I have two Razor Components for example we name it Component 1 and Component 2, On Component 1 I have a DataGrid in that Grid I Have a Button Called Button1 On that Button I want to open a Dialog box and on that Dialog box I want to show Component 2, that Component 2 is also having DataGrid, Component 1 passing one parameter to component 2 also, Please guide me how can we do that? if need any further clarification I can provide. 

[Prathap Senthil]

Hi Riaz,

Based on your requirement created the simple sample to open a Dialogue box in Component 1 and show Component 2 inside the Dialog box with a DataGrid that receives a parameter from Component 1 in the below way Kindly refer to the attached sample code snippet and sample for your reference.

//Component1.razor

<SfGrid DataSource="@Orders" AllowFiltering="true" AllowPaging="true">

    <GridColumns>

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

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

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

 

<SfButton OnClick="ShowDialog">Open Dialog</SfButton>

 

@if (IsVisible)

{

    <SfDialog  Width="1000px">

        <DialogTemplates>

            <Header>

                <SfButton OnClick="CloseDialog">Close Dialog</SfButton>

            </Header>

            <Content>

                <div>

                    <Component2 IsDialogVisible="@dialogVisible"></Component2>

                </div>

            </Content>

        </DialogTemplates>

    </SfDialog>

}

 

 

@code {

    public List<Order> Orders { get; set; }

    private bool dialogVisible = false;

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

 

    private async Task ShowDialog()

    {

        IsVisible = true;

        dialogVisible = true;

    }

    private async Task CloseDialog()

    {

        IsVisible = false;

 

    }

 

}

 

//Component2.razor.

@if (IsDialogVisible)

{

    <h3>Component 2</h3>

    <SfGrid DataSource="@Orders" AllowFiltering="true" AllowPaging="true">

        <GridColumns>

            --------

       </GridColumns>

    </SfGrid>

}

 

@code {

    public List<Order> Orders { get; set; }

 

    [Parameter]

    public bool IsDialogVisible { get; set; }

 

}

Reference:
https://blazor.syncfusion.com/documentation/dialog/getting-started

https://blazor.syncfusion.com/documentation/button/getting-started

Regards,
Prathap S

Attachment: DataGrid._7bd6db6c.zip