Progress® Telerik® UI for WinUI Feedback Portal
Back to Feed
Request a Feature Report a Bug
Unplanned
Last Updated: 11 Mar 2024 12:52 by ADMIN
Martin Ivanov
Created on: 17 Jan 2024 12:26
Category: DataGrid
Type: Feature Request
1
DataGrid: Allow the filtering popup control to get displayed outside of the window bounds

The default behavior of the WinUI native Popup is to render within the bounds of its owner element. This means if the DataGrid reaches the end of the window and there is not enough space for the filtering control to draw, it will get clipped.

To avoid the clipping and allow the Popup to get displayed outside of the window, the ShouldConstrainToRootBounds property of the Popup should be set to false. 

Add an API in the RadDataGrid control to allow setting the ShouldConstrainToRootBounds option of the Popup.

In the meantime, you can disable the Popup constrain via an implicit Style in App.xaml:

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>                
            <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
            <ResourceDictionary Source="ms-appx:///Telerik.WinUI.Controls/Themes/Generic.xaml"/>
            <!-- Other merged dictionaries here -->
        </ResourceDictionary.MergedDictionaries>
        <Style TargetType="Popup">
            <Setter Property="ShouldConstrainToRootBounds" Value="False" />
        </Style>
        <!-- Other app resources here -->
    </ResourceDictionary>
</Application.Resources>

4 comments
ADMIN
Martin Ivanov
Posted on: 11 Mar 2024 12:52

Hello Pavel,

It looks like I've missed something during the testing of the previously suggested workaround. I am afraid that this won't work because both dialogs share the same Popup visual. I am afraid that currently there is no proper alternative solution that I can suggest for this case, except for leaving ShouldConstrainToRootBounds property to True.

Regards,
Martin Ivanov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Pavel Krebs
Posted on: 04 Mar 2024 15:25

Hello Martin,

I was able to set property with your tip but the behavior is same. When the property ShouldConstrainToRootBounds is set to false and the columns chooser panel is used for reordering the column labels are not aligned.

I have this simple MainWindow.xaml code:

<Window
    x:Class="TelerikWinUIAppSimple2.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:telerikinput="using:Telerik.UI.Xaml.Controls.Input"
    xmlns:telerikGrid="using:Telerik.UI.Xaml.Controls.Grid"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Page>
        <Page.Resources>
            <Style TargetType="Popup">
                <Setter Property="ShouldConstrainToRootBounds" Value="False" />
            </Style>
        </Page.Resources>
        <telerikGrid:RadDataGrid x:Name="dataGrid"
                                 AutoGenerateColumns="False"
                                 ItemsSource="{x:Bind Persons}"
                             CanUserChooseColumns="True"
                             GroupPanelPosition="Left"
                             UserGroupMode="Disabled"
                                 >
            <telerikGrid:RadDataGrid.Columns>
                <telerikGrid:DataGridTextColumn PropertyName="FirstName" Header="First Name" />
                <telerikGrid:DataGridTextColumn PropertyName="LastName" Header="Last Name" />
                <telerikGrid:DataGridTextColumn PropertyName="CountryName" Header="Country"/>
                <telerikGrid:DataGridTextColumn PropertyName="City"/>
                <telerikGrid:DataGridTextColumn PropertyName="PostalCode" Header="Postal Code"/>
                <telerikGrid:DataGridTextColumn PropertyName="PhoneNumber" Header="Phone"/>
            </telerikGrid:RadDataGrid.Columns>
        </telerikGrid:RadDataGrid>
    </Page>
</Window>

Click on the columns chooser button to open the columns chooser panel. Try to move any column label in it with mouse and the label stays on the last mouse position and columns are not reordered in the table.

Try to close and reopen the panel and the moved labels are duplicated there at invalid position.

 

 

 

ADMIN
Martin Ivanov
Posted on: 27 Feb 2024 10:12

Hello Pavel,

To set the ShouldConstrainToRootBounds property only on the filtering popup, you can create a custom FilterButtonTapCommand and in the Execute method you can use reflection to get and update the Popup element. For example:

public class CustomFilterButtonTapCommand : DataGridCommand
{
 public CustomFilterButtonTapCommand()
 {
	 this.Id = CommandId.FilterButtonTap;
 }

 public override bool CanExecute(object parameter)
 {
	 var context = parameter as FilterButtonTapContext;            
	 return true;
 }

 public override void Execute(object parameter)
 {
	 var context = parameter as FilterButtonTapContext;

	 var contentFlyout = this.Owner.GetType().GetProperty("ContentFlyout", BindingFlags.Instance | BindingFlags.NonPublic).GetValue(this.Owner) as DataGridContentFlyout;
	 var popup = contentFlyout.GetType().GetField("popup", BindingFlags.Instance | BindingFlags.NonPublic).GetValue(contentFlyout) as Popup;
	 popup.ShouldConstrainToRootBounds = false;
	 this.Owner.CommandService.ExecuteDefaultCommand(CommandId.FilterButtonTap, context);
 }
}

Regards,
Martin Ivanov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Pavel Krebs
Posted on: 20 Feb 2024 12:40

When the property ShouldConstrainToRootBounds is set to False for all popups it is not possible to reorder columns in the column chooser dialog (property CanUserChooseColumns in the RadDataGrid) - it doesn't work.

How to set ShouldConstrainToRootBounds property in the Popup only for the DataGrid filter control?

Create an account Log In
View
Type
Status
Category