locked
hide data grid template column when its empty RRS feed

  • Question

  • Hi 

    below is my datagrid code of which I want to hide my Tempalte column when it null or empty.

    <sdk:DataGrid
                          ItemsSource="{Binding Attributes}"
    					  AutoGenerateColumns="False">
                <sdk:DataGrid.Columns>
                    <sdk:DataGridTextColumn Header="Key" Binding="{Binding Key}" />
                    <sdk:DataGridTextColumn Header="Value" Binding="{Binding Value}"/>
                    <sdk:DataGridTemplateColumn Width="100">
                        <sdk:DataGridTemplateColumn.CellTemplate>
                            <DataTemplate> 
                                <HyperlinkButton Content="Pdf Link" Height="23" Name="PdfUrl" Width="76"
                                                 NavigateUri="{Binding Path=Value, Mode=TwoWay}" 
                                Visibility="{Binding Key, Converter={StaticResource VisConverter}}"
                                                 TargetName="_blank" Margin="5,10,10,7" Foreground="Blue" />
                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellTemplate>
                    </sdk:DataGridTemplateColumn>
                </sdk:DataGrid.Columns>
            </sdk:DataGrid>

    My datagridtemplatecolum has the Visibility property inherited  by using the method mentioned in this thread.

    https://social.msdn.microsoft.com/Forums/silverlight/en-US/e7858f73-9c56-406b-8e67-3a9ef7979a94/hide-datagrid-cell-value-template-column?forum=silverlightmvvm#9b1b61e0-8aeb-4895-866b-9e31961ea6be

    Now how do I bind the ColumnVisibility as shown below to my Datagridtemplatecolumn in XAML code.  Thank you

    public partial class MainPage : UserControl, INotifyPropertyChanged
        {
            public List<KeyValuePair<string, object>> Attributes { get; set; }
            private Visibility columnVisibility;
    
            public Visibility ColumnVisibility
            {
                get { return columnVisibility; }
                set { columnVisibility = value; OnPropertyChanged("ColumnVisibility"); }
            }
            public event PropertyChangedEventHandler PropertyChanged;
            private void OnPropertyChanged(string propertyName)
            { 
                if (this.PropertyChanged != null)
                {
                    PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
                }
            }
    
            public MainPage()
            {
                InitializeComponent();
                Attributes = new List<KeyValuePair<string, object>>
                {
                    new KeyValuePair<string, object>("aa", "AAAA"),
                    new KeyValuePair<string, object>("bbbb", "CCCC"),
                    new KeyValuePair<string, object>("Customer_url", "http://www.test.com"),
                };
                ColumnVisibility = Visibility.Collapsed;
                foreach (KeyValuePair<string, object> kvp in Attributes)
                {
                    if(kvp.Key == "Customer_url")
                    {
                        ColumnVisibility = Visibility.Visible;
                        break;
                    }
                }
                DataContext = this;
            }
        }

    Friday, September 11, 2015 7:22 PM

Answers

  • Hi ayaantara,

    Do you want to bind the ColumnVisibility property to sdk:DataGridTemplateColumn and hide this column with the key value? I'm afraid you can't use the dependency property directly. The Visibility property of DataGridTemplateColumn is not a dependency property. Please add a dependency property for hiding columns based on the name of a DataGridColumn as following code.

        public class DataGridEx : DataGrid
        {
            public IEnumerable<string> HiddenColumns
            {
                get { return (IEnumerable<string>)GetValue(HiddenColumnsProperty); }
                set { SetValue(HiddenColumnsProperty, value); }
            }
    
            public static readonly DependencyProperty HiddenColumnsProperty =
                DependencyProperty.Register("HiddenColumns",
                                             typeof(IEnumerable<string>),
                                             typeof(DataGridEx),
                                             new PropertyMetadata(HiddenColumnsChanged));
    
            private static void HiddenColumnsChanged(object sender,
                                                     DependencyPropertyChangedEventArgs args)
            {
                var dg = sender as DataGrid;
                if (dg == null || args.NewValue == args.OldValue)
                    return;
    
                var hiddenColumns = (IEnumerable<string>)args.NewValue;
                foreach (var column in dg.Columns)
                {
                    if (hiddenColumns.Contains((string)column.GetValue(NameProperty)))
                        column.Visibility = Visibility.Collapsed;
                    else
                        column.Visibility = Visibility.Visible;
                }
            }
        }
     

    Then use this DataGridEx instead of the DataGrid and assign a name for the column that you want to hide.

        <local:DataGridEx
                          ItemsSource="{Binding Attributes}"
           AutoGenerateColumns="False" HiddenColumns="{Binding HiddenColumns}">
                <local:DataGridEx.Columns>
                    <sdk:DataGridTextColumn Header="Key" Binding="{Binding Key}" />
                    <sdk:DataGridTextColumn Header="Value" Binding="{Binding Value}"/>
                    <sdk:DataGridTemplateColumn Width="100" x:Name="uiKeyItems">
                        <sdk:DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <HyperlinkButton Content="Pdf Link" Height="23" Name="PdfUrl" Width="76"
                                                 NavigateUri="{Binding Path=Value, Mode=TwoWay}" 
                                Visibility="{Binding Key, Converter={StaticResource VisConverter}}"
                                                 TargetName="_blank" Margin="5,10,10,7" Foreground="Blue" />
                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellTemplate>
                    </sdk:DataGridTemplateColumn>
                </local:DataGridEx.Columns>
            </local:DataGridEx>

    Next, add a HiddenColumns property in your ViewModle and add the columns into the hidden columns list as below.

            private IEnumerable<string> _hiddenColumns;
            public IEnumerable<string> HiddenColumns
            {
                get { return _hiddenColumns; }
                private set
                {
                    if (value == _hiddenColumns)
                        return;
    
                    _hiddenColumns = value;
                    OnPropertyChanged("HiddenColumns");
    
                }
            }
            public MainPage()
            {
                InitializeComponent();
                Attributes = new List<KeyValuePair<string, object>>
                {
                    new KeyValuePair<string, object>("aa", "AAAA"),
                    new KeyValuePair<string, object>("bbbb", "CCCC"),
                    new KeyValuePair<string, object>("Customer_url", "http://www.test.com"),
                };
    
                foreach (KeyValuePair<string, object> kvp in Attributes)
                {
                    if (kvp.Key == "Customer_url")
                    {
                        HiddenColumns = new List<string> { "uiKeyItems" };
                        break;
                    }
                }
                DataContext = this;
            }

    Best Regards,
    Weiwei


    • Edited by Weiwei Cai Monday, September 14, 2015 2:29 AM
    • Marked as answer by ayaantara Monday, September 21, 2015 8:57 PM
    Monday, September 14, 2015 2:29 AM
  • Hi ayaantara,

    Sorry for misunerstanding. Please modif the code as below.

            public MainPage()
            {
                InitializeComponent();
    
                Attributes = new List<KeyValuePair<string, object>>
                {
                    new KeyValuePair<string, object>("aa", "AAAA"),
                    new KeyValuePair<string, object>("bbbb", "CCCC"),
                    new KeyValuePair<string, object>("Customer_url", "http://www.test.com"),
                };
    
                 bool hasCustomer_url = false;
                foreach (KeyValuePair<string, object> kvp in Attributes)
                {
                    if (kvp.Key == "Customer_url")
                    {
                        hasCustomer_url = true;
                        break;
                    }
                }
                if (!hasCustomer_url)
                {
                    HiddenColumns = new List<string> { "uiKeyItems" };
                }
    
                DataContext = this;
            }

    Best Regards,
    Weiwei
    • Edited by Weiwei Cai Friday, September 18, 2015 3:30 PM
    • Proposed as answer by Weiwei Cai Monday, September 21, 2015 9:57 AM
    • Marked as answer by ayaantara Monday, September 21, 2015 8:57 PM
    Friday, September 18, 2015 3:29 PM

All replies

  • Hi ayaantara,

    Do you want to bind the ColumnVisibility property to sdk:DataGridTemplateColumn and hide this column with the key value? I'm afraid you can't use the dependency property directly. The Visibility property of DataGridTemplateColumn is not a dependency property. Please add a dependency property for hiding columns based on the name of a DataGridColumn as following code.

        public class DataGridEx : DataGrid
        {
            public IEnumerable<string> HiddenColumns
            {
                get { return (IEnumerable<string>)GetValue(HiddenColumnsProperty); }
                set { SetValue(HiddenColumnsProperty, value); }
            }
    
            public static readonly DependencyProperty HiddenColumnsProperty =
                DependencyProperty.Register("HiddenColumns",
                                             typeof(IEnumerable<string>),
                                             typeof(DataGridEx),
                                             new PropertyMetadata(HiddenColumnsChanged));
    
            private static void HiddenColumnsChanged(object sender,
                                                     DependencyPropertyChangedEventArgs args)
            {
                var dg = sender as DataGrid;
                if (dg == null || args.NewValue == args.OldValue)
                    return;
    
                var hiddenColumns = (IEnumerable<string>)args.NewValue;
                foreach (var column in dg.Columns)
                {
                    if (hiddenColumns.Contains((string)column.GetValue(NameProperty)))
                        column.Visibility = Visibility.Collapsed;
                    else
                        column.Visibility = Visibility.Visible;
                }
            }
        }
     

    Then use this DataGridEx instead of the DataGrid and assign a name for the column that you want to hide.

        <local:DataGridEx
                          ItemsSource="{Binding Attributes}"
           AutoGenerateColumns="False" HiddenColumns="{Binding HiddenColumns}">
                <local:DataGridEx.Columns>
                    <sdk:DataGridTextColumn Header="Key" Binding="{Binding Key}" />
                    <sdk:DataGridTextColumn Header="Value" Binding="{Binding Value}"/>
                    <sdk:DataGridTemplateColumn Width="100" x:Name="uiKeyItems">
                        <sdk:DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <HyperlinkButton Content="Pdf Link" Height="23" Name="PdfUrl" Width="76"
                                                 NavigateUri="{Binding Path=Value, Mode=TwoWay}" 
                                Visibility="{Binding Key, Converter={StaticResource VisConverter}}"
                                                 TargetName="_blank" Margin="5,10,10,7" Foreground="Blue" />
                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellTemplate>
                    </sdk:DataGridTemplateColumn>
                </local:DataGridEx.Columns>
            </local:DataGridEx>

    Next, add a HiddenColumns property in your ViewModle and add the columns into the hidden columns list as below.

            private IEnumerable<string> _hiddenColumns;
            public IEnumerable<string> HiddenColumns
            {
                get { return _hiddenColumns; }
                private set
                {
                    if (value == _hiddenColumns)
                        return;
    
                    _hiddenColumns = value;
                    OnPropertyChanged("HiddenColumns");
    
                }
            }
            public MainPage()
            {
                InitializeComponent();
                Attributes = new List<KeyValuePair<string, object>>
                {
                    new KeyValuePair<string, object>("aa", "AAAA"),
                    new KeyValuePair<string, object>("bbbb", "CCCC"),
                    new KeyValuePair<string, object>("Customer_url", "http://www.test.com"),
                };
    
                foreach (KeyValuePair<string, object> kvp in Attributes)
                {
                    if (kvp.Key == "Customer_url")
                    {
                        HiddenColumns = new List<string> { "uiKeyItems" };
                        break;
                    }
                }
                DataContext = this;
            }

    Best Regards,
    Weiwei


    • Edited by Weiwei Cai Monday, September 14, 2015 2:29 AM
    • Marked as answer by ayaantara Monday, September 21, 2015 8:57 PM
    Monday, September 14, 2015 2:29 AM
  • Hi WeiWei . Thank You for your response. The column is being hidden when the 

    key value is Customer_url.  I want to show it when its key value is Customer_url  and hide it when its not there. Please explain if I am mis understanding anything here


    • Marked as answer by ayaantara Monday, September 14, 2015 5:55 AM
    • Unmarked as answer by ayaantara Tuesday, September 15, 2015 4:59 AM
    • Edited by ayaantara Tuesday, September 15, 2015 5:00 AM
    Monday, September 14, 2015 5:54 AM
  • Hi ayaantara,

    Sorry for misunerstanding. Please modif the code as below.

            public MainPage()
            {
                InitializeComponent();
    
                Attributes = new List<KeyValuePair<string, object>>
                {
                    new KeyValuePair<string, object>("aa", "AAAA"),
                    new KeyValuePair<string, object>("bbbb", "CCCC"),
                    new KeyValuePair<string, object>("Customer_url", "http://www.test.com"),
                };
    
                 bool hasCustomer_url = false;
                foreach (KeyValuePair<string, object> kvp in Attributes)
                {
                    if (kvp.Key == "Customer_url")
                    {
                        hasCustomer_url = true;
                        break;
                    }
                }
                if (!hasCustomer_url)
                {
                    HiddenColumns = new List<string> { "uiKeyItems" };
                }
    
                DataContext = this;
            }

    Best Regards,
    Weiwei
    • Edited by Weiwei Cai Friday, September 18, 2015 3:30 PM
    • Proposed as answer by Weiwei Cai Monday, September 21, 2015 9:57 AM
    • Marked as answer by ayaantara Monday, September 21, 2015 8:57 PM
    Friday, September 18, 2015 3:29 PM
  • Hi WeiWei,  

    Thank you for your help. I have achived what I want now.

    Thank You very much.


    • Edited by ayaantara Monday, September 21, 2015 8:58 PM
    Monday, September 21, 2015 5:17 PM