We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Two Way Databinding Property

Two way Databinding means that any data-related changes affecting the model are immediately propagated to the matching view(s), and vice-versa.

Angular Syncfusion Components supports Two way Databinding property which is bound to the controls with in the brackets ‘[()]’. In our Grid Component dataSource Property supports two way databinding property.

Refer to the below code snippet to declare the dataSource property through two way databinding in view.

 [app.component.html]

 

<ej-grid [allowPaging]="true" [allowSorting]="true" [(dataSource)]="gridData">

    <e-columns>

        <e-column field="OrderID" headerText="Order ID" width="75" textAlign="right"></e-column>

        <e-column field="CustomerID" headerText="Customer ID" width="80"></e-column>

        <e-column field="EmployeeID" headerText="Employee ID" width="75" textAlign="right"></e-column>

        <e-column field="Freight" width="75" format="{0:C}" textAlign="right"></e-column>

        <e-column field="OrderDate" headerText="Order Date" width="80" format="{0:MM/dd/yyyy}" textAlign="right"></e-column>

    </e-columns>

</ej-grid>

 

 

Refer to the below code snippet to pass the data to dataSource property in model.

[app.component.ts]

import { Component } from '@angular/core';

 

@Component({

    selector: 'ej-app',

    templateUrl: './app.component.html',

})

export class AppComponent {

    public gridData: any;

    constructor() {

        this.gridData = [{

            OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5,

            OrderDate: new Date(8364186e5), Freight: 32.38

        },

        {

            OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6,

            OrderDate: new Date(836505e6), Freight: 11.61

        },

        {

            OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4,

            OrderDate: new Date(8367642e5), Freight: 65.83

        },

        {

            OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3,

            OrderDate: new Date(8367642e5), Freight: 41.34

        }];

    }

}

 

 

Now the dataSource is appended in view and Model. We can change the data into view and model through any events in the Controls.

Here we are going to bind a data dynamically through a button click event in both view and model.

Refer to the below code snippet

[app.component.html]

<ej-grid [allowPaging]="true" [allowSorting]="true" [(dataSource)]="gridData">

    <e-columns>

        <e-column field="OrderID" headerText="Order ID" width="75" textAlign="right"></e-column>

        <e-column field="CustomerID" headerText="Customer ID" width="80"></e-column>

        <e-column field="EmployeeID" headerText="Employee ID" width="75" textAlign="right"></e-column>

        <e-column field="Freight" width="75" format="{0:C}" textAlign="right"></e-column>

        <e-column field="OrderDate" headerText="Order Date" width="80" format="{0:MM/dd/yyyy}" textAlign="right"></e-column>

    </e-columns>

</ej-grid>

<button type="button" id="button" ej-button text="click button to append dataSource" (ejclick)="dataappend($event)"></button>

 

 

Refer to the below code snippet to append the data dynamically in a click event.

[app.component.ts]

import { Component } from '@angular/core';

 

@Component({

    selector: 'ej-app',

    templateUrl: './app.component.html',

})

export class AppComponent {

    public gridData: any;

    constructor() {

        this.gridData = [{

            OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5,

            OrderDate: new Date(8364186e5), Freight: 32.38

        },

        {

            OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6,

            OrderDate: new Date(836505e6), Freight: 11.61

        },

        {

            OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4,

            OrderDate: new Date(8367642e5), Freight: 65.83

        },

        {

            OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3,

            OrderDate: new Date(8367642e5), Freight: 41.34

        }];

    }

    dataappend(event){

        this.gridData.push({ OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4,

        OrderDate: new Date(8368506e5), Freight: 51.3});

    }

}

 

 

 

Refer to the below sample link with above code snippets.

Sample

Article ID: Published Date: Last Revised Date: Platform: Control:
8038 10/13/2017 08/28/2018 JavaScript General
Did you find this information helpful?
Comments
Brijesh Aug 26, 2018

I tried this sample but for me it work. It didn't even draw the table for me.

Reply
Add Comment
You must log in to leave a comment

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon