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. Image for the cookie policy date

Grid datasource setting question


I have a grid which is populated from restapi get function. When I set the grid in component html template, it is OK.





            [dataSource]="dataitems | async"

            (dataStateChange)= "dataStateChange($event)"













But when I want to create from typescript side with same datasource, it not populates data. 
Here is my code. I uploaded all relevant parts of my code (grid_question.txt) also.

let grid = new Grid({

        dataSource: this.dataitems,

        columns: [{ field: 'id', headerText: 'ID' }, { field: 'country', headerText: 'Country' }],

        allowPaging: true,

        pageSettings: { pageSize: 5 },

        dataStateChange: (args: DataStateChangeEventArgs) => {



        dataSourceChanged: (args: DataSourceChangedEventArgs) => {




Thank you in advance for your help.

Attachment: grid_question_fc36427d.zip

2 Replies

VS Vikram Sundararajan Syncfusion Team February 10, 2023 03:19 AM UTC

Hi Laszlo,

Greetings from Syncfusion support,

Currently we are validating the reported scenario want to render the Grid with custom data binding in Typescript, we will update the further details on or before 13th Feb 2023. Until then we appreciate your patience.


Vikram S

JC Joseph Christ Nithin Issack Syncfusion Team February 22, 2023 01:48 PM UTC


   Based on your query, when you are defining the grid in using typescript, you have to manually subscribe to the observable as it will not auto subscribe as it does when you define the grid using the directives. This is the reason for the reported behavior.

  Please refer the below code example:


public ngOnInit(): void {

    let grid2 = new Grid({

      columns: [

        { field: 'OrderID'headerText: 'ID' },

        { field: 'ShipCountry'headerText: 'Country' },


      allowPaging: true,

      pageSettings: { pageSize: 5 },

      dataStateChange: (argsDataStateChangeEventArgs=> {



          .subscribe((response) => (grid2.dataSource = response));


      actionFailure: (args=> {





    this.pageOptions = { pageSize: 12 };

    let state = { skip: 0take: 36 };




      .subscribe((response) => (grid2.dataSource = response));



Sample: https://stackblitz.com/edit/angular-infine-scroll-custombinding-e8ghxn?file=app.component.html,app.component.ts,order.service.ts

Live Chat Icon For mobile
Up arrow icon