Forums Home / ComponentOne / WPF Edition
Posted by: firelex on 18 October 2021, 6:57 am EST
firelex
Posted 18 October 2021, 6:57 am EST
Hello all,
I have C1DataGrid with DataGridDateTimeColumn.
EditMode of the column is set to DataGridDateTimeColumnEditMode.Time.
When I type a time value in the cell (say 0900) no colon is inserted, and value “0900” is rejected.
How can I get colon automatically inserted after “09” has been typed in, so on continue typing there is “09:00” in the cell?
nitin.sharma
Posted 19 October 2021, 5:41 am EST
Hello,
In order to achieve your requirement, you need to handle BeganEdit event of C1DataGrid. You can find the C1TimeEditor from C1DateTimePicker’s Template and after that you can set Mask and CustomFormat on it as : (see code snippet)
private void Began_Edit(object sender, C1.WPF.DataGrid.DataGridBeganEditEventArgs e)
{
if(e.EditingElement is C1DateTimePicker)
{
var editor = e.EditingElement as C1DateTimePicker;
editor.Loaded += Editor_Loaded;
}
}
private void Editor_Loaded(object sender, RoutedEventArgs e)
{
var dtPicker =sender as C1DateTimePicker;
var timeEditor =dtPicker.Template.FindName("TimeEditor",dtPicker) as C1TimeEditor;
var txtBox =timeEditor.Template.FindName("TextBox",timeEditor) as C1MaskedTextBox;
txtBox.ReplaceMode = true;
timeEditor.CustomFormat = "hh:mm";
timeEditor.Mask = "00:00";
}
Please refer the attached sample for the same : DataGridDateTimeColumn.zip
Regards,
Nitin
firelex
Posted 19 October 2021, 10:11 am EST
Thanks, Nitin! It works like a charm!
I have two more little issues though:
I’m using 24H-Format. I can type in time values greater than 12:00 and they are shown correctly. But while editing they are converted to 12H-Format.
I have hid increment buttons in the timeEditor using “ShowButtons”-Property.
Thus column is still getting wider when starting edit mode.
How could I fix that?
nitin.sharma
Posted 20 October 2021, 2:30 am EST
Hi,
If you are using 24H-Format, then I will suggests you to set CustomFormat=“HH:mm” in both timeEditor and DataGridDateTimeColumn.
I’m not sure about your requirement. If you are asking, while editing the timeEditor doesn’t take full space of column. Then you can set timeEditor’s width according to column’s ActualWidth.
Please refer the attached modified sample for the same : DataGridDateTimeColumn_Mod.zip
Best Regards,
Nitin
firelex
Posted 20 October 2021, 6:08 am EST
Thanks, Nitin!
The first tip worked perfectly. The second one unfortunately didn’t.
Please change definition of the second column in MainWindow.xaml in your example as follows:
<c1:DataGridDateTimeColumn Binding="{Binding Delivered}" Header="Time" EditMode="Time" CustomTimeFormat="HH:mm" Width="Auto" />
Now if you mark one of the cells in this column and press “F2” to start editing, you will see what I mean: column width is increased by the width of scroll buttons which are invisible. I would like to keep column width constant.
nitin.sharma
Posted 20 October 2021, 8:03 am EST - Updated 4 October 2022, 8:37 am EST
Hi,
We have set Width=“Auto” to the DataGridDateTimeColumn but we didn’t replicate this behavior at our end i.e., Column’s Width is constant.
Please refer the attached gif for the same : 
Refer Modified Sample : DataGridDateTimeColumn_Mod2.zip
Regards,
Nitin
firelex
Posted 21 October 2021, 4:05 am EST
Hello Nitin,
You have set Width=“Auto”, but left Header=“Delivery Time”. Please change Header to “Time” and you will see what I mean.
Regards,
firelex
nitin.sharma
Posted 21 October 2021, 5:13 am EST
Hi,
I’ve got your point. Actually, this is the design behavior of Auto Width column, if cell content size increase, then column width will also increases. At the time of editing the cell content size is increasing that’s why Width of column is increasing as well.
However, you can do a workaround. You need to keep column width at the time of editing start and then you can set same width again when Editor load.
private void Began_Edit(object sender, C1.WPF.DataGrid.DataGridBeganEditEventArgs e)
{
if(e.EditingElement is C1DateTimePicker)
{
var editor = e.EditingElement as C1DateTimePicker;
var width = e.Column.ActualWidth;
editor.Loaded += new RoutedEventHandler((s, e2) => Editor_Loaded(s, e2, e.Column.Index,width));
}
}
private void Editor_Loaded(object sender, RoutedEventArgs e,int index,double width)
{
var dtPicker =sender as C1DateTimePicker;
var timeEditor =dtPicker.Template.FindName("TimeEditor",dtPicker) as C1TimeEditor;
var txtBox =timeEditor.Template.FindName("TextBox",timeEditor) as C1MaskedTextBox;
txtBox.ReplaceMode = true;
timeEditor.CustomFormat = "HH:mm";
timeEditor.Mask = "00:00";
timeEditor.ShowButtons = false;
grid.Columns[index].Width = new C1.WPF.DataGrid.DataGridLength(width);
}
*Note:- Auto value will be lost from Column Width property.
Please refer the attached modified sample for the same : DataGridDateTimeColumn_Mod3.zip
Regards,
Nitin
firelex
Posted 22 October 2021, 8:26 am EST
Thanks Nitin, it worked for me.
Regards,
firelex
