This is a migrated thread and some comments may be shown as answers.

RadDataGrid for UWP and AdaptiveTriggers

4 Answers 69 Views
DataGrid
This is a migrated thread and some comments may be shown as answers.
Leszek
Top achievements
Rank 1
Leszek asked on 09 Mar 2017, 02:35 PM

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

 

4 Answers, 1 is accepted

Sort by
0
Lance | Manager Technical Support
Telerik team
answered on 10 Mar 2017, 03:48 PM
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
0
Leszek
Top achievements
Rank 1
answered on 10 Mar 2017, 04:33 PM

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

 

0
Accepted
Lance | Manager Technical Support
Telerik team
answered on 10 Mar 2017, 08:47 PM
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
0
Leszek
Top achievements
Rank 1
answered on 10 Mar 2017, 09:23 PM
Great! Thanks Lance for finding a solution and submitting the issue to the repo.
Tags
DataGrid
Asked by
Leszek
Top achievements
Rank 1
Answers by
Lance | Manager Technical Support
Telerik team
Leszek
Top achievements
Rank 1
Share this question
or