Grid datasource setting question

[Laszlo Szekacs]

Hello,

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

 <ejs-grid

            [allowExcelExport]="true"

            [editSettings]="editSettings"

            [toolbar]="toolbar"

            [dataSource]="dataitems | async"

            (dataStateChange)= "dataStateChange($event)"

            (dataSourceChanged)="dataSourceChanged($event)">

    <e-columns>

      <e-column

            field="id"

            headerText="ID"

     </e-column>

      <e-column

            field="country"

            headerText="Country"

     </e-column>

    </e-columns>

  </ejs-grid>

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) => {

          this.dataStateChange(args);

      },

        dataSourceChanged: (args: DataSourceChangedEventArgs) => {

          this.dataSourceChanged(args);

      }

      });

Thank you in advance for your help.

Attachment: grid_question_fc36427d.zip

[Vikram Sundararajan]

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.

Regards,

Vikram S

[Joseph Christ Nithin Issack]

Lazlo,

   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: (args: DataStateChangeEventArgs) => {

        this.service

          .getData(state)

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

      },

      actionFailure: (args) => {

        console.log(args);

      },

    });

    grid2.appendTo('#grid2');

    this.pageOptions = { pageSize: 12 };

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

    this.service.execute(state);

    this.service

      .getData(state)

      .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