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

how to style grid elements in editable mode

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

4 Replies

SP Subburaj Pandian Veluchamy Syncfusion Team 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   



SK Shivagurunathan Kamalakannan Syncfusion Team 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. 



DM David Marek replied to Shivagurunathan Kamalakannan 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


SP Subburaj Pandian Veluchamy Syncfusion Team 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 
 


Loader.
Live Chat Icon For mobile
Up arrow icon