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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

how to style grid elements in editable mode

Thread ID:

Created:

Updated:

Platform:

Replies:

143780 Apr 4,2019 04:07 PM UTC Apr 22,2019 06:48 AM UTC Xamarin.Forms 4
loading
Tags: SfDataGrid
David Marek
Asked On April 4, 2019 04:07 PM UTC

Hello

we use Xamarin.Forms SfDataGrid and main target of the app is UWP desktop. Now we try to style the grid rows because default size 50 is bigger then we want to have. We set up the DataGrid RowHeight to 30 and every row is shown correctly. When the edit mode of TextColumn is invoked, entry is shown correctly, but when edit mode is invoked on NumberColumn or PickerColumn, entry or combo text inside is not fully visible due to bigger padding of element. Attached you can find 3 printscreens with TextColumn edit entry, NumberColumn edit entry and PickerColumn edit entry.

So could you help me with styling of editable objects? Thank you so much.

David

Attachment: Archiv_f620847e.zip

Subburaj Pandian Veluchamy [Syncfusion]
Replied On April 5, 2019 01:19 PM UTC

Hi David, 
 
Thank you for contacting Syncfusion support. 
 
We have checked and we can able to replicate the mentioned issue “DataGrid Columns elements not fully rendered in edit mode, if Grid row height reduced” in Xamarin.Forms (UWP). Currently, we are validating this issue, we will update you the details in two business days (April 9, 2019). We appreciate your patience until then. 
 
Regards,
Subburaj Pandian V   


Shivagurunathan Kamalakannan [Syncfusion]
Replied On April 9, 2019 01:48 PM UTC

Hi David, 
 
The issue  “DataGrid Columns elements not fully rendered in edit mode, if Grid row height reduced” can be solved at the sample level itself. Your requirement can be achieved by having a cell render class and customizing the margin while editing. 
 
 
public MainPage() 
{ 
    InitializeComponent(); 
 
    dataGrid.CellRenderers.Remove("Numeric"); 
    dataGrid.CellRenderers.Add("Numeric", new GridCellNumericRendererExt()); 
 
    dataGrid.CellRenderers.Remove("TextView"); 
    dataGrid.CellRenderers.Add("TextView", new GridCellTextViewRendererExt()); 
 
    dataGrid.CellRenderers.Remove("Picker"); 
    dataGrid.CellRenderers.Add("Picker", new GridCellPickerRendererExt()); 
} 
 
public class GridCellNumericRendererExt : GridCellNumericRenderer 
{ 
    public override void OnInitializeEditView(DataColumnBase dataColumn, SfNumericTextBoxExt view) 
    { 
        base.OnInitializeEditView(dataColumn, view); 
 
        //// Customize the margin for GridNumericColumn based on the requirement. 
        view.Margin = new Thickness(0, -5, 0, -5); 
    } 
} 
 
public class GridCellTextViewRendererExt : GridCellTextViewRenderer 
{ 
    public override void OnInitializeEditView(DataColumnBase dataColumn, SfEntry view) 
    { 
        base.OnInitializeEditView(dataColumn, view); 
        //// Customize the margin for GridTextColumn based on the requirement. 
        view.Margin = new Thickness(0, -5, 0, -5); 
    } 
 
} 
 
public class GridCellPickerRendererExt : GridCellPickerRenderer 
{ 
    public override void OnInitializeEditView(DataColumnBase dataColumn, GridPicker view) 
    { 
        base.OnInitializeEditView(dataColumn, view); 
        //// Customize the margin for GridPickerColumn based on the requirement. 
        view.Margin = new Thickness(0, -5, 0, -5); 
    } 
 
} 
 
 
 
You can download the sample for reference. 
 
Regards, 
Shivagurunathan. 


David Marek
Replied On April 20, 2019 09:45 AM UTC

Hi David, 
 
The issue  “DataGrid Columns elements not fully rendered in edit mode, if Grid row height reduced” can be solved at the sample level itself. Your requirement can be achieved by having a cell render class and customizing the margin while editing. 
 
 
public MainPage() 
{ 
    InitializeComponent(); 
 
    dataGrid.CellRenderers.Remove("Numeric"); 
    dataGrid.CellRenderers.Add("Numeric", new GridCellNumericRendererExt()); 
 
    dataGrid.CellRenderers.Remove("TextView"); 
    dataGrid.CellRenderers.Add("TextView", new GridCellTextViewRendererExt()); 
 
    dataGrid.CellRenderers.Remove("Picker"); 
    dataGrid.CellRenderers.Add("Picker", new GridCellPickerRendererExt()); 
} 
 
public class GridCellNumericRendererExt : GridCellNumericRenderer 
{ 
    public override void OnInitializeEditView(DataColumnBase dataColumn, SfNumericTextBoxExt view) 
    { 
        base.OnInitializeEditView(dataColumn, view); 
 
        //// Customize the margin for GridNumericColumn based on the requirement. 
        view.Margin = new Thickness(0, -5, 0, -5); 
    } 
} 
 
public class GridCellTextViewRendererExt : GridCellTextViewRenderer 
{ 
    public override void OnInitializeEditView(DataColumnBase dataColumn, SfEntry view) 
    { 
        base.OnInitializeEditView(dataColumn, view); 
        //// Customize the margin for GridTextColumn based on the requirement. 
        view.Margin = new Thickness(0, -5, 0, -5); 
    } 
 
} 
 
public class GridCellPickerRendererExt : GridCellPickerRenderer 
{ 
    public override void OnInitializeEditView(DataColumnBase dataColumn, GridPicker view) 
    { 
        base.OnInitializeEditView(dataColumn, view); 
        //// Customize the margin for GridPickerColumn based on the requirement. 
        view.Margin = new Thickness(0, -5, 0, -5); 
    } 
 
} 
 
 
 
You can download the sample for reference. 
 
Regards, 
Shivagurunathan. 


Hello Shivagurunathan

thank you a lot, works great.

Regards
David

Subburaj Pandian Veluchamy [Syncfusion]
Replied On April 22, 2019 06:48 AM UTC

Hi David, 
 
Thank you for the update. We glad to know that the given solution meets your requirement.  
 
Please get in touch with us if you would require any further assistance in future.  
 
Regards,
Subburaj Pandian V 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon