problem when changing amount of data

[Toan Bui]

Hi, I use chart syncfusion to display data but when I change the amount of data the chart doesn't change. I'm having a temporary fix by creating multiple <ejs-chart> tags with condition = 1, 2, 3 .... Is there any way I can fix this?

Example: 

original data => data = [ [{x: 1, y:2}, {x: 2, y:3}], [{x: 1, y:2}, {x: 2, y:3}] ]

change data => data = [ [{x: 1, y:2}, {x: 2, y:3}], [{x: 1, y:2}, {x: 2, y:3}], [{x: 1, y:2}, {x: 2, y:3}], [{x: 1, y:2}, {x: 2, y:3}] ]

[Srihari Muthukaruppan]

Hi Toan, 

 

Based on the provided code snippet. We would like to let you know that we can achieve your requirement using ngFor for creating multiple series based on the provided data. Based on that we have prepared a sample for your reference. Please find the sample, code snippet and screenshot below. 

 

Sample: https://stackblitz.com/edit/angular-5p4hvw?file=app.component.ts 

 

Code Snippet: 

App.component.html: 

 

// add your additional code here 

<e-series-collection> 

        <e-series 

          *ngFor="let chart of data; let i = index" 

          [dataSource]="data[i]" 

          type="Column" 

          xName="x" 

          yName="y" 

          width="2" 

          [marker]="marker" 

        > 

</e-series> 

// add your additional code here 

 

<button ejs-button cssClass="e-info"  (click)="onChange($event)"  style="text-transform:none !important"  > Data Change </button> 

App.component.ts: 

 

// add your additional code here 

public data: any = [ 

    [{ x: 1, y: 2 }, { x: 2, y: 3 }], 

    [{ x: 1, y: 2 }, { x: 2, y: 3 }] 

  ]; 

public onChange(e: Event): void { 

    this.data = [ 

      [{ x: 1, y: 2 }, { x: 2, y: 3 }], 

      [{ x: 1, y: 2 }, { x: 2, y: 3 }], 

      [{ x: 1, y: 2 }, { x: 2, y: 3 }], 

      [{ x: 1, y: 2 }, { x: 2, y: 3 }] 

    ]; 

  } 

 

// add your additional code here 

 

Screenshot: 

Before Click: 

 

 

After Click: 

 

 

 

If still this is not your exact requirement kindly share more details regarding the requirement which will be helpful for further analysis and provide you solution sooner. 

 

Regards, 

Srihari M 

[Toan Bui]

I did it! Thank you so much.

I have problem using datagrid. I want to customize my dropdownlist but I can't find how to do it. And I want to change the names of the items in the toolbar but when I edit them their functionality is no longer available

[Manivel Sellamuthu]

Hi Toan, 

Greetings from Syncfusion support. 

Query: I want to customize my dropdownlist but I can't find how to do it. 

 

You can customize the behavior of the editor component through the columns.edit.params. We have already discussed about this in our documentation section.  

Please refer the below documentation link for more information. 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/edit/#cell-edit-type-and-its-params 

Dropdown API reference: https://ej2.syncfusion.com/angular/documentation/api/drop-down-list/ 

 

Query: I want to change the names of the items in the toolbar but when I edit them their functionality is no longer available. 

You can change the toolbar button name using load function of L10n class. 

Please find the below code example and sample for more information. 

App.component.ts 

import { L10n} from '@syncfusion/ej2-base'; 

L10n.load({ 

    'en-US': { 

        grid: { 

            Add: 'Insert', // here you can customize the text as per your requirement. 

            Delete: 'Remove', 

          Cancel: "Discard" 

        } 

    } 

}); 

@Component({ 

    selector: 'app-root', 

    templateUrl: 'app.component.html', 

    providers: [ToolbarService, EditService, PageService] 

}) 

. . . 

} 

App.component.html 

    <ejs-grid [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar'> 

. . . 

    </ejs-grid> 

Sample: https://stackblitz.com/edit/angular-toolbar-translate?file=app.component.ts 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/global-local/#loading-translations 

Please let us know if you need further assistance. 

Regards, 

Manivel 

[Toan Bui]

I tried using L10n but it didn't work

[Toan Bui]

83 / 5000

I

Kết quả dịch

i checked and found that L10n only works with treegrid not with grid

[Manivel Sellamuthu]

Hi Toan, 

Thanks for your update. 

We have attached the working sample for your convenience in our previous update. From the sample you can see that L10n was working as expected.  

Please refer the below screenshot from our given sample 

Sample: https://stackblitz.com/edit/angular-toolbar-translate?file=app.component.ts 

 

Could you please share the below details, which will be helpful for us to validate further about issue. 

1. Share the complete Grid code
2. If possible, please try to replicate the reported issue in our given sample
3. Share the Syncfusion packages version
4. If possible, please share the issue replicable sample.

Regards, 

Manivel