Show hidden columns without losing focus

[Mai Tu?n Ð?t]

I want to display a column hidden by the Visible attribute according to a data condition of a cell previously entered by the user without losing focus.

I used Grid's ShowColumnAsync method but the grid would refresh and lose focus on the cell being entered.

[Prathap Senthil]

Hi Mai,

Before proceeding with reported problem, we require some additional clarification from your end. Please share the following details to proceed further at our end:

• Do you want to hide specific column while editing or adding a record?
• What specific condition in the cell are you using to determine when to hide or show the column?
• How do you want the column to be displayed or hidden based on the data condition of a cell previously entered by the user?
• You mentioned using the ShowColumnAsync method, but it causes the grid to refresh and lose focus. Could you provide more information about how you are currently using this method?
• Share more details about your requirement

The above-requested details will be very helpful for us to validate the reported query at our end and provide a solution as early as possible.

Regards,
Prathap Senthil

[Mai Tu?n Ð?t]

I would like to provide you with some additional information as follows:

- I want to display several columns when adding a record using grid with selecting mode is Cell:

 <GridSelectionSettings Mode="Syncfusion.Blazor.Grids.SelectionMode.Cell" PersistSelection="true" />

- The specific conditions here I get from the Api according to the data the user entered in the previous box

Here is my code and demo video:

I fetched the data as the user entered the cell from the CellSaved method then checked the condition and called the ShowColumnAsync method

<SfGrid @ref="_dataGrid" TValue="SmartContentDataVm"

        EnableStickyHeader="true"

        ClipMode="ClipMode.EllipsisWithTooltip"

        AllowResizing="true"

        EnablePersistence="true"

        AllowSelection="true"

        DataSource="SmartContentDataVms">

    <GridEvents TValue="SmartContentDataVm" DataBound="DataBound" CellSelected="CellSelectHandler"

                OnRecordClick="OnRowClicked" CellDeselecting="CellDeselectedHandle"

                RowSelected="RowSelectHandler"

                CellSaved="OnCellSaved" />

    <GridEditSettings AllowEditing="true" AllowNextRowEdit="true" AllowAdding="true" Mode="EditMode.Batch" ShowConfirmDialog="false" />

    <GridSelectionSettings Mode="Syncfusion.Blazor.Grids.SelectionMode.Cell" PersistSelection="true" />

    <GridColumns>

        <GridColumn Field="@nameof(SmartContentDataVm.IdSource)" HeaderText="Id" TextAlign="TextAlign.Left" Width="40" Visible="false" IsPrimaryKey="true" />

        <GridColumn Field="@nameof(SmartContentDataVm.DebitSide)" HeaderText="TK nợ" TextAlign="TextAlign.Center"

                    Width="40" EditType="EditType.DropDownEdit">

            <EditTemplate>

                @{

                    var con = context as SmartContentDataVm;

                }

                <SfComboBox @ref="CbbDebit"

                            ID="@(IdCbbDebit)"

                            TItem="AccountSymbolVm" EnableVirtualization="true"

                            TValue="string"

                            PopupHeight="140px"

                            PopupWidth="350px"

                            AllowFiltering="true"

                            Autofill="true"

                            CssClass="e-small"

                            FilterType="Syncfusion.Blazor.DropDowns.FilterType.Contains"

                            @bind-Value="@((context as SmartContentDataVm)!.DebitSide)">

                    <SfDataManager Adaptor="Adaptors.JsonAdaptor" Json="AccountSymbolVms" />

                    <ComboBoxEvents TValue="string" TItem="AccountSymbolVm" Created="@(() => OnCreate(IdCbbDebit))" />

                    <ComboBoxFieldSettings Text="@nameof(AccountSymbolVm.AccountSymbol)" Value="@nameof(AccountSymbolVm.AccountSymbol)" />

                    <ComboBoxTemplates TItem="AccountSymbolVm" Context="accSymbolContext">

                        <HeaderTemplate>

                            <table class="table">

                                <tr>

                                    <th scope="col" style="width:70px" class="column-width">Số hiệu</th>

                                    <th scope="col" style="width:150px" class=" column-width">Tên tài khoản</th>

                                </tr>

                            </table>

                        </HeaderTemplate>

                        <ItemTemplate>

                            <table class="table table-hover table-sm">

                                <tbody>

                                    <tr>

                                        <td title="@(accSymbolContext.AccountSymbol)" style="width:130px">@(accSymbolContext.AccountSymbol)</td>

                                        <td title="@(accSymbolContext.AccountName)" class="content-cbb">@(accSymbolContext.AccountName)</td>

                                    </tr>

                                </tbody>

                            </table>

                        </ItemTemplate>

                        <NoRecordsTemplate>

                            <div>

                                <div> Không tìm thấy bản ghi nào</div>

                                <button class="e-control e-btn">Thêm mới</button>

                            </div>

                        </NoRecordsTemplate>

                    </ComboBoxTemplates>

                </SfComboBox>

            </EditTemplate>

        </GridColumn>

        <GridColumn @ref="DebitCodeObjCol" Field="@nameof(SmartContentDataVm.DebitObjectCode)" HeaderText="Mã đơn vị nợ"

                    TextAlign="TextAlign.Left" EditType="EditType.DropDownEdit" Width="40" Visible="false">

            <EditTemplate>

                <SfComboBox @ref="CbbDebitObj"

                            ID="@(IdDebitObj)"

                            TItem="ObjectForCbb" TValue="string"

                            CssClass="e-small e-multi-column"

                            AllowFiltering="true"

                            PopupHeight="170px" PopupWidth="450px"

                            FilterType="Syncfusion.Blazor.DropDowns.FilterType.Contains"

                            EnableVirtualization="true"

                            @bind-Value="@((context as SmartContentDataVm)!.DebitObjectCode)">

                    <SfDataManager Adaptor="Adaptors.JsonAdaptor" Json="LstObjects" />

                    <ComboBoxFieldSettings Text="@nameof(ObjectForCbb.ObjCode)" Value="@nameof(ObjectForCbb.ObjCode)" />

                    <ComboBoxEvents TValue="string" TItem="ObjectForCbb" Created="@(() => OnCreate(IdDebitObj))" />

                    <ComboBoxTemplates TItem="ObjectForCbb" Context="debitObj">

                        <HeaderTemplate>

                            <table>

                                <thead>

                                    <tr>

                                        <th scope="col" style="width:130px">Mã đối tượng</th>

                                        <th scope="col" style="width:150px">Tên đối tượng</th>

                                    </tr>

                                </thead>

                            </table>

                        </HeaderTemplate>

                        <ItemTemplate>

                            <table class="table table-hover table-sm">

                                <tbody>

                                    <tr>

                                        <td title="@(debitObj.ObjCode)" style="width:130px">@(debitObj.ObjCode)</td>

                                        <td title="@(debitObj.ObjName)" class="content-cbb">@(debitObj.ObjName)</td>

                                    </tr>

                                </tbody>

                            </table>

                        </ItemTemplate>

                        <NoRecordsTemplate>

                            <div>

                                <div> Không tìm thấy bản ghi nào</div>

                                <button class="e-control e-btn">Thêm mới đối tượng</button>

                            </div>

                        </NoRecordsTemplate>

                    </ComboBoxTemplates>

                </SfComboBox>

            </EditTemplate>

        </GridColumn>

        <GridColumn Field="@nameof(SmartContentDataVm.DebitObjectName)" HeaderText="Tên đơn vị nợ"

                    TextAlign="TextAlign.Left" Width="60" Visible="false">

        </GridColumn>

        <GridColumn Field="@nameof(SmartContentDataVm.UnitPackage)" HeaderText="ĐVT" TextAlign="TextAlign.Left" Width="40">

        </GridColumn>

    </GridColumns>

</SfGrid>

@code{

 private async Task OnCellSaved(CellSavedArgs<SmartContentDataVm> args)

 {

     if (args.Value is null) return;

     var rowindex = await _dataGrid.GetRowIndexByPrimaryKeyAsync(args.RowData.IdSource);

     if (args.ColumnName == nameof(SmartContentDataVm.CommodityCode))

     {

         var prod = ProductVms.FirstOrDefault(c => c.ProductCode == args.Value.ToString());

         await _dataGrid.UpdateCellAsync(rowindex, nameof(SmartContentDataVm.CommodityName), prod.ProductName);

         await _dataGrid.UpdateCellAsync(rowindex, nameof(SmartContentDataVm.UnitPackage), prod.UnitPsc);

     }

     else if (args.ColumnName == nameof(SmartContentDataVm.DebitSide))

     {

         var accSymbolCata = await BaseApiService.GetAccountSymbol((string)args.Value);

         if (accSymbolCata.Object)

         {

             await _dataGrid.ShowColumnAsync(nameof(SmartContentDataVm.DebitObjectCode), showBy: "Field");

         }

     }

 }

}

Attachment: demo_dd1e82e4.rar

[Prathap Senthil]

Based on the reported issue, you entered the cell from the CellSaved method checked the condition, and then called the ShowColumnAsync method. You are facing the problem where the grid refreshes and the editing state is closed. We would like to inform you that when using the ShowColumnAsync method to display a column, the grid will be re-rendered, and the editing state will be closed, resulting in data not being added to the grid. This is the default behavior of the grid. It is not feasible to achieve the requirement as described. We suggest using the ShowColumnAsync method after the data has been updated in the grid, such as by using a button click or any other action based on your needs. Thank you for your understanding

[Mai Tu?n Ð?t]

Thanks for your feedback!

So do you have any suggestions on how to create dynamic columns like my question

[Prathap Senthil]

Based on your query, we suspect that you want to render dynamic column generation in the grid. We already have documentation on this topic. Kindly refer to the link below for your reference.

Reference: https://blazor.syncfusion.com/documentation/datagrid/column-rendering#dynamic-column-generation