Planned
Last Updated: 07 Aug 2020 15:42 by ADMIN
Scheduled for 2.17.0
James
Created on: 21 Jan 2020 11:27
Category: Grid
Type: Feature Request
16
Column chooser
Hi there, we have 2 applications we are currently building. We would like to know, if you guys know, when will the column chooser for the TelerikGrid be released? 
8 comments
ADMIN
Marin Bratanov
Posted on: 07 May 2020 12:35

Hello Kevin,

The same I had posted in my first response to the thread seems to work fine for me - both column headers and the corresponding data is shown. Can you confirm that you are using the latest version (2.12.0 at the moment)? If yes, I'd suggest opening a support ticket so we can see what the issue with the particular issue is.

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.
Kevin
Posted on: 06 May 2020 22:39

Hi.

I tried implementing the example but for me, only the column data disappeared while the column headers remained.  Is anyone else seeing that?

James
Posted on: 29 Jan 2020 06:42
Werner, you could probably just add a new boolean item to the ColumnDescriptor class: 

public class ColumnDescriptor
    {
        public string Field { get; set; }
        public string Title { get; set; }
        public bool Editable { get; set; }

        public bool Visible { get; set; }
    }

And for the list: 

 public List<ColumnDescriptor> AllGridColumns { get; set; } = new List<ColumnDescriptor>()
{
       new ColumnDescriptor { Field = "Field1", Title = "Fild 1", Editable = false, Visible = true},
}

And then in your grid component, you could probably do something like this: 

<TelerikGrid Data="@TestData" Height="300px" Pageable="true" FilterMode="@GridFilterMode.FilterRow"
                 Resizable="false" Reorderable="false" Groupable="false">
        <GridColumns>
            @foreach (ColumnDescriptor col in SelectedGridColumns)
            {
                if(col.Visible != false)
                {
                    <GridColumn Field="@col.Field" Title="@col.Title" Editable="@col.Editable">
                        <Template>
                            @{
                                object item = context;
                                string toRender = "";
                                PropertyInfo propertyInfo = item.GetType().GetProperty(col.Field);
                                if (propertyInfo != null)
                                {
                                    toRender = propertyInfo.GetValue(item).ToString();
                                }
                                @toRender
                            }
                        </Template>
                    </GridColumn>
                }
                else
                {
                     // don't show a column 
                }
            }
        </GridColumns>
        <GridToolBar>
            <TelerikButton OnClick="@ShowColumnChooser">Choose Columns</TelerikButton>
        </GridToolBar>
    </TelerikGrid>

I havent tested this yet but you could probably do something like, Marin, please correct me if I'm wrong here... 

OH PS: 

To set default columns: 

// define default columns
            SelectedGridColumns = new List<ColumnDescriptor>()
            {
                new ColumnDescriptor { Field = "Field1", Title = "Field 1", Editable = false},
                new ColumnDescriptor { Field = "Field2", Title = "Field 2", Editable = false}
            };
ADMIN
Marin Bratanov
Posted on: 28 Jan 2020 08:50

Hello Werner,

A column chooser is UI for the end user to show/hide columns, that will, ideally, be built-in in the grid so you don't have to write your own.

At the moment, you can already use conditional markup around columns to show/hide them, you can find examples of this in the following places:

 

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Werner
Posted on: 28 Jan 2020 05:10
... does this include, that a Blazor GridColumn can be set intentionally visible/invisible ?

Not Logged in

ADMIN
Marin Bratanov
Posted on: 23 Jan 2020 14:15

Hello James,

The last line in the OnInitialized() method here shows how to do that: https://docs.telerik.com/blazor-ui/components/grid/selection/multiple#two-way-binding-of-selecteditems. Well, it shows one way, you can obtain the initial selection in a different manner, it does not have to be a filter of the data, just a collection of models.

I'd also encourage you to fork our public samples repo and post an example of this if you like, for everyone to see, in the following folder: https://github.com/telerik/blazor-ui/tree/master/grid. Of course, add credits to yourself in the readme :) We award such contributions with Telerik points.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
James
Posted on: 23 Jan 2020 13:11
Wow, thank you so much Marin! Works like a charm! While I was playing with the code you sent, it dawned on me that we could probably pass a model/class into a page as a parameter, and then pull that page in the razor code as a component? So I tried that, and it works exactly like how I thought it would, no issues! 

Coupled with your column chooser, these components have low overhead and to re-use them in other pages is now simple, provided that you have the data to pass. 

So thanks very much! 

One thing I can't seem to get right is defining default selected items? Any idea on how that works? My IEnumerable knowledge is somewhat non-existent xD   
ADMIN
Marin Bratanov
Posted on: 21 Jan 2020 14:57

Hello James,

I moved this ticket to the public Feedback portal so you can Follow its status. Here's a link for you: https://feedback.telerik.com/blazor/1450105-column-chooser. At this point I cannot promise any timeframes, as this is the first time we receive this request for Blazor, and it will definitely have to happen after a context menu becomes available.

In the meantime, you can add another grid (e.g., in an animation container) where multi-row selection can give you a list of models that you can loop over to render columns in the main grid. Here's an example I made for you:

 

@using System.Reflection

<div style="position: relative;">
    <TelerikAnimationContainer Width="300px" @ref="@ColumnChooser" Class="k-popup">
        <div style="text-align:right">
            <TelerikButton Icon="@IconName.Close" OnClick="@HideColumnChooser"></TelerikButton>
        </div>
        <TelerikGrid Data="@AllGridColumns" @bind-SelectedItems="@SelectedGridColumns" SelectionMode="@GridSelectionMode.Multiple">
            <GridColumns>
                <GridCheckboxColumn />
                <GridColumn Title="Field Name" Field="Title" />
            </GridColumns>
        </TelerikGrid>
    </TelerikAnimationContainer>
</div>

@* disable features that tamper with the columns - resizing, reoredering, grouping *@
<TelerikGrid Data="@MyData" Height="400px" Pageable="true" FilterMode="@GridFilterMode.FilterRow" 
             Resizable="false" Reorderable="false" Groupable="false">
    <GridColumns>
        @foreach (ColumnDescriptor col in SelectedGridColumns)
        {
            <GridColumn Field="@col.Field" Title="@col.Title" Editable="@col.Editable">
                <Template>
                    @* this shows how to handle templates - if you need one template, you msut define a template for all columns
                        and this here is just a small example that extracts the field value through Reflection
                        If you don not need templated at all, simply omit definig the tag*@
                    @if (col.Field == "HireDate")
                    {
                        var item = context as SampleData;
                        <span style="color:red;">@item.HireDate.ToShortDateString()</span>
                    }
                    else
                    {
                        object item = context;
                        string toRender = "";
                        PropertyInfo propertyInfo = item.GetType().GetProperty(col.Field);
                        if (propertyInfo != null)
                        {
                            toRender = propertyInfo.GetValue(item).ToString();
                        }
                        @toRender
                    }
                </Template>
            </GridColumn>
        }
    </GridColumns>
    <GridToolBar>
        <TelerikButton OnClick="@ShowColumnChooser">Choose Columns</TelerikButton>
    </GridToolBar>
</TelerikGrid>



@code {
    TelerikAnimationContainer ColumnChooser { get; set; }
    async void ShowColumnChooser()
    {
        await ColumnChooser.ShowAsync();
    }
    async void HideColumnChooser()
    {
        await ColumnChooser.HideAsync();
    }

    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
    });

    //this example has the data hardcoded, you can consider generating it from classes
    List<ColumnDescriptor> AllGridColumns { get; set; } = new List<ColumnDescriptor>()
    {
        new ColumnDescriptor { Field = "Id", Title = "Id", Editable = false},
        new ColumnDescriptor { Field = "Name", Title = "Employee name", Editable = true},
        new ColumnDescriptor { Field = "Team", Title = "Team", Editable = true},
        new ColumnDescriptor { Field = nameof(SampleData.HireDate), Title = "Hire date", Editable = true},
    };

    //you can consider initializing this collection with some pre-selected columns
    IEnumerable<ColumnDescriptor> SelectedGridColumns { get; set; } = Enumerable.Empty<ColumnDescriptor>();

    public class ColumnDescriptor
    {
        public string Field { get; set; }
        public string Title { get; set; }
        public bool Editable { get; set; }
        //feel free to add other settings such as width, this is just an example
    }

    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