Getting error "Cannot read property 'collectionView' of undefined" while using

Getting error "Cannot read property 'collectionView' of undefined" while using

Posted by: nivishapanwar on 2 March 2021, 8:13 am EST

• 

  nivishapanwar

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 2 March 2021, 8:13 am EST

  Hello,
  
  I am using wijmo listbox. The update and remove functionality were working fine before but now getting error “Cannot read property ‘collectionView’ of undefined”Listbox.zip
  
  Can I get help for this issue.

  <wj-list-box #ListData [itemsSource]=“name” (initialized)=“initListBox(ListData)”

                              (selectedIndexChanged)="displayListBoxValueInTextField(ListData)">
                              <ng-template wjItemTemplate let-item="item" let-itemIndex="itemIndex">
                                  {{item}}
                                  <div class="wj-glyph">
                                    <span class="wj-glyph-drag"></span>
                                  </div>
                                </ng-template>
                          </wj-list-box>
  

  Thank you.
  
  Regards,
  
  Nivisha

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 3 March 2021, 8:14 am EST

  Hi Nivisha,

  Can you let me know when exactly this error occurs? And what changes did you made before the issue occurred?

  Regards,
  
  Ashwin

• 

  nivishapanwar

  • Post Options:
  • Link
    Copy

  Posted 3 March 2021, 9:44 am EST

  Hi Ashwin,
  
  I have attached the code file . Whenever I try to call update or remove method, I am getting this error.I really dont have an idea why it is coming.Can you suggest me after looking into the code any other approach or idea to proceed with the update and remove .

  Regards,
  
  Nivisha

• 

  nivishapanwar

  • Post Options:
  • Link
    Copy

  Posted 3 March 2021, 9:53 am EST

  Hello,
  
  @ViewChild(‘ListData’, { static: true }) ListData: wjcInput.ListBox;
  
  name: CollectionView;
  
  get showCheckboxes() {
  
  // return this._showCheckboxes;
  
  // }
  
  // set showCheckboxes(value: boolean) {
  
  // if (this._showCheckboxes !== value) {
  
  // this._showCheckboxes = value;
  
  // this.ListData.checkedMemberPath = value ? ‘checked’ : ‘’;
  
  // }
  
  Whenever I am using anything with ListData its giving an error.

  Regards

• 

  nivishapanwar

  • Post Options:
  • Link
    Copy

  Posted 4 March 2021, 11:12 am EST

  Hi,
  
  I found a temporary soln for that error.
  
  updateRecord(indexValue: number) {
  
  let textBoxValue = this.fullname || “”;
  
  //this.changeDetection = true;
  
  if (textBoxValue) {
  
  //let cv = this.ListData.collectionView;
  
  this.name.items[indexValue] = textBoxValue;
  
  // cv.items[this.ListData.selectedIndex] = textBoxValue;
  
  this.name.refresh();
  
  this.saveListBoxData();
  
  }
  
  <button type=“button” class=" btn btn-primary btn_update" [disabled]=“isOkDisabled”
  
  (click)=“updateRecord(ListData.selectedIndex)”>Update
  
  Now I am able to perform update and remove. But not able to add checkboxes in the listbox. Could you please help me with that because now I am getting the same error for checkedmemberpath.
  
  get showCheckboxes() {
  
  return this._showCheckboxes;
  
  }
  
  set showCheckboxes(value: boolean) {
  
  if (this._showCheckboxes !== value) {
  
  this._showCheckboxes = value;
  
  this.ListData.checkedMemberPath = value ? ‘checked’ : ‘’;
  
  }
  
  }

  Regards,
  
  Nivisha

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 5 March 2021, 1:03 am EST

  Hi Nivisha

  Sorry for the delayed response. I tried to replicate your issue by copying your code in a new application but was unable to replicate it.
  
  Please make sure that the spelling of ListData is the same in both HTML and component side.
  
  I am adding the sample for reference:

  https://stackblitz.com/edit/angular-9-0-0-rc-1-2ngzsw

  ~regards

• 

  nivishapanwar

  • Post Options:
  • Link
    Copy

  Posted 5 March 2021, 2:11 am EST

  Hi Ashwin,
  
  The spelling is same. Even I did not understand why this issue came. Can you help me with adding checkboxes as I found a soln for update and remove but not able to add checkboxes in listbox.

  Thank you.

  Regards,
  
  Nivisha

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 5 March 2021, 3:28 am EST

  Hi,

  You can try binding the checkedMemberPath directly to the showCheckboxes variable on HTML side:

  https://stackblitz.com/edit/angular-9-0-0-rc-1-v8h4ax

  ~regards

• 

  nivishapanwar

  • Post Options:
  • Link
    Copy

  Posted 5 March 2021, 6:52 am EST

  Hi,
  
  I tried like that but it did not work. Does checkedmemberpath doesnt take collectionview variable as the variable which I am passing in item source is of type collection view.

  Thank you.

  Regards,
  
  Nivisha

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 8 March 2021, 12:16 am EST

  Hi Nivisha,

  The checkedMemberPath property is of ListBox and not of CollectionView. Your issue may be arising because you have added the wjItemTemplate directive which does not define any checkbox to display.
  
  I have updated the sample to fulfill your requirements:

  https://stackblitz.com/edit/angular-9-0-0-rc-1-nfjukl

  ~regards

• 

  nivishapanwar

  • Post Options:
  • Link
    Copy

  Posted 8 March 2021, 2:20 am EST

  Hi Ashwin,

  Thank you for the help, the soln worked for me.

  Regards,
  
  Nivisha