Completed
Last Updated: 27 Aug 2020 09:12 by ADMIN
Release 2.17.0
Ryan
Created on: 17 Oct 2019 16:07
Category: Grid
Type: Feature Request
22
Preserve column order when showing/hiding columns dynamically

When a column is displayed conditionally, it's order is not preserved. In the code sample below, the ProductId column is the first column in the grid.  When you click the checkbox to hide the column, it is removed.  Click the checkbox again and the column reappears but it is the last column in the grid.

ADMIN EDIT: At the end of this post there is an attachment with a workaround through a custom column chooser.

<input type="checkbox" @onchange="@ToggleColumn" />

<TelerikGrid Data=@GridData>
    <GridColumns>
        @if (ShowColumn)
        {
            <GridColumn Field=@nameof(Product.ProductId) Title="Id" />
        }
        <GridColumn Field=@nameof(Product.ProductName) Title="Product Name" />
        <GridColumn Field=@nameof(Product.UnitPrice) Title="Unit Price">
            <Template>
                @(String.Format("{0:C2}", (context as Product).UnitPrice))
            </Template>
        </GridColumn>
    </GridColumns>
</TelerikGrid>

@code {
    public IEnumerable<Product> GridData { get; set; }
    bool ShowColumn = true;

    protected override void OnInitialized()
    {
        List<Product> products = new List<Product>();
        for (int i = 0; i < 20; i++)
        {
            products.Add(new Product()
            {
                ProductId = i,
                ProductName = "Product" + i.ToString(),
                UnitPrice = (decimal)(i * 3.14)
            });
        }

        GridData = products.AsQueryable();
    }

    private void ToggleColumn(ChangeEventArgs args)
    {
        ShowColumn = (bool)args.Value;
    }

    public class Product
    {
        public int ProductId { get; set; }
        public string ProductName { get; set; }
        public decimal UnitPrice { get; set; }
    }
}

6 comments
ADMIN
Marin Bratanov
Posted on: 11 Jun 2020 13:27

The opener post was updated with a sample that showcases the cholumn chooser + column order workaround. It is also attached to this post.

 

Regards,
Marin Bratanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
ADMIN
Marin Bratanov
Posted on: 06 Apr 2020 09:33

A workaround idea - if possible, you could have a column chooser type of UI so that all columns are generated dynamically: https://feedback.telerik.com/blazor/1450105-column-chooser.

 

Regards,
Marin Bratanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
ADMIN
Marin Bratanov
Posted on: 06 Jan 2020 17:42

The following issue is copied over from this page in order to keep problems related to the column order and its conditional/dynamic display in one place.

I want to prevent users without WriteAccess to see the GridCommandColumn and a custom GridColumn containing some buttons.

Those two columns are the first in my grid.

If I add AuthorizeView tags like this

<AuthorizeView Policy="MyPolicy">

   <GridCommandColumn ...>

      ...

   </GridCommandColumn>

</AuthorizeView>

<AuthorizeView Policy="MyPolicy">

   <GridColumn ...>

      ...

   </GridColumn>

</AuthorizeView>

they will be hidden if the user does not comply to the policy but if he does comply the columns are displayed not as the first columns in the grid but as the last.

As a workaround I now don't hide the columns but their content (by moving the AuthorizeView tags inside the column tags).  This is not a good solution though since I loose valuable horizontal screen-space for displaying empty columns.

 

Another workaround can be to set Width="0px" Resizable="false" to the column so the user does not see it. This can work if the content is not critical or confidential, as it will still render in the DOM and can be seen with the dev tools.

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor

ADMIN
Marin Bratanov
Posted on: 21 Nov 2019 13:18

An option you can consider is an ordered view-model with data for all columns in a @foreach loop. Inside, an if-block can render the chosen columns only. Still a little cumbersome but will not require separate components for separate grid configurations.

Here's a basic example I made to showcase the idea (in a real case you might want to use a hash table for the column names and their visibility as it might be a bit easier for more than one column):

<TelerikButton OnClick="@( () => ShouldRenderTeamCol = !ShouldRenderTeamCol )">toggle Team column</TelerikButton>

<TelerikGrid Data="@MyData" Height="400px"
             Pageable="true" Sortable="true" Groupable="true"
             FilterMode="Telerik.Blazor.GridFilterMode.FilterRow">
    <GridColumns>
        @foreach (string fieldName in fieldNames)
        {
            if (ShouldRenderColumn(fieldName))
            {
                <GridColumn Field="@fieldName" />
            }
        }
    </GridColumns>
</TelerikGrid>

@code {
    List<string> fieldNames = new List<string>() { "Id", "Name", "Team", "HireDate" };

    bool ShouldRenderTeamCol { get; set; }

    public IEnumerable<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
    {
        Id = x,
        Name = "name " + x,
        Team = "team " + x % 5,
        HireDate = DateTime.Now.AddDays(-x).Date
    });

    bool ShouldRenderColumn(string colName)
    {
        if(colName.Equals("Team") && !ShouldRenderTeamCol)
        {
            return false;
        }
        return true;
    }

    public class SampleData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public DateTime HireDate { get; set; }
    }
}

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Peter
Posted on: 21 Nov 2019 12:27
I would say this is a pretty big feature that is missing. A lot of occasions where columns may need to be hidden depending on context. Having to write different pages for each context would be a huge pain.
ADMIN
Marin Bratanov
Posted on: 18 Oct 2019 07:02

Hi Ryan,

I moved this thread to the Feedback Portal so you can Follow its status: https://feedback.telerik.com/blazor/1434835-preserve-column-order-when-showing-hiding-columns-dynamically.

At this point, this feature is not implemented in the grid, conditional columns control whether the column is present in the collection, but not its index. Right now I cannot say when and how that would be implemented, so my best advice is to Follow the item to get email notifications for updates.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor