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

The appearance of DataFormGroupItem , generated by SfDataform is so ugly. How can we change this.


The generated DataFormGroupItem is ugly

As per your documentation, we can change the GroupName and AllowExpandCollapse.

How can we change other attributes like margin, padding, border, color, background color? Like the sample in your demo app

2 Replies

KA Karthikraja Arumugam Syncfusion Team September 13, 2019 12:37 PM UTC

Hi Tung, 
Thank you for contacting Syncfusion support. 
Currently, we are validating your requirement of “Customizing DataFormGroupItem header while custom DataFormGroupItem generated in XAML page”. We will check and update you further details on or before September 17, 2019. We appreciate your patience until then. 
Karthik Raja A 

KA Karthikraja Arumugam Syncfusion Team September 17, 2019 10:13 AM UTC

Hi Tung, 
Thank you for your patience. 
We have checked your requirement of “Customizing GroupHeader view in DataForm”. DataForm supports to customize GroupHeaer by using custom DataFormLayoutManager class, in which override GenerateViewForGroupHeader method to provide a new view or customize the existing view and GetLeftPaddingForGroupHeader method to provide left padding value for group header view. 
Please refer the following code example for the same, 
dataForm.LayoutManager = new DataFormLayoutManagerExt(dataForm); 
public class DataFormLayoutManagerExt : DataFormLayoutManager 
        public DataFormLayoutManagerExt(SfDataForm dataForm) : base(dataForm) 
        protected override View GenerateViewForGroupHeader(DataFormGroupItem dataFormGroupItem) 
            var groupHeader = base.GenerateViewForGroupHeader(dataFormGroupItem); 
            groupHeader.BackgroundColor = Color.Aqua; 
            return groupHeader; 
        protected override int GetLeftPaddingForGroupHeader(DataFormGroupItem dataFormGroupItem) 
            return 10; 
We have prepared a sample based on your requirement, please find the sample by the following link. 

Sample link: DataFormGroupHeader 
In the sample, as per your requirement we have changed the group header background and left padding value. 
You can also refer our online user guide documentation regarding custom DataFormLayoutManager class by the following link, 
We hope this helps. Please let us know if need any further assistance. 
Karthik Raja A 

Live Chat Icon For mobile
Up arrow icon