Multiple modal popup on same page

[Belle Cruz]

I want to display the "Please enter reason" modal first then followed by CPHeader was archived.

1. Example: When clicked the Archive button on toolbar the it will display the Please enter reason. And when I click save the the CPHeader modal will display.

   

[Belle Cruz]

This is the continuation of my query,

2. When I clicked the Save button on Please enter reason modal above. The text that I input on the textbox it will save to Remarks

[Buvana Sathasivam]

Hi Belle, 

Greetings from Syncfusion support. 

We have prepared a sample based on this requirement. While clicking the "Archieve" button in the toolbar after selecting the record in SfGrid, the first SfDialog will be shown with a textbox. After entering the text, when clicking the Save button, the second SfDialog opens with your entered text. When you click the second model SfDialog OK button, the entered text value is updated in the Remarks column of the SfGrid selected record.  

 

Find the below code snippets and sample for your reference.  

 

  

<SfGrid @ref="Grid" DataSource="@Orders" AllowPaging="true" Toolbar="Toolbaritems" Height="315">  

    <GridEvents RowSelected="RowSelectHandler" OnToolbarClick="ToolbarClickHandler" TValue="Order"></GridEvents>  

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Normal"></GridEditSettings>  

    <GridColumns>  

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" ValidationRules="@(new ValidationRules{ Required=true})" TextAlign="TextAlign.Right" Width="120"></GridColumn>  

        . ..   

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

    </GridColumns>  

</SfGrid>  

  

  

<SfDialog @ref="FirstDialogRef" Width="250px" ShowCloseIcon="true" IsModal="true" @bind-Visible="@IsVisible">  

    <DialogTemplates>  

        <Header> Dialog </Header>  

        <Content>  

            <div>  

                <label>Please enter a reason:</label>  

                <SfTextBox @ref="TextBoxRef" Placeholder='Reason'></SfTextBox>  

            </div>  

        </Content>  

    </DialogTemplates>  

    <DialogButtons>  

       <DialogButton Content="Save" IsPrimary="true" OnClick="@SaveDialog" /> 

        <DialogButton Content="Cancel" OnClick="@CancelCloseDialog" /> 

    </DialogButtons>  

</SfDialog>  

 <SfDialog @ref="SecondDialogRef" IsModal="true" Width="285px" Height="215px" Target="#target" ShowCloseIcon="true" @bind-Visible="IsSecondVisible"> 

        <DialogTemplates> 

            <Header>CPHeader</Header> 

            <Content> 

                <p>CPHeader @(TextBoxRef.Value) was archieved</p> 

            </Content> 

        </DialogTemplates> 

        <DialogButtons> 

            <DialogButton Content="Ok" IsPrimary="true" OnClick="@SecondDlgClick" /> 

        </DialogButtons> 

    </SfDialog> 

<style>  

    .e-click::before {  

        content: '\e525';  

    }  

</style>  

  

@code{  

    SfGrid<Order> Grid;  

    SfTextBox TextBoxRef;  

    SfDialog FirstDialogRef; 

    SfDialog SecondDialogRef; 

    private List<Object> Toolbaritems = new List<Object>() { "Add", "Edit", "Delete", "Update", "Cancel",  

        new ItemModel() { Text = "Archive", TooltipText = "Archive", PrefixIcon = "e-click", Id = "Click" } };  

    public Order SelectedProduct = new Order();  

    double selectedIndex { get; set; }  

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

  

    . ..   

    public void RowSelectHandler(RowSelectEventArgs<Order> args)  

    {  

        SelectedProduct = args.Data;    //get selected record data  

        selectedIndex = args.RowIndex;  //get selected row index  

    }  

    public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)  

    {  

  

        if (args.Item.Id == "Click")  

        {  

            var selected = await Grid.GetSelectedRecordsAsync();  

            if(selected.Count > 0)    //check whether anyone of the reocrds are selected or not  

            {  

                this.IsFirstVisible= true;    //shown dialog  

            }  

        }  

    }  

    private bool IsFirstVisible { get; set; } = false;  

      private bool IsSecondVisible { get; set; } = false; 

 

    private void SaveDialog() 

    { 

        this.IsFirstVisible = false; 

        this.IsSecondVisible = true; 

    } 

    private void CancelCloseDialog() 

    { 

        this.IsFirstVisible = false; 

    } 

    private async Task SecondDlgClick() 

    { 

        SelectedProduct.Remarks = TextBoxRef.Value; 

        await this.Grid.UpdateRowAsync(selectedIndex, SelectedProduct);  // update the row using method 

        this.IsSecondVisible = false; 

    } 

}  

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Grid-Dialog-644128634  

 

Live Demo link: https://blazor.syncfusion.com/demos/dialog/multiple-dialogs?theme=bootstrap5  

 

Reference:  

https://blazor.syncfusion.com/documentation/datagrid/events#rowselected  

https://blazor.syncfusion.com/documentation/datagrid/events#ontoolbarclick  

 

Please let us know if you have any concerns. 

 

Regards, 

Buvana S  

[Belle Cruz]

The modal pop up is working but there is no displaying in Remarks.

[Belle Cruz]

Here is my code: and still not saving on remarks

<SfGrid DataSource="@CPHeaders"

            TValue="CPHeader"

            ID="GridHeader"

            @ref="GridHeader"

            Toolbar="@ToolBarItems"

            AllowFiltering="true"

            AllowPaging="false"

            AllowSorting="true"

            AllowTextWrap="true"

            AllowResizing="true"

            AllowPdfExport="true"

            AllowExcelExport="true"

            AllowGrouping="true"

            AllowSelection="true"

            Width="1540px"

            Height="460px">

        <GridEvents TValue="CPHeader"

                    RowSelected="RowSelectHandler"

                    OnActionBegin="ActionBeginHandler"></GridEvents>

        <GridEditSettings AllowAdding="true"

                          AllowDeleting="true"

                          AllowEditing="true"

                          Mode="EditMode.Normal"

                          ShowDeleteConfirmDialog="true">

        </GridEditSettings>

​

<GridEvents OnToolbarClick="ToolbarClickHandler"

                    OnActionBegin="ActionBeginHandler"

                    PdfAggregateTemplateInfo="AggregateTemplate"

                    PdfGroupCaptionTemplateInfo="GroupCaptionHandlerPdf"

                    ExcelGroupCaptionTemplateInfo="GroupCaptionHandlerExcel"

                    TValue="CPHeader"></GridEvents>

        <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Excel"></GridFilterSettings>

        <GridSelectionSettings Type="Syncfusion.Blazor.Grids.SelectionType.Multiple"></GridSelectionSettings>

        <GridPageSettings PageSize="15"></GridPageSettings>

        @*Header*@

    <GridColumns>

        <GridColumn Type="ColumnType.CheckBox" Width="70"></GridColumn>

 <GridColumn Field=@nameof(CPHeader.Remarks) HeaderText="Remarks"

                    Visible="@IsShowAll"

                    Width="150">

            <HeaderTemplate>

                <div>

                    <span class="oi oi-project e-icons headericon"></span> Remarks

                </div>

            </HeaderTemplate>

        </GridColumn>

        <SfDialog @ref="FirstDialogRef" Width="250px" ShowCloseIcon="true" IsModal="true" @bind-Visible="@IsFirstVisible">

            <DialogTemplates>

                <Header> Dialog </Header>

                <Content>

                    <div>

                        <label>Please enter a reason:</label>

                        <SfTextBox @ref="TextBoxRef" Placeholder='Reason'></SfTextBox>

                    </div>

                </Content>

            </DialogTemplates>

            <DialogButtons>

                <DialogButton Content="Save" IsPrimary="true" OnClick="@SaveDialog" />

                <DialogButton Content="Cancel" OnClick="@CancelCloseDialog" />

            </DialogButtons>

        </SfDialog>

</GridColumns>

<SfGrid>

@code{

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

        public CPHeader SelectedProduct = new CPHeader();

        double selectedIndex { get; set; }

        public void SaveDialog()

        {

            this.IsFirstVisible = false;

        }

        public void CancelCloseDialog()

        {

            this.IsFirstVisible = false;

        }

public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)

{

 if (args.Item.Id == "Archive")

            {

                //Transaction Archive

                //ShowDialog = true;

                var SelectedRecords = await this.GridHeader.GetSelectedRecords(); //Fetch the selected records

                var HeaderID = SelectedRecords[0].CPHeaderID;

                var TransNo = SelectedRecords[0].CPNo;

                var Remarks = SelectedRecords.Count > 0; //check whether anyone of the reocrds are selected or not

                {

                    this.IsFirstVisible = true; //shown dialog

                    await this.GridHeader.UpdateRowAsync(selectedIndex, SelectedProduct); // update the row using method

                    CPHeader = await CPHeaderService.GetCPHeader(Convert.ToInt32(HeaderID));

                    CPHeader.Status = -1;

                    await CPHeaderService.UpdateCPHeader(CPHeader);

                    Confirmation.Show("CPHeader", "CPHeader " + TransNo + " was archived.");

                    //CPHeaders = (await CPHeaderService.GetCPHeadersByDateRange(FromDateValue, ToDateValue.AddDays(1))).Where(e => e.Status != -1).ToList();

                    CPHeaders = (await CPHeaderService.GetCPHeaders()).Where(e => e.Status != -1).ToList();

                    StateHasChanged();

                    // var rowIndex = await GridHeader.GetRowIndexByPrimaryKeyAsync(SOHeaderID);

                }

            }

}

 public void RowSelectHandler(RowSelectEventArgs<CPHeader> args)

        {

             SelectedProduct = args.Data; //get selected record data

             selectedIndex = args.RowIndex; //get selected row index

        }

}

[Belle Cruz]

1. As you can see on the above picture, the CPHeader was archived is a fixed modal popup.

Here is the code: 

public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)

{

 if (args.Item.Id == "Archive")

            {            

                var SelectedRecords = await this.GridHeader.GetSelectedRecords(); //Fetch the selected records

                var HeaderID = SelectedRecords[0].CPHeaderID;

                var TransNo = SelectedRecords[0].CPNo;

                var Remarks = SelectedRecords.Count > 0; //check whether anyone of the reocrds are selected or not

                {

                    this.IsFirstVisible = true; //shown dialog

                    await this.GridHeader.UpdateRowAsync(selectedIndex, SelectedProduct); // update the row using method

                    CPHeader = await CPHeaderService.GetCPHeader(Convert.ToInt32(HeaderID));

                    CPHeader.Status = -1;

                    await CPHeaderService.UpdateCPHeader(CPHeader);

                    Confirmation.Show("CPHeader", "CPHeader " + TransNo + " was archived.);

                    CPHeaders = (await CPHeaderService.GetCPHeaders()).Where(e => e.Status != -1).ToList();

                    StateHasChanged();

                }

            }

}

2. All I need is a modal popup that when I clicked the archive It will show "Please enter a reason." Then textbox where I will input a reason why I am going to archive a selected records on the grid. When I click the Save button then it will display to the Remarks.

[Belle Cruz]

Is there any update about my query?

[Rahul Narayanasamy]

Hi Belle, 

Thanks for the update. 

Query: The modal pop up is working but there is no displaying in Remarks. 

Based on your shared details we have checked your reported problem. We could see that you have updated the row using UpdateRowAsync method in ToolbarClickHandler itself. So it will update the row values while clicking the Archieve button itself. In that time, we have not modified/ entered the Remarks value. So it was not updated in the GridColumn. 

As mentioned in the previous update, you need to update the row while clicking the Ok button in the dialog. You can call the UpdateRowAsync method line in first dialog OK button / second dialog Ok button based on your need. Here, we have call UpdateRowAsyne method in second dialog OK button. Please find the below code snippets and sample for your reference. 

 

<SfDialog @ref="FirstDialogRef" Width="250px" ShowCloseIcon="true" IsModal="true" @bind-Visible="@IsFirstVisible"> 

    <DialogTemplates> 

        <Header> Dialog </Header> 

        <Content> 

            <div> 

                <label>Please enter a reason:</label> 

                <SfTextBox @ref="TextBoxRef" Placeholder='Reason'></SfTextBox> 

            </div> 

        </Content> 

    </DialogTemplates> 

    <DialogButtons> 

        <DialogButton Content="Save" IsPrimary="true" OnClick="@SaveDialog" /> 

        <DialogButton Content="Cancel" OnClick="@CancelCloseDialog" /> 

    </DialogButtons> 

</SfDialog> 

<SfDialog @ref="SecondDialogRef" IsModal="true" Width="285px" Height="215px" Target="#target" ShowCloseIcon="true" @bind-Visible="IsSecondVisible"> 

        <DialogTemplates> 

            <Header>CPHeader</Header> 

            <Content> 

                <p>CPHeader @(TextBoxRef.Value) was archieved</p> 

            </Content> 

        </DialogTemplates> 

        <DialogButtons> 

            <DialogButton Content="Ok" IsPrimary="true" OnClick="@SecondDlgClick" /> 

        </DialogButtons> 

    </SfDialog> 

. ..  

 

@code{ 

    SfGrid<Order> Grid; 

    . ..  

 

    private void SaveDialog() 

    { 

        this.IsFirstVisible = false; 

        this.IsSecondVisible = true; 

    } 

    private void CancelCloseDialog() 

    { 

        this.IsFirstVisible = false; 

    } 

    private async Task SecondDlgClick() 

    { 

        SelectedProduct.Remarks = TextBoxRef.Value; 

        await this.Grid.UpdateRowAsync(selectedIndex, SelectedProduct);  // update the row using method 

        this.IsSecondVisible = false; 

    } 

} 

Please let us know if you have any concerns. 

Regards, 

Rahul