RadDataGrid for UWP and AdaptiveTriggers

5 posts, 1 answers
  1. Leszek
    Leszek avatar
    21 posts
    Member since:
    Jul 2012

    Posted 09 Mar Link to this post

    Hi,

    Is there any way to utilize AdaptiveTriggers with RadDataGrid for UWP?

    I'd like to accomplish something like that but obviously it does not work (the MyDataGrid.Columns[1].Header element is not recognized):

    <telerikGrid:RadDataGrid x:Name="MyDataGrid"
                             ItemsSource="{x:Bind MyCollection}"
                             AutoGenerateColumns="False">
        <telerikGrid:RadDataGrid.Columns>
            <telerikGrid:DataGridTextColumn x:Name="Column1" PropertyName="Prop1" Header="Prop1" />
            <telerikGrid:DataGridTextColumn PropertyName="Prop2" Header="Prop2" />
            <telerikGrid:DataGridTextColumn PropertyName="Prop3" Header="Prop3" />
        </telerikGrid:RadDataGrid.Columns>
    </telerikGrid:RadDataGrid>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="NarrowState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="1" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <!-- nothing to change for now -->
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="NormalState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="720" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <!-- this does not work -->
                    <Setter Target="MyDataGrid.Columns[0].Header" Value="New header" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="WideState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="1366" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <!-- nothing to change for now -->
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    Thanks,

    Leszek

     

  2. Lance | Tech Support Engineer, Sr.
    Admin
    Lance | Tech Support Engineer, Sr. avatar
    419 posts

    Posted 10 Mar Link to this post

    Hi Leszek,

    You can use the column's x:Name for the setter's target instead. For example, this will change the header of the columns:

    <grid:RadDataGrid x:Name="DataGrid"
                            ItemsSource="{Binding Items}"
                            AutoGenerateColumns="False">
              <grid:RadDataGrid.Columns>
                  <grid:DataGridTextColumn x:Name="AnnualQuantityColumn"
                                           PropertyName="AnnualQuantity"
                                           Header="Annual Quantity"  />
                  <grid:DataGridTextColumn x:Name="TypeNameColumn"
                                           PropertyName="TypeName"
                                           Header="Type"  />
              </grid:RadDataGrid.Columns>
          </grid:RadDataGrid>
          <VisualStateManager.VisualStateGroups>
              <VisualStateGroup x:Name="AdaptiveStates">
                  <VisualState x:Name="NarrowState">
                      <VisualState.StateTriggers>
                          <AdaptiveTrigger MinWindowWidth="0" />
                      </VisualState.StateTriggers>
                      <VisualState.Setters>
                          <Setter Target="AnnualQuantityColumn.Header"
                                  Value="Quantity (small)" />
                          <Setter Target="TypeNameColumn.Header"
                                  Value="Type (small)" />
                      </VisualState.Setters>
                  </VisualState>
                  <VisualState x:Name="NormalState">
                      <VisualState.StateTriggers>
                          <AdaptiveTrigger MinWindowWidth="720" />
                      </VisualState.StateTriggers>
                      <VisualState.Setters>
                          <Setter Target="AnnualQuantityColumn.Header"
                                  Value="Quantity (wide)" />
                          <Setter Target="TypeNameColumn.Header"
                                  Value="Type (wide)" />
                      </VisualState.Setters>
                  </VisualState>
              </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>


    I have confirmed this works on Windows 10 UWP app targeting 14393 with a minimum SDK version of 10586.

    Regards,
    Lance | Tech Support Engineer, Sr.
    Telerik by Progress
    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
  3. Leszek
    Leszek avatar
    21 posts
    Member since:
    Jul 2012

    Posted 10 Mar in reply to Lance | Tech Support Engineer, Sr. Link to this post

    Thanks Lance for your response. I have not realized that I can access the grid's columns by name. Unfortunately, I still can't make it work: the grid does not respond to the width changes. Taking your example, the column headers remain "Quantity (wide)" and "Type (wide)" no matter how much I re-size the window. I'm VS 2017 with exactly the same version of UWP as you (14393 with a minimum SDK version of 10586).

    Clearly, I'm doing something wrong.

    This is the complete code I'm using. Could you try it on your side and see if the headers change to "Quantity (small)" and "Type (small)":

    <Page x:Class="TestApp.MainPage"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          xmlns:grid="using:Telerik.UI.Xaml.Controls.Grid">
        <Grid>
            <grid:RadDataGrid x:Name="DataGrid"
                              ItemsSource="{x:Bind Items}"
                              AutoGenerateColumns="False">
                <grid:RadDataGrid.Columns>
                    <grid:DataGridTextColumn x:Name="AnnualQuantityColumn"
                                             PropertyName="AnnualQuantity"
                                             Header="Annual Quantity"/>
                    <grid:DataGridTextColumn x:Name="TypeNameColumn"
                                             PropertyName="TypeName"
                                             Header="Type"/>
                </grid:RadDataGrid.Columns>
            </grid:RadDataGrid>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="AdaptiveStates">
                    <VisualState x:Name="NarrowState">
                        <VisualState.StateTriggers>
                            <AdaptiveTrigger MinWindowWidth="0" />
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <Setter Target="AnnualQuantityColumn.Header" Value="Quantity (small)" />
                            <Setter Target="TypeNameColumn.Header" Value="Type (small)" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="NormalState">
                        <VisualState.StateTriggers>
                            <AdaptiveTrigger MinWindowWidth="720" />
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <Setter Target="AnnualQuantityColumn.Header" Value="Quantity (wide)" />
                            <Setter Target="TypeNameColumn.Header" Value="Type (wide)" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </Grid>
    </Page>

     

    using System;
    using System.Collections.Generic;
    using System.Collections.ObjectModel;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Navigation;
    namespace TestApp
    {
        public sealed partial class MainPage : Page
        {
            public ObservableCollection<Item> Items;
            public MainPage()
            {
                this.InitializeComponent();
                Items = new ObservableCollection<Item>();
            }
            protected override void OnNavigatedTo(NavigationEventArgs args)
            {
                base.OnNavigatedTo(args);
                Items.Add(new Item { AnnualQuantity = 1, TypeName = "AAA" });
                Items.Add(new Item { AnnualQuantity = 2, TypeName = "BBB" });
                Items.Add(new Item { AnnualQuantity = 3, TypeName = "CCC" });
            }
        }
        public class Item
        {
            public int AnnualQuantity { get; set; }
            public string TypeName { get; set; }
        }
    }

     

    Thanks,

    Leszek

     

  4. Answer
    Lance | Tech Support Engineer, Sr.
    Admin
    Lance | Tech Support Engineer, Sr. avatar
    419 posts

    Posted 10 Mar Link to this post

    Hello Leszek,

    My apologies, my suggestion was based on incomplete testing as I'm only able to get this to work very infrequently.  At first glance this seems to be due to the Header's property (seen here in the open source repo) not propagating property changed to the UI.

    The actual underlying value does indeed change because if you update the headers programmatically in a loop, you can see on a break point that the Header value has been updated. It's only the UI that not being updated.

    Since you do not have a commercial license for UI for UWP, I have gone ahead and submitted this issue to the repo on your behalf. You can track the progress of the issue by subscribing to that thread.

    Regards,
    Lance | Tech Support Engineer, Sr.
    Telerik by Progress
    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
  5. Leszek
    Leszek avatar
    21 posts
    Member since:
    Jul 2012

    Posted 10 Mar in reply to Lance | Tech Support Engineer, Sr. Link to this post

    Great! Thanks Lance for finding a solution and submitting the issue to the repo.
Back to Top