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

Customize GirdMaskColumn

I have a SfDataGrid with a GridMaskColumn that looks like this:

<syncfusion:SfDataGrid x:Name="dgHome"
                                AllowEditing="True"
                                AllowFiltering="False"
                                AutoGenerateColumns="False"
                                EditorSelectionBehavior="SelectAll"
                                EditTrigger="OnTap"
                                ItemsSource="{Binding HomeDetails}"
                                LiveDataUpdateMode="AllowDataShaping"
                                ColumnSizer="Star"
                                NavigationMode="Cell"
                                Margin="0,0,0,400">
            <syncfusion:SfDataGrid.Columns>
                <syncfusion:GridTextColumn  MappingName="ID" AllowEditing="False" ColumnSizer="Auto" />
                <syncfusion:GridTextColumn HeaderText="Firstname" MappingName="FName" AllowEditing="False" />
                <syncfusion:GridTextColumn MappingName="Name" AllowEditing="False" />
                <syncfusion:GridMaskColumn Mask="00:00" MaskFormat="IncludePromptAndLiterals" PromptChar="0" MappingName="Time" ColumnSizer="Auto" TextAlignment="Center" />
                <syncfusion:GridMaskColumn Mask="00:00" MaskFormat="IncludePromptAndLiterals" PromptChar="0" MappingName="Score" ColumnSizer="Auto" TextAlignment="Center" />
            </syncfusion:SfDataGrid.Columns>
        </syncfusion:SfDataGrid>

In the first column must stands a time like 12:45 (12 Minutes and 45 Seconds) or 75:59 (75 Minutes and 45 Seconds). The problem is that the seconds can be larger than 59 which of course can not be. Is there a possibility to limit the second number to a maximum of 59?
The second column stands for a score like 15:18 or 05:09 etc. Here it would be nice, if I write for example only a 5, with the arrow keys can continue so I land directly behind the double point.
At the end I would still have the question whether it is possible to lock certain cells in certain rows? For example, row 5 has the bool locked in the background, so the column score should be locked for this row.

5 Replies

GT Gnanasownthari Thirugnanam Syncfusion Team August 16, 2017 06:29 PM UTC

Hi Dennis, 
 
We have analyzed your requirement, please find the below responses. 

Query 1 : Is there a possibility to limit the second number to a maximum of 59? 
We have analyzed your query, we are suspect whether your are restrict the value above 59 or while exceed the second value above 59, added 1 to first vale.  
You can add the one value if second value exceeded above 59  by using converter in Valuebinding as like below code. 

<syncfusion:GridMaskColumn Mask="00:00"  MaskFormat="IncludePromptAndLiterals"  PromptChar="0" MappingName="Time" ColumnSizer="Auto" TextAlignment="Center" ValueBinding="{Binding Time,Converter={StaticResource convert}}" /> 
 
Query 2: if I write for example only a 5, with the arrow keys can continue so I land directly behind the double point. 
We couldn’t get your requirement clearly, we are suspect whether you are type the one digit value and hit the right or left arrow key curser position moves beyond that colon. Please share more details about your requirement.  
Query 3: whether it is possible to lock certain cells in certain rows? 
You can cancel the editing for certain cell by using CurrentCellBeginEdit event. 
Please refer the below UG link 


We have prepared the sample based on your requirements, you can download the same from below mentioned location. 

Sample location: 
 
If your requirements is different from above please revert to us with modified sample and please share more details about your requirement that will be helpful to analyze further on this. 
 
Regards, 
Gnanasownthari T. 



DT Dennis Theel August 23, 2017 02:53 PM UTC

Hi Gnanasownthari,

thank you for your answer. Regarding my second Question: In the score column i have the mask "00:00". If I now enter a 5 for example and then press the arrow key to the right, I would like to land behind the double point.


Best Regards



GT Gnanasownthari Thirugnanam Syncfusion Team August 24, 2017 01:05 PM UTC

Hi Dennis, 
 
We have analyzed your requirement “press the arrow key to the right, I would like to land behind the double point.” In GridMaskColumn we can able to give any kind of formats. So we are not able to predicts which format you have applied for that reason we are not able to achieve your requirement in our GridMaskColumn.  
 
Regards, 
Gnanasownthari T. 




DT Dennis Theel August 25, 2017 07:51 AM UTC

Hi Gnanasownthari,

the converter from my first question works very well. But is there perhaps a possibility to apply this with the CurrentCellValueChanged or PreviewTextInput and not only when I leave the cell?



GT Gnanasownthari Thirugnanam Syncfusion Team August 29, 2017 01:36 PM UTC

Hi Dennis, 

We have checked your query, you can achieve your requirement in CurrentCellValueChanged event as like below code example. 
 
this.dataGrid.CurrentCellValueChanged += DataGrid_CurrentCellValueChanged;             
private void DataGrid_CurrentCellValueChanged(object sender, CurrentCellValueChangedEventArgs e) 
{ 
    //You can do your own logic here. 
    var text = this.dataGrid.SelectionController.CurrentCellManager.CurrentCell.Renderer.GetControlValue(); 
    if (e.Column.MappingName == "Time") 
    { 
        string[] splitedString = text.ToString().Split(':'); 
        string first = splitedString[0]; 
        int firstInt = Int32.Parse(first); 
        string second = splitedString[1]; 
        int secondInt = Int32.Parse(second); 
        if (secondInt >= 60) 
        { 
            firstInt = firstInt + 1; 
            secondInt = 00; 
            if (firstInt <= 9) 
                text = "0" + firstInt.ToString() + ":" + secondInt.ToString(); 
            else 
                text = firstInt.ToString() + ":" + secondInt.ToString(); 
            this.Dispatcher.BeginInvoke(new Action(() => 
            { 
                this.dataGrid.SelectionController.CurrentCellManager.CurrentCell.Renderer.SetControlValue(text); 
            }), DispatcherPriority.ApplicationIdle); 
        } 
    } 
} 
 
We have ensured, the new value is reflected before leaving that cell. 

We have modified the sample as per your requirement, you can download the same from below mentioned location. 
 
Sample location: 

Regards, 
Gnanasownthari T. 
 


Loader.
Live Chat Icon For mobile
Up arrow icon