Grid initialization error

[Renard]

Hi

After creating a tab, I called the grid's changeDataSource event and encountered an error.

[Johnson Soundararajan S]

Hi Renard,

Based on your query, we notice that when you change the data source using changeDataSource method in the onCreatedTab event, a script error is thrown.

We fulfil your requirement by using triggered the changeDataSource method in dataBound event. It's essential to execute the "changeDataSource" method after the grid has been rendered.

Please refer to the below sample and code snippet for more information.
 

Code sample :

app.component.ts

 

 

  dataBound(args: any) {

    if (this.initial) {

      this.initial = false;

      setTimeout(() => {

        let columnsList2: any = [

          { field: 'ShipName', headerText: 'Ship Name', type: 'string' },

          { field: 'ShipCity', headerText: 'Ship City', type: 'string' },

          { field: 'ShipCountry', headerText: 'Ship Country', type: 'string' },

        ];

        if (this.grid) {

          this.grid.changeDataSource(undefined, columnsList2);

        }

      });

    }

  }

 

Sample Link : 46kyyp (forked) - StackBlitz

 
Please get back to us, if you need further assistance.
 

Regards,

Johnson Soundararajan S

[techlandandyzhang]

We found the problem item. When two conditions are met, after using 'changeDataSource', trying Filter does not work. 

1. The data source is empty when FilterSetting is set. 

2. The field has a type of "checkbox".

https://stackblitz.com/edit/angular-ba3qeo-oxvcua?file=src%2Fapp.component.ts,src%2Fapp.component.html

[Johnson Soundararajan S]

Hi Renard,
 

We reviewed your query, we observe that you have specified the field name for a column of the checkbox type. However, we are unable to filter the column with the "checkbox" type.

For example, We can filter the columns with type of "boolean" and we can use displayAsCheckBox property to display the check box instead of Boolean value.
 

Please refer to the below API link,  sample and code snippet for more information.
 

Code sample :

app.component.ts

 

      {

        field: 'Testing',

        headerText: 'Postal Code ',

        displayAsCheckBox: true,

        type: 'boolean',

      },

Sample : Geyp1c (forked) - StackBlitz

API Link : Column API in Angular Grid API component - Syncfusion
 

Please get back to us, if you need further assistance.

Regards,

Johnson Soundararajan S