Hi,
<telerikMauiControls:RadDateTimePicker x:Name="fromDateTimePicker" HorizontalOptions="Center" VerticalOptions="Center" Margin="5,5,0,2" HeightRequest="35" WidthRequest="200"
Date="{Binding FromDate, Mode=TwoWay}"
SpinnerHeaderStyle="{StaticResource spinnerHeaderStyle}"
SpinnerStyle="{StaticResource spinnerStyle}"
SelectionHighlightStyle="{StaticResource selectionHighlightStyle}"
DisplayLabelStyle="{StaticResource displayLabelStyle}"
PlaceholderLabelStyle="{StaticResource placeholderLabelStyle}"
AreSpinnerHeadersVisible="True">
<!--<telerikMauiControls:RadDateTimePicker.DropDownSettings>
<telerikMauiControls:PickerDropDownSettings
FooterStyle="{StaticResource footerStyle}"
FooterTemplate="{StaticResource dropDowViewFooterTemplate}"
AcceptButtonStyle="{StaticResource acceptButtonStyle}"
CancelButtonStyle="{StaticResource cancelButtonStyle}" />
</telerikMauiControls:RadDateTimePicker.DropDownSettings>-->
</telerikMauiControls:RadDateTimePicker> <ControlTemplate x:Key="dropDowViewFooterTemplate">
<telerikMauiControls:RadBorder BackgroundColor="{TemplateBinding BackgroundColor}"
BorderColor="{TemplateBinding BorderColor}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">
<Grid ColumnSpacing="0"
RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<telerikMauiControls:RadButton Grid.Column="0" HorizontalOptions="Center" VerticalOptions="Center"
Text="{TemplateBinding CancelButtonText}"
Style="{TemplateBinding CancelButtonStyle}"
Command="{TemplateBinding CancelCommand}"/>
<telerik:RadBorder Grid.Column="1" WidthRequest="1" Margin="2" BorderColor="#00B5DC"/>
<telerikMauiControls:RadButton Grid.Column="2" HorizontalOptions="Center" VerticalOptions="Center"
Text="{TemplateBinding AcceptButtonText}"
Style="{TemplateBinding AcceptButtonStyle}"
Command="{TemplateBinding AcceptCommand}"/>
</Grid>
</telerikMauiControls:RadBorder>
</ControlTemplate>3 Answers, 1 is accepted
Hi Daniel,
Thank you for the provided code snippet.
From what I understand here, the issue is that the border of the FooterTemplate is not visible after upgrading from RC2 to RC3.
This comes from a change on our side where the default BorderThickness has been changed from 1 to 0, to be able to see the border of the footer you need to set the BorderThickness property to 1 in your code.
The change is as follows:
<ControlTemplate x:Key="dropDowViewFooterTemplate">
<telerik:RadBorder BorderColor="{TemplateBinding BorderColor}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">
<Grid ColumnSpacing="0"
RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<telerik:RadButton Grid.Column="0"
HorizontalOptions="Center"
VerticalOptions="Center"
Text="{TemplateBinding CancelButtonText}"
Style="{TemplateBinding CancelButtonStyle}"
Command="{TemplateBinding CancelCommand}"/>
<telerik:RadBorder Grid.Column="1" Margin="2" WidthRequest="1"
BorderColor="Black" BorderThickness="1"/>
<telerik:RadButton Grid.Column="2"
HorizontalOptions="Center"
VerticalOptions="Center"
Text="{TemplateBinding AcceptButtonText}"
Style="{TemplateBinding AcceptButtonStyle}"
Command="{TemplateBinding AcceptCommand}"/>
</Grid>
</telerik:RadBorder>
</ControlTemplate>Regards,
Antoan
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Thanks you for you answer.
Still i have bug in FooterStyle or AcceptButtonStyle or CancelButtonStyle
FooterStyle="{StaticResource footerStyle}"
FooterTemplate="{StaticResource dropDowViewFooterTemplate}"
AcceptButtonStyle="{StaticResource acceptButtonStyle}"
CancelButtonStyle="{StaticResource cancelButtonStyle}" /><!--RadDatePicker explicit start style-->
<Style TargetType="telerik:PickerDropDownContentView" x:Key="dropDownViewStyle">
<Setter Property="BackgroundColor" Value="#D8D8D8"/>
</Style>
<Style TargetType="telerik:PickerPopupFooterView" x:Key="footerStyle">
<Setter Property="BackgroundColor" Value="LightBlue"/>
</Style>
<Style TargetType="Button" x:Key="acceptButtonStyle">
<Setter Property="BackgroundColor" Value="Transparent"/>
<Setter Property="Text" Value="OK"/>
<Setter Property="TextColor" Value="#00B5DC"/>
</Style>
<Style TargetType="Button" x:Key="cancelButtonStyle">
<Setter Property="BackgroundColor" Value="Transparent"/>
<Setter Property="Text" Value="X"/>
<Setter Property="TextColor" Value="#00B5DC"/>
</Style>Hi Hanoch,
The behavior you are experiencing is not a bug, as this is how the FooterStyle property should work.
The idea of the FooterStyle property is to override the style of the default Footer, which the control provides. After setting a FooterTemplate, the default control template gets overridden and replaced with a custom one.
Essentially what the compiler is trying to do here is to change the style of the default FooterTemplate, which no longer exists in the current context as it is replaced by a custom FooterTemplate.
If you want to use a custom FooterTemplate, I suggest setting up the styles you need in the ControlTemplate of the footer.
I hope the provided information was helpful.
Regards,
Antoan
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
All I want is to that OK button will be right and cancel on left.
Could you please modify the :
"If you want to use a custom FooterTemplate, I suggest setting up the styles you need in the ControlTemplate of the footer"
Thanks in advance,
Hello Hanoch,
I apologize if I misunderstand but from the code you have provided, the buttons are as follows: The left button is Cancel and the right button is OK.
If you want them to be next to the Border you can set up the HorizontalOptions of the Cancel button to be End and Start for OK. Also I have noticed in the Styles you have provided that the TargetType of "acceptButtonStyle" and "cancelButtonStyle" is "Button". Keep in mind that the buttons in RadDateTimePicker are of Type "RadButton" and that may also be a reason for the styles not to apply.
Let me know if you need further assistance.
Regards,
Antoan
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Thanks for answer.
I attached demo is not working in my side.
(I replaced radbutton instead of button without success )
Hi Hanoch,
After careful deduction, I was able to locate where the problem lies. The issue isn't from the button styling, it is related to the Layout they are placed in. The VerticalStackLayout in which the DateTimePicker is placed has a VerticalOptions="Center". This prevents the DateTimePicker to expand as the Window size of the app is too small to contain it. In fact, if you extend the App Window you will be able to see the buttons and the FooterContent. In addition, I suggest you remove the FooterStyle if you use the FooterTemplate as it may lead to certain problems.
First, when trying to run the App I did not realize that the FooterTemplate and FooterStyle properties are set in the PickerDropDownSettings. This caused the app to crash on build.
I am attaching the application with the modifications made. I hope the changes will be of help.
Regards,
Antoan
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Thanks alot.
I removed the FooterStyle since I used the FooterTemplate .
this code work before moving to RC3.
See https://www.telerik.com/forums/custom-dropdowviewfootertemplate