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
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
Rank 1
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
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
Rank 1