Update ListBox datasource Angular

[André Freitas Franchi]

Hello from VBS in Brazil. 

We're trying to build our entire new web system with Angular and your components.

But we would like to edit custom layouts and develop custom options for each. 

So we're creating one shared component for each one of yours. 

But I can't figure out how to update the listbox content inside a shared component in an 'easy' way.

The only way I got to do it was reaching to the child component and updating from there.

Example, I got one page, let's call List Page

Inside there is the shared component, let's call it <vbs-listbox>

In vbs-listbox I send a property called options, like that <vbs-listbox #listBox [option]='list-options'>

Inside the .ts is all necessary configs in an object for your component like:

list_options = {

      fields: {

        text: "textkey",

        value: "valuekey",

      },

      selectionSettings: {

        mode: "Single",

      },

     dataSource: [],

      change: (e) => {

        console.log("Changed", e);

        // this.companyForm.setValue(e.items[0]);

      },

    };

 

And inside the shared component I got:

<ejs-listbox

  #listBox

  [allowDragAndDrop]="options.allowDragAndDrop"

  [cssClass]="options.cssClass"

  [dataSource]="options.dataSource"

  [enablePersistence]="options.enablePersistence"

  [enableRtl]="options.enableRtl"

  [enabled]="options.enabled"

  [fields]="options.fields"

  [height]="options.height"

  [itemTemplate]="options.itemTemplate"

  [locale]="options.locale"

  [query]="options.query"

  [scope]="options.scope"

  [selectionSettings]="options.selectionSettings"

  [sortOrder]="options.sortOrder"

  [toolbarSettings]="options.toolbarSettings"

  [value]="options.value"

  (actionBegin)="options.actionBegin($event)"

  (actionComplete)="options.actionComplete($event)"

  (actionFailure)="options.actionFailure($event)"

  (beforeItemRender)="options.beforeItemRender($event)"

  (change)="options.change($event)"

  (created)="options.created($event)"

  (destroyed)="options.destroyed($event)"

  (drag)="options.drag($event)"

  (dragStart)="options.dragStart($event)"

  (drop)="options.drop($event)"

  (select)="options.select($event)"

></ejs-listbox>

It works like a charm, for the first load. 

But I cannot figure out how to update the dataSource from inside the page inside a Subscribe function without needing to reach the child with @ViewChild using:

@ViewChild("listComponent", { static: true }) listComponent;

this.ListPageService.fetchData().subscribe(

      (res) => {

        this.data= res.data;

        this.listComponent.listBox.dataSource = this.bsemprData;

      }

)

Could you guys please tell me the ways to update the dataSource in a page with a child component with a syncfusion component? 

[Madhan Venkateshan]

Hi André Freitas Franchi, 

 

Good day to you. 

 

We would inform you that updating dataSource can be done only through ViewChild and it is also our intended behavior of the control, so your solution seems correct and we also suggest you to use the same solution. 

 

Regards, 

Madhan V