)
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: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

Two Way Databinding Property

Platform: jQuery |
Control: General |
Published Date: October 13, 2017 |
Last Revised Date: May 8, 2019

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

ADD COMMENT
You must log in to leave a comment
Comments
Brijesh
Aug 26, 2018

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

Reply

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

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

Live Chat Icon For mobile
Live Chat Icon