Grid ShowColumnsAsync without “HeaderText” or “Field”

Hi,

Context:

I’m working on DataGrid with Blazor WebAssembly.

On the DataGrid, some columns are shown (or hided) only in add dialog or in edit dialog.

To do this, I’m using ShowColumnsAsync and HideColumnsAsync like I was advised on this thread.


My difficulty:

I can’t use ShowColumnsAsync with parameter showBy = "HeaderText" because “HeaderText” depends on user language (translation).

Besides, I have a column that is not bound to a field. It is used to edit data that are from another table (than the DataGrid source).

Here is a simplified version of my column:

<GridColumn HeaderText="MyColumn" Uid="MyColumnId" Visible="false"

        Width="120">

    <EditTemplate>

        <p>My column edition</p>

    </EditTemplate>

</GridColumn>

To summarize, this column doesn’t have a consistent “HeaderText” and no “Field”.


Questions:

Can I show/hide this column with ShowColumnsAsync? I tried using “Uid” parameter but it doesn’t work: await Grid.HideColumnsAsync(HideBoth, "Uid");

If it is not possible, should I ask for an evolution of ShowColumnsAsync to support Uid?

Or do you have another solution?

My objective is to make the column “MyColumn” only visible in adding for instance.

I attached an example, I commented the part of the code where I used “Uid”.


Thanks for your help.

Best regards.

François


Attachment: GridHideShowColumn_3dab7f50.zip

1 Reply

MS Monisha Saravanan Syncfusion Team January 12, 2022 12:11 PM UTC

Hi Francois, 

Greetings from Syncfusion support. 

We have achieved your requirement by calling a public method updateColumnHeaderText in code section to get the header text of that particular column. This method will  get the current header text of the column and by using this we can show or hide columns programmatically. We have modified your sample as per your requirement. Please refer the attached code snippet and sample for your reference 


 
<SfGrid @ref="Grid" DataSource="@Orders" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel" })" > 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Dialog" /> 
    <GridEvents TValue="Order" OnActionBegin="OnActionBegin" /> 
    ... 
</SfGrid> 
 
@code { 
    SfGrid<Order> Grid; 
 
    private async Task OnActionBegin(ActionEventArgs<Order> args) 
    { 
        switch (args.RequestType) 
        { 
            case Syncfusion.Blazor.Grids.Action.BeginEdit: 
                var col = await Grid.GetColumnByUidAsync("MyColumnId"); 
                await Grid.ShowColumnAsync(col.HeaderText); 
                break; 
 
            case Syncfusion.Blazor.Grids.Action.Add: 
 
                await updateColumnHeaderText("OrderDate"); 
                await Grid.ShowColumnsAsync(collection.ToArray()); 
                collection.Clear(); 
                break; 
 
            case Syncfusion.Blazor.Grids.Action.Save: 
            case Syncfusion.Blazor.Grids.Action.Cancel: 
                await updateColumnHeaderText("MyColumnId"); 
                await updateColumnHeaderText("OrderDate"); 
                await Grid.HideColumnsAsync(collection.ToArray()); 
                collection.Clear(); 
                break; 
        } 
        } 
        public async Task  updateColumnHeaderText(string Uid) { 
            var col= await Grid.GetColumnByUidAsync(Uid); 
            collection.Add(col.HeaderText);             
    } 
} 


If we have misunderstood your requirement or you are still facing difficulties then kindly revert us for further queries. 

Regards, 
Monisha S 


Loader.
Up arrow icon