Dataform MultilineText field

[Ian]

I am evaluating the nativescript-telerik-ui-pro Dataform widget and need to create a multiline textbox.

According to the index.d.ts file, the RadDataForm supports a Multiline EditorType but when I set this, the text field still works in single line mode only.

The MultilineText EditorType does not seem to get mentioned in the documentation, so can you confirm this EditorType is available and it works.

 

Thanks

Ian Cooper

[Nikolay Tsonev]

Hello,
Thank you for your interest in NativeScript UI.
I reviewed your case and confirm that RadDataForm supports a MultilineText EditorType and it is type.
there is some difference with the syntax while using MultilineText type. Inside the EntityProperty you should define another one called PropertyEditor where you should define the type of the Entity. I am attaching example where has been shown how to declare MultilineText with MultilineText.

XML

<navigation:ExamplePage xmlns:navigation="navigation/example-page" loaded="onPageLoaded" xmlns:df="nativescript-telerik-ui-pro/dataform" xmlns="http://www.nativescript.org/tns.xsd">
    <df:RadDataForm id="myDataForm" source="{{ ticketOrder }}">
        <df:RadDataForm.properties>
            <df:EntityProperty name="type" displayName="Type" index="0" >
                <df:EntityProperty.editor>
                    <df:PropertyEditor type="MultilineText" />
                </df:EntityProperty.editor>
            </df:EntityProperty>
            <!-- << dataform-editors-xml -->
            <df:EntityProperty name="price" index="1" readOnly="true">
                <df:EntityProperty.editor>
                    <df:PropertyEditor type="Decimal" />
                </df:EntityProperty.editor>
            </df:EntityProperty>
        </df:RadDataForm.properties>
    </df:RadDataForm>
</navigation:ExamplePage>

TypeScript

export class TicketOrder {
    public type: string = "Sample";
    public price: number = 9.50;

    constructor() {
    }
}
export function onPageLoaded(args) {
    var page = args.object;
    var newticketorder = new TicketOrder();
    page.bindingContext = {ticketOrder:newticketorder};
}

Hope this helps
Regards,
nikolay.tsonev
Telerik by Progress

[Ian]

Hi Nikolay,

thanks for the reply. I have now tried using a Dataform with multiline text field as per your example and it works as expected.

But now I have another issue. My form has three Decimal fields on it which are part of the view model and declared as a 'number' data type. The data from the form is converted to a JSON object and sent via HTTP back to a server.

The issue is that the Decimal fields get converted to an Object in the JSON and do not show as the actual decimal value entered in to the form and the HTTP call fails. I have tried this using the 'Number'editor type and this seems to do the same thing.

My RadDataForm:

<df:RadDataForm id="myDataForm" row="0" source="{{ action }}" commitMode="Manual" >
      <df:RadDataForm.properties>
          <df:EntityProperty name="details" displayName="Details" index="1" >
              <df:EntityProperty.editor>
                  <df:PropertyEditor type="MultilineText" />
              </df:EntityProperty.editor>
          </df:EntityProperty>
          <df:EntityProperty name="ordHours" displayName="Ord. Hours" index="2" >
            <df:EntityProperty.editor>
                <df:PropertyEditor type="Decimal" />
            </df:EntityProperty.editor>
        </df:EntityProperty>
        <df:EntityProperty name="t12Hours" displayName="T1/2 Hours" index="3" >
            <df:EntityProperty.editor>
                <df:PropertyEditor type="Decimal" />
            </df:EntityProperty.editor>
        </df:EntityProperty>
        <df:EntityProperty name="dtHours" displayName="DT Hours" index="4" >
            <df:EntityProperty.editor>
                <df:PropertyEditor type="Decimal" />
            </df:EntityProperty.editor>
        </df:EntityProperty>
      </df:RadDataForm.properties>
    </df:RadDataForm>

My View Model Object:

export class ITAction {
    public faultReportId: string;
    public loggedBy: string;
    public details: string;
    public ordHours: number;
    public t12Hours: number;
    public dtHours: number;
    
    constructor(faultReportId: string, loggedBy: string) {
        this.faultReportId = faultReportId;
        this.loggedBy = loggedBy;
        this.details="";
        this.ordHours=0.0;
        this.t12Hours=0.0;
        this.dtHours=0.0;
    }
}

My JSON object:-

ITAction {

details: "some details",

dtHours: Object,

faultReportId: 12345,

t12Hours: Object,

ordHours: Object

}

Any ideas ?

 

Thanks

Ian Cooper

 

 

[Nikolay Tsonev]

Hi,
Thank you for writing us back.

I reviewed your problem, was unable to reproduce this problem with converting to an `Object` the value from EntityProperty with type Decimal.  For your I am attaching sample code, where has been shown the scenario with getting the JSON object with the new values from the DataForm. that perhaps you need to stringify the JSON Object before, before making your HTTP Request. Another important thing is to set dataform.commitMode to Immediate. With setting this property you will be able to receive the correct values from the DataForm. Could you also check whether you are using latest NativeScript UI 1.4.1

XML

<navigation:ExamplePage xmlns:navigation="navigation/example-page" loaded="onPageLoaded" xmlns:df="nativescript-telerik-ui-pro/dataform" xmlns="http://www.nativescript.org/tns.xsd">
    <GridLayout rows="* auto" >
    <df:RadDataForm id="myDataForm" row="0" source="{{ action }}" row="0" commitMode="Manual">
      <df:RadDataForm.properties>
          <df:EntityProperty name="details" displayName="Details" index="1" >
              <df:EntityProperty.editor>
                  <df:PropertyEditor type="MultilineText" />
              </df:EntityProperty.editor>
          </df:EntityProperty>
          <df:EntityProperty name="ordHours" displayName="Ord. Hours" index="2" >
            <df:EntityProperty.editor>
                <df:PropertyEditor type="Decimal" />
            </df:EntityProperty.editor>
        </df:EntityProperty>
        <df:EntityProperty name="t12Hours" displayName="T1/2 Hours" index="3" >
            <df:EntityProperty.editor>
                <df:PropertyEditor type="Decimal" />
            </df:EntityProperty.editor>
        </df:EntityProperty>
        <df:EntityProperty name="dtHours" displayName="DT Hours" index="4" >
            <df:EntityProperty.editor>
                <df:PropertyEditor type="Decimal" />
            </df:EntityProperty.editor>
        </df:EntityProperty>
      </df:RadDataForm.properties>
    </df:RadDataForm>
    <Button text="Get Date" tap="onTap" row="1"/>

    </GridLayout>


</navigation:ExamplePage>

TypeScript

import viewModel = require("./../view-models/ticket-order-model");
import {Observable} from "data/observable";
import {RadDataForm, EntityProperty} from "nativescript-telerik-ui-pro/dataform"

export class ITAction {
    public faultReportId: string;
    public loggedBy: string;
    public details: string;
    public ordHours: number;
    public t12Hours: number;
    public dtHours: number;

    constructor(faultReportId: string, loggedBy: string) {
        this.faultReportId = faultReportId;
        this.loggedBy = loggedBy;
        this.details="";
        this.ordHours=0.0;
        this.t12Hours=0.0;
        this.dtHours=0.0;
    }
}
var page;
var observable:Observable;
var dataform:RadDataForm;
export function onPageLoaded(args) {
    page = args.object;
    var object = new ITAction("56", "Ian");
    observable = new Observable();
    observable.set("action",object);
    dataform = page.getViewById("myDataForm");
    dataform.commitMode="Immediate";
    page.bindingContext = observable;
}
export function onTap(){

    var json = dataform.editedObject;

    console.log(json);
    console.log(JSON.stringify(json));

}

Please let me know, whether the given information helps or if I could assist you further.
Regards,
nikolay.tsonev
Telerik by Progress

[Ian]

Nikolay,

thanks again for the feedback. I do now seem to have this working. It was the editedObject bit that was missing and not clear to me.

Anyway, the dataform now seems to do what I want and will be good enough for me to purchase the nativescript-telerik-ui-pro module.

Regards,

Ian Cooper

[Ian]

Hi Nikolay,

so I do still have more issues with the functionality of the Nativescript RadDataform. I am coming to the conclusion that it is still a bit of a work in progress and may even need to go back to creating my own forms with standard text boxes, pickers etc. that give me more control.

I will try to explain my issue. It is centered around the Validation aspects of the form.

So my form is very simple. It has a text field that users enter data into and then a Submit button that sends the data to the back end. The text field now has two df:EntityProperty.validators on it. One ensures that filed cannot be empty (NonEmptyValidator) and the other (MaximumLengthValidator) that prevents it from exceeding 10 characters.

Both the CommitMode and ValidationMode is set to Manual because I don't want the commit and validation to occur until the Submit button has been clicked. So when the submit button is clicked I call the CommitAll() method and then get the editedObject and send the JSON object to my back end.

Failed Validations seem to have these issues:-

• In my instance where I have two validators on my text field, it seems I have to Clear the error before the next validator gets recognised. Example, I leave the field blank and the NonEmptyValidator fires. I then enter > 10 characters, and the field still displays the NonEmptyValidator and the editedObject contains "". I have to Clear the NonEmptyValidator by entering some valid text < 10 chars before the MaximumLengthValidator gets recognised.
• Secondly, there seems to be no callback in to the code behind if validation fails so how do I prevent my Submit to the back end if the validation fails. If the validation fails, the editedObject seems to either pass back an empty string value for the text field (which I can catch) but it is more likely to simply pass back the last 'Good' value entered in to the field.

I have tried different combinations on Immediate, OnLostFocus and Manual for both Commit and Validation modes and none seem to do what I expect them to. When the validation fails, the editedObject does not get updated so returns that last 'good' value. Is there a way I can get to the underlying failed text values so I can do a check on them in code ?

Apologies if this is not very clear but quite hard to explain.

Thanks

Ian Cooper

[Nikolay Tsonev]

Hello,
I reviewed your case and found that at the moment the only possible way to verify, whether  the EntityProperty value contains valid data is to use propertyValidatedEvent . The event will be fired for every valid value for the DataForm and you will be able to handle if all the data is valid. that, I have opened a new FeatureRequest in this issue for supporting   isValid property, which can help to verify, whether the DataForm data is valid. At this you could follow at the moment  "What's new" blog article., where you could find the latest news for --. 

Regarding to your second question. To be able to get the latest data the commitMode should be set to Immediate then the editedObject will return you latest entered data from the Form. For you I am attaching sample project where has been shown, how to use propertyValidatedEvent .

HTML

<navigation:ExamplePage xmlns:navigation="navigation/example-page" loaded="onPageLoaded" xmlns:df="nativescript-telerik-ui-pro/dataform" xmlns="http://www.nativescript.org/tns.xsd">
    <GridLayout rows="* auto" >
    <df:RadDataForm id="myDataForm" row="0" source="{{ action }}" propertyValidated="validatedata" editorSelected="selected" row="0" commitMode="Manual">
      <df:RadDataForm.properties>
        <df:EntityProperty name="username"  index="0">
                <df:EntityProperty.validators>
                    <df:NonEmptyValidator
                        errorMessage="Username can't be empty." />
                    <df:MaximumLengthValidator
                        errorMessage="Username can be at most 12 characters."
                        length="12" />
                </df:EntityProperty.validators>
        </df:EntityProperty>
         <df:EntityProperty name="email" displayName="E-mail" index="1" >
                <df:EntityProperty.editor>
                    <df:PropertyEditor type="Email" />
                </df:EntityProperty.editor>
                <df:EntityProperty.validators>
                    <df:EmailValidator />
                </df:EntityProperty.validators>
            </df:EntityProperty>

      </df:RadDataForm.properties>
    </df:RadDataForm>

    </GridLayout>
</navigation:ExamplePage>

TypeScript
 

import {Observable} from "data/observable";
import {RadDataForm, EntityProperty, DataFormEventData, PropertyEditor } from "nativescript-telerik-ui-pro/dataform"

export class ITAction {
    public username:string;
    public email:string;

    constructor() {
        this.username="";
        this.email="";
    }
}
var page;
var usernamevalidation = false;
var emailnamevalidation = false;
var observable:Observable;
var dataform:RadDataForm;
export function onPageLoaded(args) {
    page = args.object;
    var object = new ITAction();
    observable = new Observable();
    observable.set("action",object);
    dataform = page.getViewById("myDataForm");
    dataform.commitMode="Immediate";
    page.bindingContext = observable;
    dataform.validationMode="Manual"
}


export function validatedata(args:DataFormEventData){
    console.log(args.entityProperty);
    console.log(args.propertyName);
    console.log(args.returnValue);
    if(args.propertyName == "username"){
        console.log("valid username");
    }
    if(args.propertyName == "email"){
        console.log("valid email");
    }
}

Let me know whether this helps.
Regards,
nikolay.tsonev
Telerik by Progress

[Ian]

Nikolay,

from the documentation I got the impression the propertyValidatedEvent (and a number of other events) only worked for iOS and not Android which is why I have not tried to use it. Is this correct ?

I will try your example code and see if this helps me.

Many thanks again.

Regards,

Ian Cooper

[Nikolay Tsonev]

Hi,
Thank you for interest in NativeScript UI and excuse me for my mistake.

I agree with you that propertyValidatedEvent will work only for iOS. On other hand using  EntityValidation and accessing edithedObject will also not going to because edithedObject returned value will always be the last valid data. After a discussion with the developer team, a point was made that they will research the possible ways to create such as `isValid`, which will return DataForm validation status. that, we will write you back on Monday with more detailed information, about this property and info about the time, when this property will be available. In the mean you could use DataForm component without EntityProperty.validators and to make the data validation in code behind. You could also review my sample code below. that sample code below you could use email-validator plugin for email validation. To add it in your project you could use  install email-validator --save command.

XML

<GridLayout rows="* auto" >
        <df:RadDataForm id="myDataForm" row="0" source="{{ action }}"  row="0" commitMode="Immediate">
        <df:RadDataForm.properties>
            <df:EntityProperty name="username"  index="0">
            </df:EntityProperty>
            <df:EntityProperty name="email" displayName="E-mail" index="1" >
                    <df:EntityProperty.editor>
                        <df:PropertyEditor type="Email" />
                    </df:EntityProperty.editor>
                </df:EntityProperty>
        </df:RadDataForm.properties>
        </df:RadDataForm>
        <Button text="Get Date" tap="onTap" row="1"/>
    </GridLayout>

TypeScript

var validator = require("email-validator/index");

export function onTap(){

    //dataform.source={"username":"", "email":""};

     var json = JSON.parse(dataform.editedObject);

     console.dump(json);

     console.log(json["email"]);

     console.log(json["username"]);

     var datavalidation = true;

     if((json["email"]!="")&&(validator.validate(json["email"]))){

         console.log("valid email");

         console.log(json["email"]);

     }

     else{

         console.log("invalid email");

     }

 

     if((json["username"]!="")&&(json["username"].length<12)){

         console.log("valid username");

         console.log(json["username"]);

     }

     else{

         console.log("invalid username");

     }

      

}

Let me know whether this helps, or if I could  you further
Regards,
nikolay.tsonev
Telerik by Progress

[Vladi]

Hi Ian,

Just wanted to give you a quick followup regarding the "isValid" feature of the RadDataForm. We have discussed this with the development team and indeed it looks like such feature will be very beneficial to the RadDataForm control. We will do our best to implement it in both native Android and iOS and of course in the nativescript-telerik-ui/pro NativeScript plugin as soon as possible.

As Nikolay mentioned you can follow the status of this feature here. We apologize for any inconvenience that this may be causing.

Regards,
Vladi
Telerik by Progress

[Ian]

Hi Vladi,

thanks for the update. To be honest I am not used to such a quick and detailed responses from Telerik and must thank Nikolay for this and his code samples.

Look I am not sure but I think I have found a further issue with the RadDataForm. As before I have a single text field with 'Immediate' CommitMode. I do still have a NonEmptyValidator attached to the field, set to Manual validationMode. What I am seeing is this:-

1. Add some text to the field, get the editedObject in the code behind and the object contains the value entered in to the text field. All good. Eg 'abcdef'
2. Delete the text to leave the text field blank and again get the editedObject in code. This time the text field value in the object is not blank but contains a single character - the first character of the last good value entered. Eg 'a'

This doesn't seem to be correct.

Regards,

Ian Cooper

[Nick Iliev]

Hi Ian,

Thank you for reporting your observations.
As my colleague, Nikolay Tsonev suggested when there is a validation of EntityProperty (in this case with NonEmptyValidator) every nonvalid value won't be sent to the EditedObject. The reason for that is its CommitMode is immediate (no matter that the set ValidationMode is of type manual). The commit itself is going through the validation to make sure that the EditedObject is of type.

Regards,
Nikolay Iliev
Telerik by Progress