Always show header

[Jasper]

Hello,

I'm wondering how I can make the header always visible, even when there are no records bound to it yet.
The Grid is initially empty but I want the header to be visible still. Now it's only showing a grey line.

Here's how we've setup the grid.

<telerikDataGrid:RadDataGrid AutoGenerateColumns="false" SelectionMode="Single" UserFilterMode="Disabled" UserGroupMode="Disabled" UserSortMode="None">
    <telerikDataGrid:RadDataGrid.Behaviors>
        <behaviors:EventToCommandBehavior EventName="SelectionChanged" Command="{Binding MyCommand}” />
    </telerikDataGrid:RadDataGrid.Behaviors>
    <telerikDataGrid:RadDataGrid.Columns>
        <telerikDataGrid:DataGridTextColumn PropertyName=“Prop1”>
            <telerikDataGrid:DataGridTextColumn.HeaderStyle>
                <telerikDataGrid:DataGridColumnHeaderStyle OptionsButtonTextColor="Transparent" VerticalTextAlignment="Center" BorderThickness="1" />
            </telerikDataGrid:DataGridTextColumn.HeaderStyle>
        </telerikDataGrid:DataGridTextColumn>
        <telerikDataGrid:DataGridTextColumn PropertyName="Prop2”>
            <telerikDataGrid:DataGridTextColumn.HeaderStyle>
                <telerikDataGrid:DataGridColumnHeaderStyle OptionsButtonTextColor="Transparent" VerticalTextAlignment="Center" BorderThickness="1" />
            </telerikDataGrid:DataGridTextColumn.HeaderStyle>
        </telerikDataGrid:DataGridTextColumn>
        <telerikDataGrid:DataGridTextColumn PropertyName="Prop3”>
            <telerikDataGrid:DataGridTextColumn.HeaderStyle>
                <telerikDataGrid:DataGridColumnHeaderStyle OptionsButtonTextColor="Transparent" VerticalTextAlignment="Center" BorderThickness="1" />
            </telerikDataGrid:DataGridTextColumn.HeaderStyle>
        </telerikDataGrid:DataGridTextColumn>
    </telerikDataGrid:RadDataGrid.Columns>
</telerikDataGrid:RadDataGrid>

 

Thanks!

 

[Lance | Manager Technical Support]

Hi Jasper,

You would want to initially set the ITemsSource with an empty collection of you need the DataGrid to render the columns.

This lets the DataGrid can observe the type and read the properties. This will cause the columns to be rendered because the properties have been read. Then when you're ready to load the data, just use Add() for the fetched items.

Here are two examples:

MVVM Approach

If you're using data binding

<telerikDataGrid:RadDataGrid  ItemsSource="{Binding Items}" ...>

public ObservableCollection<DataModel> Items { get; set; } = new ObservableCollection<DataModel>();

 // Load the data later
public async Task LoadDataAsync()
{
    var dataItems = MyDataService.GetData();

    // For a regular ObservableCollection
    foreach(var item in dataItems)
    {
        Items.Add(item);
    }

    // Or if you use an ObservableRangeCollection
    Items.AddRange(dataItems);
}

Code Behind Approach

If you're not using MVVM and are using code-behind, then you initialize the DataGrid with an empty collection:

<telerikDataGrid:RadDataGrid x:Name="dataGrid"  >

public partial class MyPage : ContentPage

{

    public ObservableCollection<DataItem> Items { get; set; }

 

    public MyPage()

    {

        InitializeComponent();

 

        Items = new ObservableCollection<DataItem>();

 

        dataGrid.ItemsSource = Items;

    }

 
          // Load the data later

    public async Task LoadDataAsync()

    {

        var dataItems = MyDataService.GetData();

         

        foreach (var item in dataItems)

        {

            Items.Add(item);

        }

    }

}

I've attached a demo that verifies this.

Further Investigation

If you have any further issues, please open a Support Ticket and attach the code you're using so we can directly investigate.

Regards,
Lance | Technical Support Engineer, Principal
Progress Telerik