DataGrid Set Column Picker Items

Hi All,

It's possible to set the collumns i want to show with code?
The ideia it's to save (DB or localStorage) user settings to the collumns and set it on the grid all time user opens the page.

Thanks

Column picker will list all declared DataGrid columns with Pickable set to true.

1 Like

Hi @enchev ,

Can i choose what items are selected in the picker? aka what collumns are beeing shown?
I want all columns in the picker, but i want to load a user default to show what user have setted to view on startup.

Edited: And if i have a event to know, on picker change, what are the selected ones, i could save the user default from there.

Thanks

Hi enchev,

if i set collumn Visible=false and change de value to true via column picker i will get false when i get the value via grid.ColumnsCollection[i].

I think that picker change only _visible value and the Visible still containing the old one.

1 Like

Hello,

were you able to solve it? How did you do it?

I have the same problem, I access the Visible property of Grid.ColumnsCollection and its value is always true.

Thank you.

You can use GetVisible() instead:

2 Likes

Hi enchev,

GetVisible() is a method of the RadzenDataGrid or the ColumnsCollection? I've upgraded to version 3.19.12 and it doesn't recognize it on either.

Thank you.

You might need to check the code I've posted once again - it's a column method. In the next update there will be new event that will provide info about picked columns:

1 Like

Thank you very much. :slight_smile:

Hello,

I save the columns that the user has selected in the database and retrieve them from the database fine.

The RadzenDataGrid has 5 pickable columns and the user has selected that he only wants to see 3. In the ColumnsShowingText tag the number 5 appears and debugging the value of grid.ColumnsCollection.Where(c => c.Pickable).Count() is 3.

From where do you get the numeric value displayed in ColumnsShowingText?

Thank you in advance.

See my reply 3 days ago. You can use GetVisible().

Hello,

I have already seen your answer, but the number displayed in the ColumnsShowingText tag and the visible columns in the grid do not match, that is the problem.

Hello @enchev,

Can you help me with the problem of the previous post?

Thank you.

@at_extchj232 I was getting the same and managed to resolve this by not setting the column visibility in code but by setting a bool on the tag under Visible="bool1", Visible="bool2", Visible="bool3" etc for each and then changing this depending on what was stored in the db as being visible.

Hello @fleccy,

I don't understand what you're saying, can you put an example of your code?

Thank you very much.

Yep no problem, this probably isn't the cleanest way of doing it but I've not had time to clean it up. Hope it makes sense :slight_smile:

@using Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage
@inject ProtectedLocalStorage BrowserStorage
@inject IDbContextFactory<MyDbContext> dbFactory  
  
<RadzenDataGrid AllowFiltering="true" FilterMode="FilterMode.Advanced" AllowColumnResize="true" PageSizeOptions="@pageSizeOptions" ShowPagingSummary="true" AllowSorting="true" AllowVirtualization="true" AllowPaging="true" PageSize="25" PickedColumnsChanged="SaveSettingsAsync"
        Data="@folders" TItem="Folder" ColumnWidth="300px" Style="height:79vh" AllowColumnPicking="true" @ref="grid">
        <Columns>
            <RadzenDataGridColumn TItem="Folder" Property="Findex" Title="Id" Width="80px" Visible="findex"/>
            <RadzenDataGridColumn TItem="Folder" Property="Finout" Title="In/Out" Width="100px" Visible="finout" />
            <RadzenDataGridColumn TItem="Folder" Filterable="true" Property="Fdesc1" Title="Folder Desc 1" Width="300px" Visible="fdesc1" />
            <RadzenDataGridColumn TItem="Folder" Filterable="true" Property="Fdesc2" Title="Folder Desc 2" Width="300px"  Visible="fdesc2" />
            <RadzenDataGridColumn TItem="Folder" Filterable="true" Property="Fdesc3" Title="Folder Desc 3" Width="300px"  Visible="fdesc3"/>
        </Columns>
    </RadzenDataGrid>


@code {
    RadzenDataGrid<Folder>? grid;
    IEnumerable<Folder>? folders;
    MyDbContext? _context;
    IEnumerable<int> pageSizeOptions = new int[] { 25, 50, 100, 250 };
    
    protected override void OnInitialized()
    {
        _context = dbFactory.CreateDbContext();
        folders = _context.Folders;
    }

    bool findex = true, 
    finout = true, 
    fdesc1 = true, 
    fdesc2 = true, 
    fdesc3 = true;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await ReadSettingsAsync();
            StateHasChanged();
        }
    }

    private async Task SaveSettingsAsync() 
    {
        var visibleColumns = grid?.ColumnsCollection.Where(c => c.GetVisible()).Select(i => new { i.Property, i.Visible });
        var json = System.Text.Json.JsonSerializer.Serialize(visibleColumns);
        await BrowserStorage.SetAsync("visibleColumns", json!);
    }

    public record VisibleColumns
    {
        public string Property { get; set; } = default!;
        public bool Visible { get; set; } = default!;
    };

    public async Task ReadSettingsAsync()
    {
        var result = await BrowserStorage.GetAsync<string>("visibleColumns");
        if (result.Success) {
            var visibleColumns = System.Text.Json.JsonSerializer.Deserialize<IEnumerable<VisibleColumns>>(result.Value);
            foreach (var column in grid?.ColumnsCollection!)
            {
                if (visibleColumns!.Count() > 0)
                {
                    var r = visibleColumns?.Where(i => i.Property == column.Property).FirstOrDefault();
                    if (r is not null && !string.IsNullOrWhiteSpace(r.Property))
                    {
                        switch (r.Property)
                        {
                            case "Findex":
                                findex = true;
                                break;
                            case "Finout":
                                finout = true;
                                break;
                            case "Fdesc1":
                                fdesc1 = true;
                                break;
                            case "Fdesc2":
                                fdesc2 = true;
                                break;
                            case "Fdesc3":
                                fdesc3 = true;
                                break;
                        }
                    }
                    else
                    {
                            switch (column.Property)
                            {
                                case "Findex":
                                    findex = false;
                                    break;
                                case "Finout":
                                    finout = false;
                                    break;
                                case "Fdesc1":
                                    fdesc1 = false;
                                    break;
                                case "Fdesc2":
                                    fdesc2 = false;
                                    break;
                                case "Fdesc3":
                                    fdesc3 = false;
                                    break;
                            }
                    }
                }
            }
        }
    }

}
1 Like

Hi @fleccy,

It works! :slight_smile:

Thank you very much.

1 Like

Hi @at_extchj232,

Awesome! Glad it's working :slight_smile:

Thanks

1 Like