Controls

Intro

Here you can find properties, methods and events of various controls that you can have on your form.

Insert them into JavaScript editor or inside OnClick setting for buttons and links.

Internal Name is the property that is used to identify specific controls and apply methods to them. Internal Name is unique for every element on the form.

Important! These events, methods and properties shouldn't be used on their own, they must be executed inside events like rendered() or beforeSave() in order to actually access the fields or controls that you target.

If you just add these scripts on their own or inside wrong event in JavaScript editor, they will not have access to the specified controls, or will execute at the wrong time. Read more about different events in Manager section.

Button

Properties of the Button control.

Name Description Examples
text Property that holds text for the button.
fd.control('Button0').text;

fd.control('Button0').text =
'New text for button';
onclick Property that holds JavaScript that is executed when button is clicked.
fd.control('Button0').onclick;

fd.control('Button0').onclick =
'alert("Button is clicked!")';

Submit

Properties of the Submit control.

Name Description Examples
text Property that holds text for the submit button.
fd.control('Button1').text;
fd.control('Button1').text = 'New text for button';
onclick Property that holds JavaScript that is executed when submit button is clicked.
fd.control('Button1').onclick;
fd.control('Button1').onclick = 'fd.save();';
disabled Property that specifies if submit button is clickable or not, can be used to disable submit button.
fd.control('Button1').disabled; //returns true or false
fd.control('Button1').disabled = true;
fd.control('Button1').disabled = false;
isSaving Property that checks if form submission is in process.
fd.control('Button1').isSaving;
savingText Property that holds text that is displayed on form submission.
fd.control('Button1').savingText;
fd.control('Button1').savingText =
'Collecting the data...';

Image

Properties of the Image control.

Name Description Examples
target

Property that holds target attribute for the image, used when image works as Hyperlink.

The target attribute specifies where to open the linked document.

Most common use is to open linked document in a new tab by setting target to "_blank"

fd.control('Image0').target;
fd.control('Image0').target = '_blank';
href

Property that holds href for the link placed on the image.

The href attribute specifies the link's destination.

fd.control('Image0').href;
fd.control('Image0').href = 'https://plumsail.com/';
width Property that specifies the width of the image.
fd.control('Image0').width;
fd.control('Image0').width = '256';
height Property that specifies the height of the image.
fd.control('Image0').height;
fd.control('Image0').height = '512';
source

Property that specifies the source of the image.

Source attribute specifies the URL of the image and allows you to link any image to your form.

fd.control('Image0').source;
fd.control('Image0').source =
'https://images.com/my-image.png';
alt Property that specifies an alternate text for an image, if the image cannot be displayed.
fd.control('Image0').alt;
fd.control('Image0').alt =
'This picture is awesome, if only you could see it!';
onclick Property that holds JavaScript that is executed when link is clicked.
fd.control('Image0').onclick;
fd.control('Image0').onclick =
'alert("Hyperlink is clicked!")';

Plain Text

Properties of the Plain Text control.

Name Description Examples
text Property that holds text for the Plain Text control.
fd.control('Text0').text;
fd.control('Text0').text = 'New text for text control';

Ink Sketch

Properties of the Ink Sketch control.

Name Description Examples
value Property that holds value of the Ink Sketch control in text. Can be copied, stored and set, for example.
var signature = fd.control('Signature0').value;
fd.control('Signature1').value = 'signature';
width Property that specifies the width of the ink sketch canvas.
fd.control('Signature0').width;
fd.control('Signature0').width = '128';
height Property that specifies the height of the ink sketch canvas.
fd.control('Signature0').height;
fd.control('Signature0').height = '256';
readonly Property that specifies if user can draw on canvas or not. Takes and returns only true and false values.
fd.control('Signature0').readonly;
fd.control('Signature0').readonly = true;
fd.control('Signature0').readonly = false;
inkColor Property that specifies color of the drawn lines. Can be used to change color dynamically.
fd.control('Signature0').inkColor;
fd.control('Signature0').inkColor = "red"
fd.control('Signature0').inkColor = "#0F0"
fd.control('Signature0').inkColor = "#0000FF"
fd.control('Signature0').inkColor = "rgb(0,0,0)"

DataTable

Properties, methods and events of the DataTable control.

Properties

Name Description Examples
columns

Property that holds all the columns that the DataTable has.

Returns an array of Kendo UI Grid columns.

fd.control('DataTable0').columns; // returns an array

//get the InternalName of the column (can't set!):
fd.control('DataTable0').columns[0].field;

//get the title of the column (can't set!):
fd.control('DataTable0').columns[0].title;

//set column to readonly state:
fd.control('DataTable0').columns[0].editable =
function(){return false};

//set column back to editable state:
fd.control('DataTable0').columns[0].editable =
function(){return true};

//check if column is editable, returns true or false:
fd.control('DataTable0').columns[0].editable;
value

Property that holds all the records that the DataTable has.

Returns an array of objects where each has values matching Internal Column name and their respective value in the DataTable.

Can be used to get information about existing records or create new records.

fd.control('DataTable0').value; // returns an array

// add new record to the DataTable using columns' InternalNames:
var record = {Date: new Date(), Text: "New Text", Cost: 250 };
fd.control('DataTable0').value.push(record);
widget

Property that holds kendoGrid widget for the DataTable.

Can be used to retrieve it, but not to modify it.

fd.control('DataTable0').widget;

Methods

Name Description Examples
addValidator(validator)

Method that allows you to add DataTable validators for the whole table.

Accepts validator object as a parameter.

Inside validator, use value to access an array of records inside the DataTable.

This allows you not only to check individual columns and compare their values, but to limit amount of records or set minimum amount, etc.

fd.control('DataTable0').addValidator({
    error: 'Error message',
    validate: function(value) {
        if (value.length == 0) {
            this.error =
            "Add at least one record to the table";
            return false;
        }

        if (value.length > 10) {
            this.error =
            "Don't add more than 10 records to the table";
            return false;
        }

        return true;
    }
});
addColumnValidator('columnName', validator)

Method that allows you to add DataTable Column validators for the specific column in a table.

Users cannot switch focus to other columns until this one is validated.

Accepts InternalName of the column string and validator object as its parameters.

fd.control('DataTable0').addColumnValidator('Column1', {
    error: 'Error message',
    validate: function(value) {
        if (value <= 0) {
            this.error = 'Value must by greater than 0';
            return false;
        }

        if (value > 100) {
            this.error = 'Value must be less than 100';
            return false;
        }

        return true;
    }
});

Events

Name Description Examples
change

Fired when the user applies any changes to the table, including adding, deleting or changing records.

Inside the function, use value to access an array of records inside the DataTable.

fd.control('DataTable0').$on('change',
    function(value) {
        console.log(value); // DataTable's value
        alert('DataTable changed');
    });
beforeEdit

Fired when the user try to edit or create a data item, before the editor is created. Can be used for preventing the editing depending on custom logic.

Read more here - https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-beforeEdit

fd.control('DataTable0').$on('beforeEdit',
    function(e) {
        console.log(e.model); // log info about record
        alert('About to edit');
    });
edit

Fired when the user edits or creates a data item.

Read more here - https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-edit

fd.control('DataTable0').$on('edit',
    function(e) {
        console.log(e.model); // log info about record
        alert('Editing');
    });
remove

Fired when the user clicks the "delete" command button and delete operation is confirmed in the confirmation window, if the cancel button in the window is clicked the event will not be fired.

Read more here - https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-remove

fd.control('DataTable0').$on('remove',
    function(e) {
        console.log(e.model); // log info about record
        alert('Removed');
    });