RadDataForm MultilineText styling

proui

#1

Hi Everyone,

Has anyone tried styling the MultilineText editor in RadDataForm? was able to have some limited success in styling the editor with setting the padding. borders. But how do I set the height properly?

Here’s my styling code.
apply(df) {
let entityProperty : EntityProperty =
(df.object).getPropertyByName(df.propertyName);

    entityProperty.editor.propertyEditorStyle.labelPosition = DataFormLabelPosition.Top;
    let editor = entityProperty.editor.ios;
    let editorOffsets = new UIEdgeInsets({ top: 10, left: 20, bottom: 10, right: 20 });
    editor.style.insets = editorOffsets;

    switch (entityProperty.editor.type) {

        case "MultilineText": 

            let uiTextView = <UITextView>df.editor.editor;
            let uiTextViewOffsets = new UIEdgeInsets({ top: 10, left: 10, bottom: 10, right: 10 });
            uiTextView.textContainerInset = uiTextViewOffsets;

            uiTextView.font = UIFont.fontWithNameSize(uiTextView.font.fontName, 18);

           //Doesn't work
            let fixedWidth = uiTextView.frame.size.width;

            let newFrame = uiTextView.frame;
            newFrame.size = CGSizeMake(fixedWidth, 100);
            uiTextView.frame = newFrame;

            let newBounds = uiTextView.bounds;
            newBounds.size = CGSizeMake(fixedWidth, 100);
            uiTextView.bounds = newBounds;
            uiTextView.sizeToFit();

            let uiTextViewLayer = editor.editorValueLabel? editor.editorValueLabel.layer : editor.editor.layer;                
            uiTextViewLayer.borderColor = new Color('#F27296').ios.CGColor;
            uiTextViewLayer.borderWidth = 1;
            uiTextViewLayer.cornerRadius = 5;

        break;            
    }
}

Here’s my HTML.

            <RadDataForm #form [source]="history" commitMode="Manual" (editorSetup)="styleEditor($event)">
                <TKEntityProperty tkDataFormProperty name="existingMedicalCondition" [displayName]="'profile.existingConditions.text'|L" index="1">
                    <TKPropertyEditor tkEntityPropertyEditor type="MultilineText">
                            <TKPropertyEditorStyle tkPropertyEditorStyle></TKPropertyEditorStyle>                        
                    </TKPropertyEditor>
                </TKEntityProperty>
                <TKEntityProperty tkDataFormProperty name="pastMedicalTreatmentHistory" [displayName]="'profile.pastHistory.text'|L" index="1">
                    <TKPropertyEditor tkEntityPropertyEditor type="MultilineText">
                            <TKPropertyEditorStyle tkPropertyEditorStyle></TKPropertyEditorStyle>                        
                    </TKPropertyEditor>
                </TKEntityProperty>
                <TKEntityProperty tkDataFormProperty name="familyMedicalHistory" [displayName]="'profile.familyHistory.text'|L" index="1">
                    <TKPropertyEditor tkEntityPropertyEditor type="MultilineText">
                            <TKPropertyEditorStyle tkPropertyEditorStyle></TKPropertyEditorStyle>                        
                    </TKPropertyEditor>
                </TKEntityProperty>
                <TKEntityProperty tkDataFormProperty name="currentMedications" [displayName]="'profile.currentMeds.text'|L" index="1">
                    <TKPropertyEditor tkEntityPropertyEditor type="MultilineText">
                            <TKPropertyEditorStyle tkPropertyEditorStyle></TKPropertyEditorStyle>                        
                    </TKPropertyEditor>
                </TKEntityProperty>
                <TKEntityProperty tkDataFormProperty name="allergies" [displayName]="'profile.allergies.text'|L" index="1">
                    <TKPropertyEditor tkEntityPropertyEditor type="MultilineText">
                            <TKPropertyEditorStyle tkPropertyEditorStyle></TKPropertyEditorStyle>                        
                    </TKPropertyEditor>
                </TKEntityProperty>
            </RadDataForm>

Here’s the result. The height is not set.

Thanks for answering!