We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Hiding Columns

Is there a way to hide columns based on the screen using an AdaptiveTrigger,  I have tried by indexing the column, I have tried x:Name on the column.  VisualState is either not actually doing anything (which is not the question since I know the trigger is hitting). Or the Grid doesn't take the property change into account based on the screen size changing, when the State is hit and causes the setters to trigger the properties to be set.  This is slightly disturbing that you didn't add in "Visibility" properties that would be obvious over IsHidden?  I will try another solution to see if that will work over this failure.


<RelativePanel >
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="AdaptiveVisualStateGroup">
                    <VisualState x:Name="VisualStateNarrow">
                        <VisualState.StateTriggers>
                            <AdaptiveTrigger MinWindowWidth="{StaticResource NarrowMinWidth}" />
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <Setter Target="DocGrid.Columns[3].IsHidden" Value="True" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="VisualStateNormal">
                        <VisualState.StateTriggers>
                            <AdaptiveTrigger MinWindowWidth="{StaticResource NormalMinWidth}" />
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <Setter Target="DocGrid.Columns[3].IsHidden" Value="False" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="VisualStateWide">
                        <VisualState.StateTriggers>
                            <AdaptiveTrigger MinWindowWidth="{StaticResource WideMinWidth}" />
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <Setter Target="DocGrid.Columns[3].IsHidden" Value="False" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>

3 Replies

JG Jai Ganesh S Syncfusion Team December 13, 2016 12:51 PM UTC

Hi Morgan, 
You can achieve your requirement to show/hide the columns based on the window width by using the below code. 
<Page.Resources> 
      <syncfusion:Columns x:Key="maxWidthColumns"> 
            <syncfusion:GridTextColumn HeaderText="UserId" MappingName="UserId" /> 
            <syncfusion:GridTextColumn HeaderText="Name" MappingName="Name" /> 
        </syncfusion:Columns> 
 
        <syncfusion:Columns x:Key="minWidthColumns"> 
            <syncfusion:GridTextColumn HeaderText="DateofBirth" MappingName="DateofBirth" /> 
            <syncfusion:GridTextColumn HeaderText="Salary" MappingName="Salary" /> 
        </syncfusion:Columns> 
</Page.Resources> 
 
<VisualStateManager.VisualStateGroups> 
            <VisualStateGroup x:Name="Screen"> 
                <VisualState> 
                    <VisualState.StateTriggers> 
                        <AdaptiveTrigger MinWindowWidth="700" /> 
                    </VisualState.StateTriggers> 
                    <VisualState.Setters> 
                        <Setter Target="sfGrid.Columns" Value="{StaticResource maxWidthColumns}" /> 
                    </VisualState.Setters> 
                </VisualState> 
 
                <VisualState> 
                    <VisualState.StateTriggers> 
                        <AdaptiveTrigger MinWindowWidth="0" /> 
                    </VisualState.StateTriggers> 
                    <VisualState.Setters> 
                        <Setter Target="sfGrid.Columns" Value="{StaticResource minWidthColumns}" /> 
                    </VisualState.Setters> 
                </VisualState> 
            </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 

Regards, 
Jai Ganesh S 



MO Morgan December 13, 2016 09:17 PM UTC

Excellent 

Thanks! Jai


JG Jai Ganesh S Syncfusion Team December 14, 2016 05:37 AM UTC

Hi Morgan, 
Thank you for the update. 
Please let us know if you need further assistance on this. 
Regards, 
Jai Ganesh S 


Loader.
Live Chat Icon For mobile
Up arrow icon