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
close icon

[Cannot add items in listbox]

Hi,

I want to add some items in a listbox programmatically in the way provided in the docs, but the call to getInstance fails with this error :

ERROR TypeError: Cannot read properties of null (reading 'ej2_instances')at getInstance (ej2-base.es5.js:450:13)

This is the code:

import { ListBox } from '@syncfusion/ej2-dropdowns';

let listboxobj:ListBox = getInstance(document.getElementById("listbox")!, ListBox) as ListBox;

    listboxobj?.addItems(
       rowData.idList.map((itemId: string) => {
         return {
           id: itemId,
           text: this.listboxSource.find(item => item.id === itemId)?.name
         }
     }));

<ejs-listbox #listbox
           id="listbox"
           height="290px"
           [toolbarSettings]="toolbar2"
           name="listbox1"
           formControlName="listbox1">
</ejs-listbox>

I also tried to reference the listbox by ViewChild, but it looks like the listBoxObj1 is not initialized, is always undefined:

import { CheckBoxSelectionService, ListBoxComponent } from '@syncfusion/ej2-angular-dropdowns';

@ViewChild('listbox') listboxObj1!: ListBoxComponent;

this.listboxObj1?.addItems(
      rowData.idList.map((itemId: string) => {
        return {
          id: itemId,
          text: this.listboxSource.find(item => item.id === itemId)?.name
        }
    }));

<ejs-listbox #listbox

           id="listbox"

           height="290px"

           [toolbarSettings]="toolbar2"

           name="listbox1"

           formControlName="listbox1">

</ejs-listbox>

Any ideas how to solve this?


1 Reply 1 reply marked as answer

YA YuvanShankar Arunagiri Syncfusion Team May 1, 2023 06:41 AM UTC

Hi Ciprian,


We have attempted to replicate the issue on our end but were unable to do so. We have prepared a sample to show how ListBox component works correctly on our end.


Sample link: https://stackblitz.com/edit/angular-ckekaa?file=src%2Fapp.component.ts


Could you please share the reproducible sample or replicate the issue in our sample? and share the Syncfusion package version you are using. Based on that, we will check and provide you with a better solution quickly.


Regards,

YuvanShankar A


Marked as answer
Loader.
Live Chat Icon For mobile
Up arrow icon