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

How to disable entire row in RadDataGrid for UWP?

6 Answers 449 Views

DataGrid

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

Mike asked on 06 Jan 2019, 10:47 PM

Hi everyone,

In the UWP app I'm working on one page I have downloads multiple files (mostly PDF's) concurrently for users attending board meetings and lists them in a DataGrid with some columns being defined in DataTemplates. The business requirements for this grid specify that while each item is downloading the DataGrid row should be disabled but from reading the docs and googling I cannot see any way to do this.

I am very new to the Telerik DataGrid though so still hoping this can be done, even if it involves some sort of hack - does anyone know how I could achieve this?

I have listed just the DataGrid XAML below but can add the DataTemplate code if needed.

<Grid:RadDataGrid x:Name="agendaDataGrid"
                              Grid.Row="4"
                              Margin="48,0,48,24"
                              HorizontalAlignment="Stretch"
                              VerticalAlignment="Stretch"
                              ItemsSource="{x:Bind ViewModel.AgendaItems, Mode=OneWay}"
                              UserGroupMode="Disabled"
                              UserFilterMode="Disabled"
                              UserColumnReorderMode="None"
                              UserSortMode="None"
                              AutoGenerateColumns="False"
                              GridLinesVisibility="Horizontal"
                              BorderBrush="Transparent"
                              BorderThickness="0"
                              SelectedItem="{x:Bind ViewModel.SelectedAgendaItem, Mode=TwoWay}"
                              LayoutUpdated="OnLayoutUpdated">

                <Grid:RadDataGrid.Columns>

                    
                    <Grid:DataGridTemplateColumn SizeMode="Auto"
                                                 CellContentTemplate="{StaticResource ReadStateDataTemplate}">
                        <Grid:DataGridTemplateColumn.Header>
                            <Border CornerRadius="45"
                                    Background="{ThemeResource SystemControlDisabledChromeDisabledLowBrush}"
                                    Height="10"
                                    Width="10"
                                    />
                        </Grid:DataGridTemplateColumn.Header>
                    </Grid:DataGridTemplateColumn>

                    
                    <Grid:DataGridNumericalColumn Header="#"
                                                  PropertyName="DisplayPosition"
                                                  SizeMode="Auto" />

                    
                    <Grid:DataGridTemplateColumn SizeMode="Auto" CellContentTemplateSelector="{StaticResource DownloadAgendaItemTemplateSelector}">
                        <Grid:DataGridTemplateColumn.Header>
                            <TextBlock FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                       Text="" />
                        </Grid:DataGridTemplateColumn.Header>
                    </Grid:DataGridTemplateColumn>

                    
                    <Grid:DataGridTemplateColumn SizeMode="Auto"
                                                 CellContentTemplateSelector="{StaticResource MediaAgendaItemDataTemplateSelector}">
                        <Grid:DataGridTemplateColumn.Header>
                            <TextBlock FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                       Text="" />
                        </Grid:DataGridTemplateColumn.Header>
                    </Grid:DataGridTemplateColumn>

                    
                    <Grid:DataGridTextColumn x:Name="ItemNameColumn"
                                             Header="Item name"
                                             PropertyName="Name"
                                             SizeMode="Stretch"
                                             />

                    
                    <Grid:DataGridTextColumn Header="Type"
                                             PropertyName="Style"
                                             SizeMode="Auto" />

                    
                    <Grid:DataGridTextColumn Header="Timing"
                                             PropertyName="Timing"
                                             SizeMode="Auto" />

                    
                    <Grid:DataGridTextColumn Header="Pages"
                                             PropertyName="Pages"
                                             SizeMode="Auto" />

                    
                    <Grid:DataGridTemplateColumn SizeMode="Fixed"
                                                 Width="5"
                                                 CellContentTemplate="{StaticResource ItemColourDataTemplate}" />
                </Grid:RadDataGrid.Columns>

                <FlyoutBase.AttachedFlyout>
                    <Flyout Placement="Full"
                            FlyoutPresenterStyle="{StaticResource VoteFlyoutPresenterStyle}">
                        <Grid Width="430">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <TextBlock TextWrapping="Wrap"
                                       Text="{x:Bind ViewModel.SelectedVoteItem.VoteTitle, Mode=OneWay}" />
                            <TextBlock TextWrapping="Wrap"
                                       Text="{x:Bind ViewModel.SelectedVoteItem.VoteDescription, Mode=OneWay}"
                                       Grid.Row="1" />
                            <ListView Grid.Row="3"
                                      ItemsSource="{x:Bind ViewModel.SelectedVoteItem.VoteOptions, Mode=OneWay}"
                                      ScrollViewer.VerticalScrollBarVisibility="Disabled" />
                        </Grid>
                    </Flyout>
                </FlyoutBase.AttachedFlyout>

                <Interactivity:Interaction.Behaviors>
                    <Core:DataTriggerBehavior ComparisonCondition="NotEqual"
                                              Binding="{x:Bind ViewModel.SelectedVoteItem, Mode=OneWay}">
                        <components:OpenFlyoutAction TargetObject="{x:Bind agendaDataGrid, Mode=OneWay}" />
                    </Core:DataTriggerBehavior>
                </Interactivity:Interaction.Behaviors>

            </Grid:RadDataGrid>

6 Answers, 1 is accepted

answered on 07 Jan 2019, 07:38 PM

DisabledRows.zip

Hi Mike,

There really isn't a "disabled" or "enabled" state for Rows. If you wanted to prevent selection from occurring, then you can have a property on that items (e.g. "IsDownloading") and prevent selection for any of those items.

Preventing Selection

For example:

private void DataGrid_OnSelectionChanged(object sender, DataGridSelectionChangedEventArgs e)

{

// NOTE: DataGrid is in single selection mode. If you're using multiple selection, you need to iterate over e.AddedItems.

if (e?.AddedItems?.FirstOrDefault() is Data selectedItem)

{

if (selectedItem.IsDownloading)

{

// The item is still downloading, do not let it be selected

DataGrid.SelectedItems.Remove(selectedItem);

return;

}

else

{

// The item is done being downloaded, proceed as normal

}

Styling

As far as changing the visual appearance to indicator that a row can't be selected, you'll want to create a style for each of columns. Keep in mind that rows are just a set of columns for each data item, while the columns are what defines the visual appearance.

I would recommend using the cell decoration selector to change the background color of the cells for the row that is currently downloading. We have a tutorial here: https://docs.telerik.com/devtools/universal-windows-platform/controls/raddatagrid/columns/how-to/celldecorationstyleselector

Here's the same example above with a StyleSelector that depends on the IsDownloading value:

public class CellStyleSelector : StyleSelector

{

public Style IsDownloadingStyle { get; set; }

public Style NormalStyle { get; set; }

protected override Style SelectStyleCore(object item, DependencyObject container)

{

if (item is DataGridCellInfo ci && ci.Item is Data dataItem)

{

if (dataItem.IsDownloading)

{

return IsDownloadingStyle;

}

return NormalStyle;

}

in the page or app resources:

<Page.Resources>

<local:CellStyleSelector x:Key="BackgroundSelector">

<local:CellStyleSelector.NormalStyle>

<Style TargetType="Rectangle">

<Setter Property="Fill" Value="Transparent" />

</Style>

</local:CellStyleSelector.NormalStyle>

<local:CellStyleSelector.IsDownloadingStyle>

<Style TargetType="Rectangle">

<Setter Property="Fill" Value="LightGray" />

</Style>

</local:CellStyleSelector.IsDownloadingStyle>

</local:CellStyleSelector>

</Page.Resources>

Finally, you assign the style to the columns you want to have that background:

<grid:DataGridTextColumn PropertyName="Title" CellDecorationStyleSelector="{StaticResource BackgroundSelector}" />

Runnable Demo

I've attached a runnable demo, you'll see that clicking on any of the white rows will show a popup. Click on any of the gray rows, and the popup selection logic will not occur.

Regards,
Lance | Tech Support Engineer, Sr.
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

answered on 14 Feb 2019, 04:38 AM

Hi again Lance,

I'm hoping you can help me with this a bit more as the issue I am having after implementing your styling ideas above is that when selecting an item that has the custom background color and calling SelectionChanged the assigned background colour from the CellStyleSelector is lost.. Is there any way to force a layout update after the SelectionChanged event that will force the CellStyleSelector to run again?

I'm not getting this issue with the DisabledRows example solution you provided so there must be something in my grid or code that is resetting the cell styles somehow.

I've pasted my DataTemplates, Grid, CellStyleSlector class and page behind code below but I don't know useful it will be - it is quite a complicated grid as we have selectors for quite a few of the columns (though I'm sure you'll understand it.)

Hoping you can help me solve this as it's a major factor is stopping us releasing our app.

Many thanks in advance,

Mike

<Page.Resources>

        
        <local:RadGridCellStyleSelector x:Key="BackgroundSelector">

            <local:RadGridCellStyleSelector.IsDownloadingStyle>
                <Style TargetType="Rectangle">
                    <Setter Property="Fill" Value="LightGray" />
                    <Setter Property="Opacity" Value="0.1"/>
                </Style>
            </local:RadGridCellStyleSelector.IsDownloadingStyle>

            <local:RadGridCellStyleSelector.NotAvailableStyle>
                <Style TargetType="Rectangle">
                    <Setter Property="Fill" Value="Red" />
                    <Setter Property="Opacity" Value="0.1"/>
                </Style>
            </local:RadGridCellStyleSelector.NotAvailableStyle>

            <local:RadGridCellStyleSelector.HeaderStyle>
                <Style TargetType="Rectangle">
                    <Setter Property="Fill" Value="#4680FF" />
                    <Setter Property="Opacity" Value="0.1"/>
                </Style>
            </local:RadGridCellStyleSelector.HeaderStyle>

            <local:RadGridCellStyleSelector.NormalStyle>
                <Style TargetType="Rectangle">
                    <Setter Property="Fill" Value="Transparent" />
                </Style>
            </local:RadGridCellStyleSelector.NormalStyle>

        </local:RadGridCellStyleSelector>

        <Style TargetType="telerikGridPrimitive:DataGridColumnHeader">
            <Setter Property="Background"
                    Value="{ThemeResource SystemControlTransparentBrush}" />
            <Setter Property="Foreground"
                    Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
        </Style>

        <DataTemplate x:Key="ReadStateDataTemplate"
                      x:DataType="models:AgendaItem">
            <Border CornerRadius="45"
                    Height="10"
                    Width="10">
                <Border.Background>
                    <SolidColorBrush Color="{x:Bind StateColour, Mode=OneWay}" />
                </Border.Background>
            </Border>
        </DataTemplate>

        <DataTemplate x:Key="NormalReadStateDataTemplate"
                      x:DataType="models:AgendaItem">
            <Border CornerRadius="45"
                    Height="10"
                    Width="10"
                    Margin="{Binding IndentAmount}">
                <Border.Background>
                    <SolidColorBrush Color="{x:Bind StateColour, Mode=OneWay}" />
                </Border.Background>
            </Border>
        </DataTemplate>

        <DataTemplate x:Key="ExpandedHeaderReadStateDataTemplate"
                      x:DataType="models:AgendaItem">
            <Polygon Points="0,0 10,0 5,10" VerticalAlignment="Center" HorizontalAlignment="Center">
                <Polygon.Stroke>
                    <SolidColorBrush Color="{x:Bind StateColour, Mode=OneWay}"/>
                </Polygon.Stroke>
                <Polygon.Fill>
                    <SolidColorBrush Color="{x:Bind StateColour, Mode=OneWay}"/>
                </Polygon.Fill>
            </Polygon>
        </DataTemplate>

        <DataTemplate x:Key="CollapsedHeaderReadStateDataTemplate"
                      x:DataType="models:AgendaItem">
            <Polygon Points="0,0 10,5 0,10" VerticalAlignment="Center" HorizontalAlignment="Center">
                <Polygon.Stroke>
                    <SolidColorBrush Color="{x:Bind StateColour, Mode=OneWay}"/>
                </Polygon.Stroke>
                <Polygon.Fill>
                    <SolidColorBrush Color="{x:Bind StateColour, Mode=OneWay}"/>
                </Polygon.Fill>
            </Polygon>
        </DataTemplate>

        <DataTemplate x:Key="ItemColourDataTemplate"
                      x:DataType="models:AgendaItem">
            <Border>
                <Border.Background>
                    <SolidColorBrush Color="{x:Bind ItemColour, Mode=OneWay}" />
                </Border.Background>
            </Border>
        </DataTemplate>

        <DataTemplate x:Key="DownloadPendingDataTemplate"
                      x:DataType="models:AgendaItem">
            <Viewbox Width="15"
                     Height="15">
                <primitives:RadBusyIndicator AnimationStyle="AnimationStyle7"
                                             Content=""
                                             IsActive="False"
                                             Margin="0,0,0,-10" />
            </Viewbox>
        </DataTemplate>

        <DataTemplate x:Key="DownloadingDataTemplate"
                       x:DataType="models:AgendaItem">
            <Viewbox Width="15"
                     Height="15">
                <primitives:RadBusyIndicator AnimationStyle="AnimationStyle7"
                                             Content=""
                                             IsActive="True"
                                             Margin="0,0,0,-10" />
            </Viewbox>
        </DataTemplate>

        <DataTemplate x:Key="AnnotationStateDataTemplate"
                      x:DataType="models:AgendaItem">
            <TextBlock FontFamily="{ThemeResource SymbolThemeFontFamily}"
                       Text=""
                       HorizontalAlignment="Center"
                       VerticalAlignment="Center" />
        </DataTemplate>

        <DataTemplate x:Key="VoteCompletedStateDataTemplate"
                      x:DataType="models:AgendaItem">
            
            <Image Source="ms-appx:///Assets/iconVoteCompleted.png" Width="24" Height="24"/>
        </DataTemplate>

        <DataTemplate x:Key="ResolutionSignedStateDataTemplate"
                      x:DataType="models:AgendaItem">
            <Image Source="ms-appx:///Assets/iconResolutionSigned.png" Width="24" Height="24"/>
        </DataTemplate>

        <DataTemplate x:Key="VideoStateDataTemplate"
                      x:DataType="models:AgendaItem">
            <TextBlock FontFamily="{ThemeResource SymbolThemeFontFamily}"
                       Text=""
                       HorizontalAlignment="Center"
                       VerticalAlignment="Center" />
        </DataTemplate>

        <DataTemplate x:Key="BlankDataTemplate" />

        <components:ReadStateItemTemplateSelector x:Key="ReadStateItemTemplateSelector"
                                                  NormalDataTemplate="{StaticResource NormalReadStateDataTemplate}"
                                                  ExpandedDataTemplate="{StaticResource ExpandedHeaderReadStateDataTemplate}"
                                                  CollapsedDataTemplate="{StaticResource CollapsedHeaderReadStateDataTemplate}"/>

        <components:MediaAgendaItemDataTemplateSelector x:Key="MediaAgendaItemDataTemplateSelector"
                                                        AnnotationsDataTemplate="{StaticResource AnnotationStateDataTemplate}"
                                                        VoteCompletedDataTemplate="{StaticResource VoteCompletedStateDataTemplate}"
                                                        ResolutionSignedDataTemplate="{StaticResource ResolutionSignedStateDataTemplate}"
                                                        VideoDataTemplate="{StaticResource VideoStateDataTemplate}"
                                                        NothingDataTemplate="{StaticResource BlankDataTemplate}" />

        <components:DownloadAgendaItemTemplateSelector x:Key="DownloadAgendaItemTemplateSelector"
                                                       CompleteDataTemplate="{StaticResource BlankDataTemplate}"
                                                       PendingDataTemplate="{StaticResource DownloadPendingDataTemplate}"
                                                       DownloadingDataTemplate="{StaticResource DownloadingDataTemplate}" />
</Page.Resources>

-- Cell style collector. For items the user does not have access to (.IsEnabled property)

    public class RadGridCellStyleSelector : StyleSelector
    {
        public Style IsDownloadingStyle { get; set; }
        public Style NormalStyle { get; set; }
        public Style HeaderStyle { get; set; }
        public Style NotAvailableStyle { get; set; }

        protected override Style SelectStyleCore(object item, DependencyObject container)
        {
            if (item is DataGridCellInfo ci && ci.Item is AgendaItem dataItem)
            {
                if (dataItem.IsDownloading)
                {
                    return IsDownloadingStyle;
                }
                else if (dataItem is HeaderAgendaItem)
                {
                    return HeaderStyle;
                }
                else if (!dataItem.Enabled)
                {
                    return NotAvailableStyle;
                }
            }

            return NormalStyle;
        }
    }

//Code behind (just the Grid stuff)

    public sealed partial class BinderDetailsPage : Page
    {

        public BinderDetailsViewModel ViewModel { get; private set; }

        public BinderDetailsPage()
        {
            this.InitializeComponent();

            //Get the ViewModel instance from the IoC container
            ViewModel = App.Container.Resolve<BinderDetailsViewModel>();
            this.DataContext = ViewModel;
        }

        private void OnLayoutUpdated(object sender, object e)
        {
            if (agendaDataGrid == null || agendaDataGrid.Columns.Count <= 0 || ItemNameColumn == null)
                return;

            // iterate over all the other columns and add the total width
            double autoColumnsWidthTotal = agendaDataGrid.Columns.Sum(c => c.ActualWidth) - ItemNameColumn.ActualWidth;

            if (autoColumnsWidthTotal < 10)
                return;

            // Get the remaining with available for the "Stretchy" column
            double remainingSpace = agendaDataGrid.ActualWidth - agendaDataGrid.Margin.Left - agendaDataGrid.Margin.Right
                - agendaDataGrid.Padding.Left - agendaDataGrid.Padding.Right - autoColumnsWidthTotal - 5;

            if (remainingSpace < 100)
            {
                remainingSpace = 100;
            }

            // Set the Stretchy column's width using the remaining space
            // IMPORTANT: You need to set the column's SizeMode to Fixed in order for it to respect the Width value.
            if (ItemNameColumn.Width != remainingSpace)
            {
                ItemNameColumn.Width = remainingSpace;
            }
        }

        //We need this here to prevent a disabled or downloading item (row) from being selectable.
        //Also if the selected row is a header then call the ViewModel method to add or remove sub items.
        private async void AgendaDataGrid_SelectionChanged(object sender, DataGridSelectionChangedEventArgs e)
        {
            //NOTE: DataGrid is in single selection mode. If using multiple selection, we need to iterate over e.AddedItems.
            if (e?.AddedItems?.FirstOrDefault() is AgendaItem selectedItem)
            {
                if (selectedItem.IsDownloading)
                {
                    //The item is still downloading so do not let it be selected.
                    agendaDataGrid.SelectedItems.Remove(selectedItem);
                }
                else if (!selectedItem.Enabled)
                {
                    //User does not have permission to view item
                    await Dialogs.ShowMessage("You do not have permission to view the selected agenda item");

                }
                else if (selectedItem is HeaderAgendaItem)
                {
                    //The item is a header so call VM method to add or remove sub items as necessary.
                    ViewModel.UpdateSubItemsForHeader(selectedItem as HeaderAgendaItem);
                }
                else if (selectedItem is VoteAgendaItem)
                {
                    var item = selectedItem as VoteAgendaItem;
                    if (string.IsNullOrEmpty(item.VoteResponse))
                    {
                        ContentDialog voteDialog = new ShowVoteDialog(item);
                        await voteDialog.ShowAsync();
                        string selectedAnswer = voteDialog.SecondaryButtonText;
                        if (!string.IsNullOrEmpty(selectedAnswer))
                        {
                            await ViewModel.ProcessVoteResult(item, selectedAnswer);
                        }
                    }
                    else
                    {
                        await Dialogs.ShowMessage("You have already voted on this item");
                    }
                }
            }
        }

answered on 14 Feb 2019, 03:32 PM

Hello Mike,

Thank you for sharing the details. Ultimately, the DataGrid will be updated as long as the model infrastructure implements PropertyChanged an OnPropertyChanged is called. For example, if the IsDownloading property invoked OnPropertyChanged, the StyleSelector will be called and the new style will be applied.

However, if there is no property changed notification and a type is changed, then the StyleSelector will not be used and you won't see a change in the UI. Something needs to trigger the StyleSelector.

This would be the reason the DataGrid is not updating the UI in certain scenarios. You may need to restructure the data models, look into moving some properties down to a base class so that all the models that inherit from it can share the property.

My best advice at this point is to put Debug.WriteLine or breakpoints in the StyleSelector and verify when it is returning a new style when you expect it to. If you find that it is returning a new style, but DataGrid is not being updated, I can open a bug report.

Regards,
Lance | Technical Support Engineer, Principal
Progress Telerik

answered on 28 Jan 2020, 02:00 AM

selection.png

Hi,

I have done everything to remove the selection and the SelectionMode also None, but I'm stil seeing the light gray background when I click the row. How to totally disable the background hover and selection? See the image attachment, light gray selection in "England"

Implementation:

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

How to disable entire row in RadDataGrid for UWP?

6 Answers, 1 is accepted