Always show header

2 posts, 0 answers
  1. Jasper
    Jasper avatar
    1 posts
    Member since:
    Jun 2018

    Posted 05 Mar 2019 Link to this post

    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!

     

  2.
  3. Lance | Manager Technical Support
    Admin
    Lance | Manager Technical Support avatar
    1168 posts

    Posted 05 Mar 2019 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top