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

Customisation of DataForms with labels

Hi,

Is it possible to have plain label fields in-between input controls?
The list below shows an example of the items in a form:

  • descriptive label 1
  • descriptive label 2
  • input 1
  • input 2
  • input 3
  • input 4
  • descriptive label 3
  • input 5
  • input 6
  • etc...
My workaround at the moment is putting the text in a Entry control, hiding the label and then making the entry control read only, however, the tabbing/keyboard return sequence stops.  Also, as it's an entry control the visuals look the same but I want to make it different so the users can tell it's supposed to be a label and not an entry.

I've also noticed that for the latest versions the following does not take effect for IOS:
  • Entry.TextColor for disabled controls
  • DataFormItem.FocusColor
  • DataFormItem.TextInputLayoutSettings

Thanks.

4 Replies

AK Ajith Kumar Senthil Kumar Syncfusion Team October 4, 2019 01:28 PM UTC

Hi Hoang, 
 
Thank you for contacting Syncfusion support. 
 
Currently, we are analyzing your requirement “Inserting Labels between editors in SfDataForm” in Xamarin.Forms. We will validate and update you the further details in two business days. We appreciate your patience until then. 
 
Regards,
Ajith
 



AK Ajith Kumar Senthil Kumar Syncfusion Team October 7, 2019 10:37 AM UTC

Hi Hoang, 
 
Thank you for using Syncfusion products. 
 
Query 1: 
Based on the provided information, your requirement of “Inserting Only Labels between editors in SfDataForm” in Xamarin.Forms can be achieved using Default layout settings. 
 
You can achieve your requirement by using GetEditorWidth override method in DataFormLayoutManager by returning editor width Zero width to the particular data field.  
 
Please refer the following code example for the same, 
 
[C#] 
public class DataFormLayoutManagerExt : DataFormLayoutManager 
    { 
        public DataFormLayoutManagerExt(SfDataForm dataForm) : base(dataForm) 
        { 
 
        } 
        protected override double GetEditorWidth(DataFormItem dataFormItem, double availableWidth) 
        { 
            if (dataFormItem.Name.Equals("LastName")) 
            { 
                return 0; 
            } 
            else 
            { 
                return base.GetEditorWidth(dataFormItem, availableWidth); 
            } 
        } 
    } 
 
Or, you can achieve your requirement by customizing the IsVisible property of editor view in default layout to the data field. Please find the below link for details. 
 
We have prepared sample based on your requirement with Floating label layout and stack layout (Default) 
 
 
You can also refer our online user guide documentation to set Layout option to a DataFormItem by the following link, 
 
 
Query 2: 
Issue:” FocusColor and TextInputSettings” properties in DataFormItem not effective. 
 
We suspect that you are using the Default Layout in your sample. FocusColor and TextInputLayoutSettings properties in DataFormItem are applicable for Floating label layout and to enable them to set the LayoutOptions as TextInputLayout. 
 
 
Query 3: 
 
Issue: “Text color is not working in Entry in disabled state 
 
We have already logged an issue report for the same with Xamarin in this link 7119, since the work around is not applicable as of DataForm implementation.Your requirement can be achieved using custom DataForm editor. In custom editor’s OnUpdateReadOnly override method, directly map DataFormItem ReadOnly property to view IsReadonly property.  
 
Code snippet: 
 
[C#] 
public class DataFormTextEditorExt : DataFormTextEditor  
{  
        public DataFormTextEditorExt(SfDataForm dataForm) : base(dataForm)  
        {  
        }  
   
        protected override void OnUpdateReadOnly(DataFormItem dataFormItem, Entry view)  
        {  
            view.IsReadOnly = dataFormItem.IsReadOnly;  
        }  
}  
   
dataForm.RegisterEditor("Text"new DataFormTextEditorExt(dataForm)); 
 
 
We hope this helps. Please let us know, if need any further assistance. 
 
Regards,
Ajith 
 



HO Hoang December 31, 2019 08:17 AM UTC

Hi,

Sorry for the late reply, I've been on other things and now i'm back.
Running the provided project, I don't think it works correctly as the editor and underline can still be seen.

When the label text is long, it wraps and does not go full width.



I've been experimenting with the DataFormItemManager using the code from here:

I've tried registering custom editors from the above code, but it seems that it always defaults to "Entry" and doesn't pick up any custom editors defined in the dataform.


Cheers and thanks.


KA Karthikraja Arumugam Syncfusion Team January 2, 2020 09:28 AM UTC

Hi Hoang, 
 
Sorry for the inconvenience caused. 
 
Query 1: Inserting only label without editor in DataForm 
We have checked your requirement and it can be achieved by customizing DataFormLayourManager class and using DataFormCheckBoxItem. In custom DataFormLayoutManager class, override OnEditorCreated method and set editor’s IsVisible property to false for the required field to hide editor view, this will hide editor view but there will be empty space for the editor, to hide empty spaces set DataFormItem Height property to 1 and LabelPosition as Top.  
 
Please refer the following code example for the same, 
 
[C#] 
 
//Initialize data field as checkbox item and provide values for Height and LabelPosition properties. 
if (key == "Details") 
        dataFormItem = new DataFormCheckBoxItem() { Name = key, Editor = "Bool", Height = 1, LabelPosition = LabelPosition.Top }; 
 
//Customizing DataFormLayoutManager class 
public class DataFormLayoutManagerExt : DataFormLayoutManager 
    { 
        public DataFormLayoutManagerExt(SfDataForm dataForm) : base(dataForm) 
        { 
        } 
 
        protected override void OnEditorCreated(DataFormItem dataFormItem, View editor) 
        { 
            base.OnEditorCreated(dataFormItem, editor); 
 
            // Set editor IsVisible property to false to hide editor view. 
            if(dataFormItem.Name == "Details") 
            { 
                editor.IsVisible = false; 
            } 
        } 
    } 
 
//Assign custom layout manager class to dataform layout manager. 
dataForm.LayoutManager = new DataFormLayoutManagerExt(dataForm); 
 
 
Note: In iOS platform, we have placed border for text editors below the editor view so to achieve your requirement we suggested to use DataForm’s CheckBox, Switch editors or custom image editor, these editors don’t have borderline. 
 
Please refer our UG documentation to know more about customizing DataFormLayoutManager class, 
 
Query 2: When label text is long, it wraps 
If you set LabelPosition to Top the label will be placed for entire width and text will not wrap. 
 
Please refer our UG documentation to know more about LabelPosition in DataForm, 
 
We have prepared a sample including solutions for the above two queries, 
Sample link: DataForm 
 
Query 3: Customizing inbuild editors of DataForm 
If you customize DataFormTextEditor, the entry field will be created. To have other DataForm editors, customize respective DataFormEditor class such as DataFormNumericEditor, DataFormSwitchEditor and DataFormDateEditor. 
 
Please refer the following code example for the same, 
 
[C#] 
    public class DataFormNumericEditorExt : DataFormNumericEditor 
    { 
          public DataFormNumericEditorExt(SfDataForm dataForm) : base(dataForm) 
          { 
          } 
    } 
 
    public class DataFormMultilineEditorExt : DataFormMaskedEditTextEditor 
    { 
          public DataFormMultilineEditorExt(SfDataForm dataForm) : base(dataForm) 
          { 
          } 
    } 
 
 
Please refer our UG documentation to know more about customizing DataForm inbuild editors, 
 
We hope this helps. Please let us know if you would require any further assistance. 
 
Regards, 
Karthik Raja A 


Loader.
Live Chat Icon For mobile
Up arrow icon