Select and select all button issues on filtering drop down

[Kavita]

Hi,

In rad grid view filtering drop down if i select an item from list of items then select all button is selected automatically.

we want select all button to be selected if all items are selected in the list. Is there any way to override this default behaviour of rad grid view filtering drop down.

Looking forward for your reply.

Thanks And Regards,

[Rossen Hristov]

Hi,

The "Select All" check-box is a standard three-state check box. 

When no distinct values are checked -- it is unchecked.
When at least one but not all distinct values are checked -- it is semi-checked, i.e. in its intermediate state.
When all distinct values are checked -- it is fully checked.

There is no way to change this behavior, but we believe that this is the standard behavior for a three-state check-box.

All the best,

Rossen Hristov
the Telerik team

[David]

Hi,

       Is this possible that in intermediate state we can change checked mark icon of select all checkbox. 

       for eg. i have attached a snapshot (threestateofcheckbox.png) in which if all checkboxes are checked then header checkbox checked icon is different (right mark) but if atleast one is checked not all then header checkbox checked icon is different.

Looking forward for your reply .

Thanks And Regards.

[Vanya Pavlova]

Hello David,

 
In general, all CheckBox controls within the template of FilteringControl are plain Microsoft CheckBox elements with specific Telerik style for the corresponding theme. You may predefine the template of the CheckBox per theme and modify its Intermediate state in the way you need.  Furthermore if you need to modify only the SelectAll CheckBox you can access it from the template of FilteringControl and set a specific style to it.  

Regards,
Vanya Pavlova
Telerik

[David]

Hi,

Can you please provide me any help link to implement this?

Also if it is possible to remove intermediate state behaviour from telerik checkboxes then can you provide us some help link as i was not able to find proper solution of my problem.

[Vanya Pavlova]

Hi David,


Thank you for getting back to us! This approach involves simple styling of a Checkbox control.
Let me try to explain the alternatives:

1. You may completely remove the intermediate state of a Checkbox through defining a style targeted at this element and set its IsThreeState property to False:

<Style TargetType="CheckBox">
      <Setter Property="IsThreeState" Value="False"/>
</Style>

Then you will have only two states of this element-checked and unchecked.

2. Once you predefine the template of a Checkbox you may alter the appearance of IndeterminateIcon as follows:

<Rectangle x:Name="IndeterminateIcon" HorizontalAlignment="Center" VerticalAlignment="Center" Width="9" Height="9" FlowDirection="LeftToRight"  Visibility="Collapsed" Fill="Orange" StrokeThickness="0"/>

3. The third option would be to show the CheckIcon within Intermediate state of the Checkbox, then you will have equal appearance in both modes-checked/intermediate:

<VisualState x:Name="Indeterminate">
                 <Storyboard>
                   <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckIcon" Storyboard.TargetProperty="Visibility">
                     <DiscreteObjectKeyFrame KeyTime="0">
                       <DiscreteObjectKeyFrame.Value>
                         <Visibility>Visible</Visibility>
                       </DiscreteObjectKeyFrame.Value>
                     </DiscreteObjectKeyFrame>
                   </ObjectAnimationUsingKeyFrames>
                 </Storyboard>
               </VisualState>

I am attaching you sample project which demonstrates this approach.
Hope this helps!


Regards,
Vanya Pavlova
Telerik

[David]

Hello,

Unfortunately it has not resolved our purpose.

I want to remove intermediate state behaviour from telerik Radgridview filtering control's select all checkbox.

In previous post you have mentioned that we can implement this by modifying only the SelectAll CheckBox present in the template of FilteringControl and set a specific style to it. 

can you please provide me any sample project which overrides style of filtering control checkboxes.

Thanks and Regards,

[Vanya Pavlova]

Hello David,


I've extended the previous project and you can see the specific style applied to SelectAll Checkbox within the template of FilteringControl:

<CheckBox x:Name="PART_SelectAllCheckBox" Style="{StaticResource CheckBoxStyle}" Content="Select All" ...>

Feel free to modify it in the way you need.
Will you verify how this corresponds to your needs?



Regards,
Vanya Pavlova
Telerik

[David]

Hello,

  Thanks a lot for providing us the solution project. It really helped us to change style of select all in intermediate state.

 But still we have a requirement to remove intermediate state behaviour completely from select all checkbox of filter control.

I have set "IsThreeState" property to "False" as suggested by you to completly remove this intermediate state but it didn't work.Is there any possible workaround for this ??? 

Thanks

[Vanya Pavlova]

Hello David,



Thank you for getting back to us! In case the IsThreeState property set to False is not appropriate for you, you can do the following - remove IntermediateIcon from the template of Checkbox and the animations associated with this state.
You may find below the same style from the project with removed intermediate state and elements:

<Style x:Key="CheckBoxStyle" TargetType="CheckBox">
   <Setter Property="Background" Value="{StaticResource CheckBoxOuterBackground_Normal}" />
   <Setter Property="BorderBrush" Value="{StaticResource CheckBoxOuterBorder_Normal}" />
   <Setter Property="BorderThickness" Value="1" />
   <Setter Property="HorizontalContentAlignment" Value="Left" />
   <Setter Property="VerticalContentAlignment" Value="Top" />
   <Setter Property="Padding" Value="4 0 0 0" />
   <Setter Property="SnapsToDevicePixels" Value="True" />
   <Setter Property="FocusVisualStyle" Value="{x:Null}" />
   <Setter Property="Template">
     <Setter.Value>
       <ControlTemplate TargetType="CheckBox">
         <Grid Background="Transparent">
           <VisualStateManager.VisualStateGroups>
             <VisualStateGroup x:Name="CommonStates">
               <VisualState x:Name="Normal" />
               <VisualState x:Name="MouseOver">
                 <Storyboard>
                   <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="BorderBrush">
                     <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource CheckBoxOuterBorder_MouseOver}" />
                   </ObjectAnimationUsingKeyFrames>
                   <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerBorder" Storyboard.TargetProperty="BorderBrush">
                     <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource CheckBoxInnerBorder_MouseOver}" />
                   </ObjectAnimationUsingKeyFrames>
                   <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerBorder" Storyboard.TargetProperty="Background">
                     <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource CheckBoxInnerBackground_MouseOver}" />
                   </ObjectAnimationUsingKeyFrames>
                   <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckIcon" Storyboard.TargetProperty="Stroke">
                     <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource CheckBoxTickStroke_MouseOver}" />
                   </ObjectAnimationUsingKeyFrames>

                 </Storyboard>
               </VisualState>
               <VisualState x:Name="Pressed">
                 <Storyboard>
                   <ObjectAnimationUsingKeyFrames Storyboard.TargetName="IntermediateBorder" Storyboard.TargetProperty="BorderBrush">
                     <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource CheckBoxIntermediateBorder_Pressed}" />
                   </ObjectAnimationUsingKeyFrames>
                   <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="BorderBrush">
                     <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource CheckBoxOuterBorder_Pressed}" />
                   </ObjectAnimationUsingKeyFrames>
                   <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerBorder" Storyboard.TargetProperty="BorderBrush">
                     <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource CheckBoxInnerBorder_Pressed}" />
                   </ObjectAnimationUsingKeyFrames>
                   <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerBorder" Storyboard.TargetProperty="Background">
                     <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource CheckBoxInnerBackground_Pressed}" />
                   </ObjectAnimationUsingKeyFrames>
                   <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckIcon" Storyboard.TargetProperty="Stroke">
                     <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource CheckBoxTickStroke_Pressed}" />
                   </ObjectAnimationUsingKeyFrames>

                 </Storyboard>
               </VisualState>
               <VisualState x:Name="Disabled">
                 <Storyboard>
                   <ObjectAnimationUsingKeyFrames Storyboard.TargetName="IntermediateBorder" Storyboard.TargetProperty="BorderBrush">
                     <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource CheckBoxIntermediateBorder_Disabled}" />
                   </ObjectAnimationUsingKeyFrames>
                   <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="BorderBrush">
                     <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource CheckBoxOuterBorder_Disabled}" />
                   </ObjectAnimationUsingKeyFrames>
                   <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="Background">
                     <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource CheckBoxOuterBackground_Disabled}" />
                   </ObjectAnimationUsingKeyFrames>
                   <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerBorder" Storyboard.TargetProperty="BorderBrush">
                     <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource CheckBoxInnerBorder_Disabled}" />
                   </ObjectAnimationUsingKeyFrames>
                   <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerBorder" Storyboard.TargetProperty="Background">
                     <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource CheckBoxInnerBackground_Disabled}" />
                   </ObjectAnimationUsingKeyFrames>
                   <DoubleAnimation Duration="0" Storyboard.TargetName="ContentItem" Storyboard.TargetProperty="Opacity" To="0.5" />
                   <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckIcon" Storyboard.TargetProperty="Stroke">
                     <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource CheckBoxTickStroke_Disabled}" />
                   </ObjectAnimationUsingKeyFrames>

                 </Storyboard>
               </VisualState>
             </VisualStateGroup>
             <VisualStateGroup x:Name="CheckStates">
               <VisualState x:Name="Unchecked" />
               <VisualState x:Name="Checked">
                 <Storyboard>
                   <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckIcon" Storyboard.TargetProperty="Visibility">
                     <DiscreteObjectKeyFrame KeyTime="0">
                       <DiscreteObjectKeyFrame.Value>
                         <Visibility>Visible</Visibility>
                       </DiscreteObjectKeyFrame.Value>
                     </DiscreteObjectKeyFrame>
                   </ObjectAnimationUsingKeyFrames>
                 </Storyboard>
               </VisualState>

             </VisualStateGroup>
             <VisualStateGroup x:Name="FocusStates">
               <VisualState x:Name="Focused">
                 <Storyboard>
                   <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusBorder" Storyboard.TargetProperty="Visibility">
                     <DiscreteObjectKeyFrame KeyTime="0">
                       <DiscreteObjectKeyFrame.Value>
                         <Visibility>Visible</Visibility>
                       </DiscreteObjectKeyFrame.Value>
                     </DiscreteObjectKeyFrame>
                   </ObjectAnimationUsingKeyFrames>
                   <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="Visibility">
                     <DiscreteObjectKeyFrame KeyTime="0">
                       <DiscreteObjectKeyFrame.Value>
                         <Visibility>Collapsed</Visibility>
                       </DiscreteObjectKeyFrame.Value>
                     </DiscreteObjectKeyFrame>
                   </ObjectAnimationUsingKeyFrames>
                 </Storyboard>
               </VisualState>
               <VisualState x:Name="Unfocused" />
             </VisualStateGroup>
           </VisualStateManager.VisualStateGroups>
           <Grid.ColumnDefinitions>
             <ColumnDefinition Width="Auto" />
             <ColumnDefinition Width="*" />
           </Grid.ColumnDefinitions>
           <Grid Width="15" Height="15" HorizontalAlignment="Left" VerticalAlignment="Top">
             <Border x:Name="FocusBorder" Width="13" Height="13" Visibility="Collapsed" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{StaticResource CheckBoxOuterBorder_Focused}" Background="{StaticResource CheckBoxOuterBackground_Focused}" />
             <Border x:Name="OuterBorder" Width="13" Height="13" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" />
             <Border x:Name="IntermediateBorder" Width="11" Height="11" VerticalAlignment="Center" HorizontalAlignment="Center" BorderThickness="1" BorderBrush="{TemplateBinding Background}">
               <Border x:Name="InnerBorder" BorderThickness="1" BorderBrush="{StaticResource CheckBoxInnerBorder_Normal}" Background="{StaticResource CheckBoxInnerBackground_Normal}" />
             </Border>
             <Rectangle x:Name="CheckIcon" HorizontalAlignment="Center" VerticalAlignment="Center" Width="9" Height="9" FlowDirection="LeftToRight"  Visibility="Collapsed" Fill="Green" StrokeThickness="0"/>

           </Grid>
           <ContentPresenter x:Name="ContentItem" Grid.Column="1" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True" />
         </Grid>
       </ControlTemplate>
     </Setter.Value>
   </Setter>
 </Style>

Hope this helps!

Regards,
Vanya Pavlova
Telerik

[David]

   Hello,

    Yes this i have already tried. It resolved the problem while showing checked icon in intermediate state but its behaviour is still not changed.

I am following below steps and in step 2 behaviour is not as expected.
Step 1: I select a single checkbox from distinct values list then select all should not be checked (That working fine with the provided solution), Step 2 : After this when i select select all checkbox then it should select all checkboxes ( Its not working, In this step it clears filter options though only one checkbox was selected)

What our requirement is :

When one checkbox is selected , select all button should be unchecked only.
When select all is checked , then if all checkboxes are selected then it should uncheck all the checkboxes else it should check all checkboxes.

And in step 2 i have mentioned above the behaviour is something like , If any checbox is selected then select all uncheck all checkboxes.

Thanks 

[Rossen Hristov]

Hi,

Here is the design of the distinct values list and how it works. It is a standard three-state check box logic. This logic cannot be changed in any way, since it is governed by the underlying view model and this is a standard behavior.

1. The Select All Checkbox is a three-state check box. It has three states -- Unchecked, Intermediate and Checked.
2. When absolutely no distinct values are checked -- Select All is in its Unchecked state.
3. When one or more, but not ALL distinct values are checked -- Select All is in its Intermediate state.
4. When ALL distinct values are checked -- Select All is in its Checked stated.

This is the way the Select All checkbox works and this cannot be modified.

While you can alter the visual appearance of any one of those three states, i.e. change the color, you cannot change the Select All state determination logic -- it is the one I explained above and it is by design. It is a three-state checkbox following the rules I explained above.

I hope this helps clarify how the distinct values listbox is designed and the logic it follows.

As a developer, you are not limited to the default filtering user interface provided by RadGridView when in Popup filtering mode. After the introduction of the Custom Filtering Controls feature, you can easily craft any filtering control that you like. There you will have full freedom to implement any custom logic that you want.

I hope this helps.

Regards,

Rossen Hristov
Telerik

[David]

 hello,

 Ok thanks a lot for your support.

With Regards,