Passing the value of the input text from the Modal Popup to Gridcolumns

[Belle Cruz]

How to pass  or save the input text from Modal popup textbox to gridcolumns?

[Belle Cruz]

For example when I enter text on the textbox like "payment" then click the Save button.

The payment word should be displayed on gridcolumn on Remarks.

[Rahul Narayanasamy]

Hi Belle, 

Greetings from Syncfusion. 

Query: when I enter text on the textbox like "payment" then click the Save button. The payment word should be displayed on gridcolumn on Remarks 

You want to enter some text in textbox(which is shown in the some dialog model) and update the record in the Grid. You can achieve your requirement by using UpdateRowAsync method and Grid events(RowSelected, OnToolbarClick). Find the bellow code snippets and sample for your reference. 

Now select any records and click Achieve button in the toolbar. The model popup will be shown. While clicking the OK button after entering the value, then the entered value is updated in Remarks column.  

 

<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 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="OK" IsPrimary="true" OnClick="@OKCloseDialog" /> 

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

    </DialogButtons> 

</SfDialog> 

 

<style> 

    .e-click::before { 

        content: '\e525'; 

    } 

</style> 

 

@code{ 

    SfGrid<Order> Grid; 

    SfTextBox TextBoxRef; 

    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.IsVisible = true;    //shown dialog 

            } 

        } 

    } 

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

 

    private void OpenDialog() 

    { 

        this.IsVisible = true; 

    } 

 

    private async Task OKCloseDialog() 

    { 

        SelectedProduct.Remarks = TextBoxRef.Value; 

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

        this.IsVisible = false; 

    } 

    private async Task CancelCloseDialog() 

    { 

        this.IsVisible = false; 

    } 

} 

Sample: https://www.syncfusion.com/downloads/support/forum/172242/ze/Sample-1592793448  

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, 

Rahul