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!
1 Answer, 1 is accepted
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>();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