[Solved] DataForm not showing on iOS

[Jonathan Salomon]

I am trying out the DataForm functionality of UI Pro v1.6.1 in a very simple login form. On Android it is working ok (I have a small issue for which I will open a separate thread), but on iOS it the form is not displayed at all. I already did `tns platform remove ios && tns run ios` which didn't work either.

Any idea what may be causing this?

Thanks!!

 

The login component looks like this:

import {Component,OnInit} from '@angular/core';
import {SessionProvider} from '../providers/session';
import {ConfigProvider} from '../providers/config';

@Component({
  template: `
    <StackLayout id="container" style="margin:15 30 0 30;">
      <RadDataForm tkExampleTitle tkToggleNavButton [source]="credentials">
        <TKEntityProperty tkDataFormProperty name="username" displayName="E-Mail" index="0">
          <TKPropertyEditor tkEntityPropertyEditor type="Email"></TKPropertyEditor>
        </TKEntityProperty>
        <TKEntityProperty tkDataFormProperty name="password" displayName="Password" index="1">
          <TKPropertyEditor tkEntityPropertyEditor type="Password"></TKPropertyEditor>
        </TKEntityProperty>
        <TKEntityProperty tkDataFormProperty name="environment" [valuesProvider]="environments" displayName="Environment" index="2">
          <TKPropertyEditor tkEntityPropertyEditor type="Picker"></TKPropertyEditor>
        </TKEntityProperty>
      </RadDataForm>
      <Button text="Sign in" (tap)="doLogin()" class="btn"></Button>
    </StackLayout>
  `,
  styles: [`
    #container { background-color:#efefef; }
  `]
})
export class LoginPage implements OnInit {
  public credentials:any;                      // credentials to pass to backend
  public environments:Array<string> = [];      // environments configured in ConfigProvider
  public selectedEnv:number = 0;               // environment from last successful login

  constructor(public session: SessionProvider, public config: ConfigProvider, public session: SessionProvider) {
  }

  public ngOnInit() {
    this.credentials = this.session.storedCredentials;
    this.config.environments.forEach((env,index) => {
      this.environments.push(env.name);
      if (this.credentials.environment!='' && env.name==this.credentials.environment) { this.selectedEnv = index; }
    });
    console.dump(this.credentials);
  }

  public doLogin() {
    // do something
  }

 //public onEnvSelect(index) {
 //  if (index!==undefined) { this.credentials.environment=this.config.environments[index].name; }
 //}
}

 

The `credentials` object I am feeding to the `RadDataForm` source looks like this:

{
    "username": "",
    "password": "",
    "environment": ""
}

[Nick Iliev]

Hi Jonathan,

The reason for your issue is as there is a small difference in how iOS and Android are handling layouts with no predefined sizes. IN your case the StackLayout used as a container does not have size and the default layout used for arranging your RadDataForm entities is also stack layout. So basically as the RadDataForm does not have a predefined height in iOS, it won't occupy any space and won't be visible.
To overcome this issue, you have several options:

- Option 1: provide height for your RadDataFrom
e.g.

<RadDataForm height="200" [source]="credentials">

The downside of this method is that you will have to provide hardcore value for your height. Using DIPs (as shown in the example above) is recommended as this will guarantee that you are using device independent measuring system.

- Option 2: another option would be to change your container from StackLayout to GridLayout and then use * as the size for your RadDataForm row (* means take all the available space left).
e.g.

<GridLayout rows="*, auto">
    <RadDataForm row="0"></RadDataForm>
    <Button row="1"></Button >
</GridLayout>

With this technique, your RadDataForm will take all the space that is left. The button is using auto which means it will take only space enough to be fully rendered. Of course, you can also provide a numeric value for row height instead of *, but to visualize your RadDataForm in iOS you can't use auto.


Regards,
Nikolay Iliev
Telerik by Progress

[Jonathan Salomon]

Indeed this is working. Might be worth noting that you need to use the format <GridLayout rows="*, auto"> as opposed to <GridLayout rows="* auto"> which is working fine for me elsewhere.

Thanks again Nikolay!