How to disable entire row in RadDataGrid for UWP?

5 posts, 0 answers
  1. Mike
    Mike avatar
    11 posts
    Member since:
    Jan 2019

    Posted 06 Jan Link to this post

    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>

                        <!-- Read state of item -->
                        <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>

                        <!-- Item position -->
                        <Grid:DataGridNumericalColumn Header="#"
                                                      PropertyName="DisplayPosition"
                                                      SizeMode="Auto"  />

                        <!-- Download status -->
                        <Grid:DataGridTemplateColumn SizeMode="Auto" CellContentTemplateSelector="{StaticResource DownloadAgendaItemTemplateSelector}">
                            <Grid:DataGridTemplateColumn.Header>
                                <TextBlock FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                           Text="&#xE896;" />
                            </Grid:DataGridTemplateColumn.Header>
                        </Grid:DataGridTemplateColumn>

                        <!-- Download status -->
                        <Grid:DataGridTemplateColumn SizeMode="Auto"
                                                     CellContentTemplateSelector="{StaticResource MediaAgendaItemDataTemplateSelector}">
                            <Grid:DataGridTemplateColumn.Header>
                                <TextBlock FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                           Text="&#xEE56;" />
                            </Grid:DataGridTemplateColumn.Header>
                        </Grid:DataGridTemplateColumn>

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

                        <!-- Item type/style -->
                        <Grid:DataGridTextColumn Header="Type"
                                                 PropertyName="Style"
                                                 SizeMode="Auto" />

                        <!-- Estimated time of each item (or video length) -->
                        <Grid:DataGridTextColumn Header="Timing"
                                                 PropertyName="Timing"
                                                 SizeMode="Auto" />

                        <!-- Number of pages (PDF only)-->
                        <Grid:DataGridTextColumn Header="Pages"
                                                 PropertyName="Pages"
                                                 SizeMode="Auto" />

                        <!-- Colour of item in documents navigation bar in PdfAgendaItem -->
                        <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>

  2. Lance | Team Lead - US DevTools Support
    Admin
    Lance | Team Lead - US DevTools Support avatar
    1048 posts

    Posted 07 Jan Link to this post

    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
  3. Mike
    Mike avatar
    11 posts
    Member since:
    Jan 2019

    Posted 07 Jan in reply to Lance | Team Lead - US DevTools Support Link to this post

    Hi Lance,

    Thank you so much for this fantastic and detailed answer and the sample :-)

    it will take a few days before I can get back to that issue but I'll follow up here when I've applied your solution.

    Cheers,

    Mike

  4. Mike
    Mike avatar
    11 posts
    Member since:
    Jan 2019

    Posted 13 Feb in reply to Lance | Team Lead - US DevTools Support Link to this post

    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>

            <!--
            This determines whether the row is selectable and there are three possibilities:
            1. IsDownloadingStyle - applied when item is downloading so row can't be selected
            2. NotAvailableStyle  - user does not have permission to view this item
            3. NormalStyle        - item has downloaded and user has permission to view this item
            -->
            <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="&#xEE56;"
                           HorizontalAlignment="Center"
                           VerticalAlignment="Center" />
            </DataTemplate>

            <DataTemplate x:Key="VoteCompletedStateDataTemplate"
                          x:DataType="models:AgendaItem">
                <!--<TextBlock FontFamily="{ThemeResource SymbolThemeFontFamily}"
                           Text="&#xE116;"
                           HorizontalAlignment="Center"
                           VerticalAlignment="Center" />-->
                <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="&#xE116;"
                           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>

    <!-- other controls here -->

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

                    <grid:RadDataGrid.Resources>
                        <Style TargetType="telerikGridPrimitive:SelectionRegionBorderControl">
                            <Setter Property="BorderBrush" Value="#CCCCCC"/>
                            <Setter Property="Background" Value="White" />
                        </Style>
                    </grid:RadDataGrid.Resources>

                    <grid:RadDataGrid.Columns>

                    <!-- Read state of item -->
                    <grid:DataGridTemplateColumn SizeMode="Auto"     
                                                 CellDecorationStyleSelector="{StaticResource BackgroundSelector}"
                                                 CellContentTemplateSelector="{StaticResource ReadStateItemTemplateSelector}">
                    <!--CellContentTemplate="{StaticResource ReadStateDataTemplate}-->
                        <grid:DataGridTemplateColumn.Header>
                            <Border CornerRadius="45"
                                    Background="{ThemeResource SystemControlDisabledChromeDisabledLowBrush}"
                                    Height="10"
                                    Width="10"
                                    HorizontalAlignment="Center"                               
                                    />
                        </grid:DataGridTemplateColumn.Header>
                    </grid:DataGridTemplateColumn>

                    <!-- Item position -->
                    <grid:DataGridNumericalColumn Header="#"
                                                  PropertyName="PositionString"                                                  
                                                  SizeMode="Auto"
                                                  CellDecorationStyleSelector="{StaticResource BackgroundSelector}"/>
                    <!-- We need an indent on this column now so chnaged to Text column and changred property -->
                    <!--<grid:DataGridTextColumn Header="#"
                                                  PropertyName="PositionStringWithIndent"                                                  
                                                  SizeMode="Auto"
                                                  CellDecorationStyleSelector="{StaticResource BackgroundSelector}"/>-->

                    <!-- Download status -->
                    <grid:DataGridTemplateColumn SizeMode="Auto"
                                                 CellContentTemplateSelector="{StaticResource DownloadAgendaItemTemplateSelector}"
                                                 CellDecorationStyleSelector="{StaticResource BackgroundSelector}">
                        <grid:DataGridTemplateColumn.Header>
                            <TextBlock FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                        Text="&#xE896;" />
                        </grid:DataGridTemplateColumn.Header>
                    </grid:DataGridTemplateColumn>

                    <!-- Download status -->
                    <grid:DataGridTemplateColumn SizeMode="Auto"
                                                 CellDecorationStyleSelector="{StaticResource BackgroundSelector}"
                                                 CellContentTemplateSelector="{StaticResource MediaAgendaItemDataTemplateSelector}">
                        <grid:DataGridTemplateColumn.Header>
                            <TextBlock FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                        Text="&#xEE56;" />
                        </grid:DataGridTemplateColumn.Header>
                    </grid:DataGridTemplateColumn>

                    <!-- Item name -->
                    <grid:DataGridTextColumn x:Name="ItemNameColumn"
                                             Header="Item name"
                                             PropertyName="Name"
                                             SizeMode="Stretch"            
                                             CellDecorationStyleSelector="{StaticResource BackgroundSelector}"
                                                />

                    <!-- Item type/style -->
                    <grid:DataGridTextColumn Header="Type"
                                             PropertyName="Style"
                                             SizeMode="Auto"
                                             CellDecorationStyleSelector="{StaticResource BackgroundSelector}"/>

                    <!-- Estimated time of each item (or video length) -->
                    <grid:DataGridTextColumn Header="Timing"
                                             PropertyName="Timing"                                             
                                             SizeMode="Auto"
                                             CellDecorationStyleSelector="{StaticResource BackgroundSelector}"/>

                    <!-- Number of pages (PDF only)-->
                    <grid:DataGridTextColumn Header="Pages"
                                             PropertyName="Pages"
                                             SizeMode="Auto"
                                             CellDecorationStyleSelector="{StaticResource BackgroundSelector}"/>

                    <!-- Colour of item in documents navigation bar in PdfAgendaItem -->
                    <grid:DataGridTemplateColumn SizeMode="Fixed"
                                                 Width="5"
                                                 CellContentTemplate="{StaticResource ItemColourDataTemplate}"
                                                 CellDecorationStyleSelector="{StaticResource BackgroundSelector}"/>
                </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>
            </Grid>

    -- 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");
                        }
                    }
                }
            }

     

  5. Lance | Team Lead - US DevTools Support
    Admin
    Lance | Team Lead - US DevTools Support avatar
    1048 posts

    Posted 14 Feb Link to this post

    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
    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
Back to Top