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
close icon

Why to double click to edit a textbox in textboxcolumn ?

Simpler to the problem of double clicking a combobox in a column to open.

we are experiencing the problem with editing a textbox appearing in a column. so to be more precise, textbox in TextBoxColumn is not editable until you double click it.

Expected Behavior

Step1: If I click on a cell with a textbox in SfDataGrid. It should be possible to edit the cell only on 1st click.

Could you help on that ??

14 Replies

DB Dinesh Babu Yadav Syncfusion Team June 4, 2019 11:46 AM UTC

Hi Qasim, 
Thank you for contacting Syncfusion Support. 
We analyzed your query about entering the edit mode for a cell with TextBox in first click. This can be achieved by setting SfDataGrid.EditTrigger to OnTap. For more details on editing, please refer to the UG link below.  
UG Link: 
Also, if you are using TemplateColumn, your first-click editing requirement can be achieved by setting FocusManageHelper.FocusedElement as true for the element loaded for edit mode. Please refer to the following KB article and UG links to learn more about editing in the template column 
KB Article: 
UG Link: 
Please let us know, if you need any further assistance on this. 
Dinesh Babu Yadav.

QR Qasim Raza June 4, 2019 12:00 PM UTC

Hi Dinesh,

Did you get chance to look into the shared code. Looks like we are moving in circles.

we were asked to shared the code to give you a more clear understanding of the problem, we are facing.

Could you please tell where in the shared code we are making a mistake as we followed already what you are suggesting.

SP Shobika Palani Syncfusion Team June 4, 2019 12:58 PM UTC

Hi Qasim,  
Thank you for the update. 
We have not received your shared code as stated in forum #144931. And with the suggestions given in our previous updates, we are unable to reproduce from our end the reported issue (for both ComboBox and TextBox). 
Could you share your code here otherwise, please modify and share the sample provided by us in our previous update (# 144931) to replicate your scenario? It will help us to investigate further and provide earlier prompt solution. 

QR Qasim Raza June 4, 2019 01:10 PM UTC

I have shared the sample code at this location.


support@syncfusion.com has already been given access.

Douglas at syncfusion has already confirmed this email address.  

check the link and let me know that whether you can access the code or not.

AK Adhikesevan Kothandaraman Syncfusion Team June 5, 2019 09:18 AM UTC

Hi Qasim, 

Thanks for your update. 

If you want to enter to the textbox on the first click, you can use the template column and set the FocusedElement as true. Refer to the following code snippet, 

Code Snippet: 
    <sf:GridTemplateColumn MappingName="Name" > 
                <TextBox sf:FocusManagerHelper.FocusedElement="True" 
                    Text="{Binding Name}" /> 

TP Troels Pedersen June 6, 2019 12:04 PM UTC

I'm a colleague of Qasim's, and I will try to elaborate a bit.

The application we are building is quite large, and we have approximately 100 different screens with data grids on them, which is why it is extremely important that we can keep it as simple as possible to set up a data grid. This is why we have created 20+ custom columns, and why we cannot have cell and edit templates defined for every column of every data grid.

We could probably base our custom columns on  GridTemplateColumn and have them define the templates internally, but we are not big fans of this solution.

In the attached example, which is very similar to what Qasim sent you, we are trying to show that it is the custom cell renderer that must be missing something. The Syncfusion columns don't all inherit GridTemplateColumn and the cell renederers don't inherit GridCellTemplateRenderer, so it must be possible to create a custom column and a custom cell renderer and have the edit element available for interactions after the first mouse click on the cell.

Hope this makes things clearer.

Troels Pedersen

Attachment: SfCustomColumn_758518db.rar

QR Qasim Raza June 7, 2019 07:51 AM UTC

Anyone there at support to answer the question.

QR Qasim Raza June 7, 2019 11:34 AM UTC

Any one at support to respond on this ? Really Annoyed now :(

AK Adhikesevan Kothandaraman Syncfusion Team June 7, 2019 12:52 PM UTC

Hi Qasim, 

Thanks for your patience. 

We have analyzed your reported query at our end. If you want to set the focus on the custom cell renderer element, you can use the OnEditElementLoaded method and set the focus to the control. 
Refer to the following code snippet and sample for your reference, 

Code Snippet: 
public class TestTextRenderer : GridVirtualizingCellRenderer<TextBlock, TestTextBox> 
    protected override void OnEditElementLoaded(object sender, System.Windows.RoutedEventArgs e) 
        var uiElement = (TestTextBox)sender; 
        //Set the focus to the edit element. 
    public override void OnInitializeEditElement(DataColumnBase dataColumn, TestTextBox uiElement, object dataContext) 
        base.OnInitializeEditElement(dataColumn, uiElement, dataContext); 
        uiElement.SetBinding(TextBox.TextProperty, dataColumn.GridColumn.ValueBinding); 
        // Here we set other things like background (input required, read only and more) and clear button visibility 


QR Qasim Raza June 7, 2019 01:15 PM UTC

Does the similar works for CheckboxColumn?  Where only OnInitializeDisplayElement is available?

JP Jagadeesan Pichaimuthu Syncfusion Team June 10, 2019 11:05 AM UTC

Hi Qasim, 
We have analyzed your query related to GridCheckBoxColumn. And your requirement to enable checkbox in first click by overriding OnCreateEditElement for custom renderer derived from GridCellCheckBoxRenderer. 
Please refer to the below code snippet,  
public class TestCheckBoxRenderer : GridCellCheckBoxRenderer 
        protected override CheckBox OnCreateEditUIElement() 
            return new TestCheckBox(); 
public class TestCheckBox : CheckBox 
Also please find sample for the same in the link below, 
Please let us know, if the above solution does not meet your requirement. 

QR Qasim Raza June 11, 2019 07:13 AM UTC


I do not find any reference for GridCellCheckBoxRenderer in the sample provided, nor in the SyncFusion namespace ?

plus are we not suppose to inherit from GridVirtualizingCellRenderer ??

for example.
public class TestCheckBoxRenderer : GridVirtualizingCellRenderer

can you reply at your earliest?

As per ´SyncFusion documentation ???

QR Qasim Raza June 11, 2019 12:47 PM UTC

Any Update on this? 

JP Jagadeesan Pichaimuthu Syncfusion Team June 12, 2019 10:27 AM UTC

Hi Qasim, 
Sorry for the delay. 
You can find GridCellCheckBoxRenderer in Syncfusion.UI.Xaml.Grid.Cells namespace. And also you can write Custom cell renderer by inheriting from GridVirtualizingCellRenderer. In this case, you need to set SupportsRendererOptimzation as false as like below code snippet 
DataGrid.CellRenderers.Add("CheckBox"new TestCheckBoxRenderer()); 
public class TestCheckBoxRenderer : GridVirtualizingCellRenderer<TestCheckBox, TestCheckBox> 
        public TestCheckBoxRenderer() 
            SupportsRenderOptimization = false; 
            IsEditable = false; 
        public override void OnInitializeEditElement(DataColumnBase dataColumn, TestCheckBox uiElement, object dataContext) 
            base.OnInitializeEditElement(dataColumn, uiElement, dataContext); 
            var column = dataColumn.GridColumn; 
            uiElement.FocusVisualStyle = null; 
            uiElement.SetValue(FrameworkElement.VerticalAlignmentProperty, column.VerticalAlignment); 
            var checkBoxColumn = column as GridCheckBoxColumn; 
            if (checkBoxColumn == null) 
            uiElement.SetValue(FrameworkElement.HorizontalAlignmentProperty, checkBoxColumn.HorizontalAlignment); 
        public override void OnUpdateEditBinding(DataColumnBase dataColumn, TestCheckBox element, object dataContext) 
            OnInitializeEditElement(dataColumn, element, dataContext); 
Please find sample for the same from the below link. 
Please let us know, if you need further assistance on this. 

Live Chat Icon For mobile
Up arrow icon