Hide/Show Datagrid columns in Edit mode

[Baba Goud Gadiga]

Hi team,

I am working on a requirement where i need to show few columns when the user starts editing or adding the row data. After the editing is done I need to hide the same columns. Below is the code I have been trying and does not seem to quite working.

public async void BeginEditHandler (BeginEditArgs<KittingSchedule> args)

        {

                if(args.Type.Equals(Syncfusion.Blazor.Grids.Action.Add))

                {

                   await kittingScheduleGrid.ShowColumnsAsync(new string[] { "Part Quantity", "Part Number" });

                }

                if (args.Type.Equals(Syncfusion.Blazor.Grids.Action.Cancel))

                {

                    await kittingScheduleGrid.HideColumnsAsync(new string[] { "Part Quantity", "Part Number"});

                }

            }        

public async void ActionCompleteHandler(ActionEventArgs<KittingSchedule> Args)

        {              

                if (Args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Add) ||               Args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.BeginEdit))

                {

                    await kittingScheduleGrid.HideColumnsAsync(new string[] { "Part Quantity", "Part Number" });

                }

            }

        

Grid event

 <GridEvents OnActionBegin="@ActionBeginHandler" TValue="@KittingSchedule" OnBeginEdit="BeginEditHandler"

                          OnActionComplete="ActionCompleteHandler"></GridEvents>

   

<GridColumn Field=@nameof(KittingSchedule.PartNumber) HeaderText="Part Number" Visible="false"/>  

 <GridColumn Field=@nameof(KittingSchedule.PartDescription) HeaderText="Part Description" Visible="false"/>

 <GridColumn Field=@nameof(KittingSchedule.PartQuantity) HeaderText="Part Quantity" EditType="EditType.NumericEdit" Visible="false"> </GridColumn>

For some reason once I hit on Add or Edit toolbar items, the application freezes or sometimes the hidden columns get visible on Add action but the row is not in Add mode for me to add the new values.

Add mode:

[Monisha Saravanan]

Hi Baba Goud Gadiga, 

Greetings from Syncfusion support. 

We have analyzed your query and we suspect that the issue occurs due to HideColumnsAsync method handled on action complete event instead we suggest you to handle hide columns method in save/cancel actions in OnActionBegin event. Kindly refer the attached code snippet and sample for your reference. 

 

<SfGrid @ref="Grid" DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel" })" Height="315"> 

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

    <GridEvents TValue="Order" OnActionBegin="OnActionBegin"/> 

    <GridColumns> 

        ... 

   </GridColumns> 

</SfGrid> 

 

@code { 

 

    public async Task OnActionBegin(ActionEventArgs<Order> args) 

    { 

        switch (args.RequestType) 

        { 

             case Syncfusion.Blazor.Grids.Action.BeginEdit: 

                await Grid.ShowColumnsAsync(new string[] { "Freight" }); 

                break; 

            case Syncfusion.Blazor.Grids.Action.Add: 

                await Grid.ShowColumnsAsync(new string[] { "Order Date" }); 

                break; 

 

            case Syncfusion.Blazor.Grids.Action.Save: 

            case Syncfusion.Blazor.Grids.Action.Cancel: 

                await Grid.HideColumnsAsync(new string[] { "Order Date", "Freight" }); 

                break; 

        } 

    } 

} 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DataGrid-760206940.zip 

Note: Kindly use Dialog Edit mode for better performance. 

Kindly get back to us if you have further queries. 

Regards, 

Monisha 

[Baba Goud Gadiga]

Hello Monisha,

Appreciate your time for looking into this issue. As suggested i moved the code from ActionComplete to OnActionBegin event and it is working better. But seems there is a performance issue when the Edit mode is normal rather than Dialog mode. My users need to edit/add the data inline. For now I will be rolling out the changes and look for any feedback from my users.

Note: Add new row works fine, issue with editing data inline, the row does not get into edit mode immediately and sometimes the grid/page freezes. Please give a look if you can.

Thanks

Baba 

[Monisha Saravanan]

Hi Baba Goud Gadiga, 

  

Thanks for the update. 

  

We have modified the code as per your requirement. Kindly check the attached code snippet and sample for your reference. 

  

<SfGrid @ref="Grid" DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel" })" Height="315"> 

    ... 

</SfGrid> 

  

@code { 

    public double keyvalue { get; set; } 

    public bool IsEdit = true; 

    public async Task OnActionBegin(ActionEventArgs<Order> args) 

    { 

        switch (args.RequestType) 

        { 

            case Syncfusion.Blazor.Grids.Action.BeginEdit: 

  

                if (IsEdit) 

                { 

                    IsEdit = false; 

  

                    args.Cancel = true;      

                    await Grid.ShowColumnsAsync(new string[] { "Freight" }); 

                    await StartEdit(); 

                } 

                else 

                { 

                    IsEdit = true; 

                } 

  

                break; 

            case Syncfusion.Blazor.Grids.Action.Add: 

                await Grid.ShowColumnsAsync(new string[] { "Order Date" }); 

                break; 

  

            case Syncfusion.Blazor.Grids.Action.Save: 

            case Syncfusion.Blazor.Grids.Action.Cancel: 

  

                await Grid.HideColumnsAsync(new string[] { "Order Date", "Freight" }); 

                break; 

        } 

    } 

    public async Task StartEdit() 

    { 

        if (!IsEdit) 

        { 

            await Task.Delay(50); 

            await Grid.SelectRowAsync(keyvalue); 

            await Task.Delay(50); 

            await Grid.StartEditAsync(); 

} 

    } 

} 

  

  

Here we have prevented the default edit by setting args.cancel as true and handled the edit externally by calling StartEdit method programmatically. 

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DataGrid-426021073.zip 

  

Kindly get back to us if you have further queries. 

  

Regards, 

Monisha 

[Baba Goud Gadiga]

Hello Monisha,

This fix works a lot better. Appreciate your time and effort for getting this working. Romba thanks :)

Thanks

Baba

[Monisha Saravanan]

Hi Baba, 

Thanks for the update. 

We are glad to hear that your query has been resolved. Kindly get back to us if you need further assistance. 

Regards, 

Monisha