How to style the selector of a RadDataForm ListPicker

Question

I'm having a RadDataForm in a Nativescript-Angular App.

This RadDataForm shows a Listpicker for one of my properties.

I have read about styling the components of a RadDataForm but it's missing the part about how to style the "wheel texts" that are shown when I change the date. (Or am I missing something?)

They stay black but I need them in another color (i.e. white)

I already solved this for the DatePicker but that does not work for Listpicker "correctly" --> It is changing color after I change selection.

I have a playground setup and testing it with an iOS Device.

Answer 1

After searching around a lot I found the Nativescript-Example App.

Inside this App there is also a RadDataForm with a Listpicker that is styled. The App also shows the used code for the example.

Inside my component I have:

onEditorSetup(event: DataFormEventData) {

    const property = this.myDataForm.dataForm.getPropertyByName(event.propertyName);
    const t = property.editor.type;
    if (t === DataFormEditorType.Picker) {
        console.log("found picker editor for " + property.displayName);
        if (app.ios) {
            this.setupPickerViewEditor(event);
        }
    }
}

setupPickerViewEditor(event: DataFormEventData) {
        console.log("setting up editor: " + event.editor);
        const delegate = UIPickerViewDelegateImplementation.new().initWithOwner(event.editor);
        this.delegates.set(event.propertyName, delegate); // storing the delegate cause they are weak references.
        event.editor.pickerView.delegate = delegate;
    }

My Implementation for the picker delegate that has a white text is:

export class UIPickerViewDelegateImplementation extends NSObject implements UIPickerViewDelegate {

    static ObjCProtocols = [UIPickerViewDelegate];
    static new(): UIPickerViewDelegateImplementation {
        return <UIPickerViewDelegateImplementation> super.new();
    }

    private _owner: any; // TKDataFormPickerViewEditor

    initWithOwner(owner: any /* TKDataFormPickerViewEditor */): UIPickerViewDelegateImplementation {
        this._owner = owner;

        return this;
    }

    pickerViewTitleForRowForComponent(pickerView: UIPickerView, row: number, component: number): string {
        return this._owner.options[row];
    }

    pickerViewDidSelectRowInComponent(pickerView: UIPickerView, row: number, component: number): void {
        this._owner.selectedIndex = row;
        this._owner.owner.editorValueChanged(this._owner);
    }

    pickerViewAttributedTitleForRowForComponent(pickerView: UIPickerView, row: number, component: number): NSAttributedString {
        const title = this.pickerViewTitleForRowForComponent(pickerView, row, component);
        const attr = NSDictionary.dictionaryWithObjectForKey(UIColor.whiteColor, NSForegroundColorAttributeName);
        const res = NSAttributedString.alloc().initWithStringAttributes(title, attr);

        return res;
    }
}