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

Cannot read property 'removeChild' of null

Hi, I'm having problems with the list view. In this I need to pass a data source to an observable, then filter through a text box, but if I insert a value not present in my list that triggers the passage of an empty observable followed by a second pass of an observable containing values, the list is in error returning 'Cannot read property removeChild of null'.


Can you help me?


6 Replies

VK Vinoth Kumar Sundara Moorthy Syncfusion Team September 10, 2019 12:20 PM UTC

Hi Emanuele, 
 
Thank you for contacting Syncfusion support. 
 
We have checked your scenario and need more information to reproduce your issue. Please provide the details for the below scenario, 
 
·       Confirm whether you are observing data source from a service. 
 
·       Confirm whether you are observing textbox input using rxjs. 
 
·       Specify whether you have used any rxjs operators to filter the data and observe it. 
 
·       Explain how you are assigning the actual input from textbox to ListView in detail. 
 
Could you please share above details with complete code snippets to proceed further on the reported issue? Based on this we will check and provide a better solution for your requirement. 
 
Regards, 
Vinoth Kumar S 



EM Emanuele replied to Vinoth Kumar Sundara Moorthy September 10, 2019 12:48 PM UTC

Hi Emanuele, 
 
Thank you for contacting Syncfusion support. 
 
We have checked your scenario and need more information to reproduce your issue. Please provide the details for the below scenario, 
 
·       Confirm whether you are observing data source from a service. 
 
·       Confirm whether you are observing textbox input using rxjs. 
 
·       Specify whether you have used any rxjs operators to filter the data and observe it. 
 
·       Explain how you are assigning the actual input from textbox to ListView in detail. 
 
Could you please share above details with complete code snippets to proceed further on the reported issue? Based on this we will check and provide a better solution for your requirement. 
 
Regards, 
Vinoth Kumar S 


Hello, thanks for the prompt reply. Going in order yes, I confirm that the data of the dataSource come from a service, I continue with the confirmation that the input of the textbox is taken in management by an observable that to the trigger of a ValueChanges, generates through an combineLatest an observable that continene l 'union of what was entered in the textbox and what I'm getting from the service, seeing an external filter that gives me all the values containing what I typed. I do not assign textbox input, using it only for filtering purposes.

CODE HTML: 

<div class="search-box">
      <div class="e-input-group">
         <input #searchInput class="e-input" type="text" placeholder="Cerca..." [formControl]="filter" />
      </div>
   </div>

.....

<ejs-listview [dataSource]='filteredPersons$ | async' [template]='win_template' [enableVirtualization]='true' class="e-list-template" (select)="onItemSelected($event)"
                 (actionBegin)="actionBegin($event)" (actionComplete)="actionComplete($event)" style="height:86vh;">
      <ng-template #win_template let-dataSource="">
         <div class="e-list-wrapper">
            <div class="e-card">
               <div class="e-card-header">
                  <div class="e-card-header-image"><img src="{{getPeopleIcon(dataSource)}}" /></div>
                  <div class="e-card-header-caption">
                     <div class="e-card-header-title">{{dataSource.name}}</div>
                     <div class="e-card-header-sub-title">{{dataSource.din}}</div>
                  </div>
               </div>
               <div class="e-card-content">{{dataSource.fleet}}</div>
            </div>
         </div>
      </ng-template>
   </ejs-listview>

CODE TS:
 public peoples: Observable<Person[]>;
  filter: FormControl;
  filter$: Observable<string>;
  filteredPersons$: Observable<Person[]>;
...

 constructor(private peopleStore: PersonStore <- service that returns the observable) {

   }

this.peoples = this.peopleStore.peoples;
      this.filter = new FormControl('');
      this.filter$ = this.filter.valueChanges.pipe(startWith(''));
      this.filteredPersons$ = combineLatest(this.peoples, this.filter$).pipe(
         map(([peoples, filterString]) => {
            var filteredItems: Person[] = peoples.filter(people => people.name.indexOf(filterString) !== -1);
            if (filteredItems.length == 0)
               return new Array<Person>();
            return filteredItems;
         })
      );


VK Vinoth Kumar Sundara Moorthy Syncfusion Team September 11, 2019 12:41 PM UTC

Hi Emanuele, 
  
Good day to you. 
  
We have checked your reported issue and confirmed that “Error in ListView while using virtualization with external filter option” is a defect and logged a defect report. You can track the status of this defect using below link from our feedback portal, 
 
  
The fix for this issue is estimated to be available in our Essential Studio 2019 Volume 3 release which schedule to roll out in the end of September 2019. We appreciate your patience until then. 
  
Regards, 
Vinoth Kumar S 



VK Vinoth Kumar Sundara Moorthy Syncfusion Team October 4, 2019 11:38 AM UTC

Hi Emanuele, 
 
Good day to you. 
 
We are glad to announce that our Essential Studio Volume 3, 2019 release (v17.3.0.14) is rolled out and is available for download under the following link, 
 
 
Sample Link:  
 
We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 
 
Regards, 
Vinoth Kumar S 



EM Emanuele replied to Vinoth Kumar Sundara Moorthy October 4, 2019 01:11 PM UTC

Hi Emanuele, 
 
Good day to you. 
 
We are glad to announce that our Essential Studio Volume 3, 2019 release (v17.3.0.14) is rolled out and is available for download under the following link, 
 
 
Sample Link:  
 
We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 
 
Regards, 
Vinoth Kumar S 


Hi, I downloaded the new version and installed it, but I still have the problem mentioned in this post. Is there anything special I need to do? 

 regards, Emanuele



NP Narayanasamy Panneer Selvam Syncfusion Team October 7, 2019 09:36 AM UTC

Hi Emanuele, 

If the issue may reproduce due to the Syncfusion packages are not updated properly. Please follow the below Steps to update the package version 
1. Go to package.json file 
2. Identify our Listview package and change to ( "@syncfusion/ej2-angular-lists": "^17.3.14") 
in dependency category. 
3. Delete package.lock.json file. 
4. run npm cache clean --force command. 
5. run npm install command. 
Or 
1. Delete @syncfusion/ej2-angular-lists package in package.json file and Remove package.lock.json file. 
2. Run npm cache clean --force command and npm install @syncfusion/ej2-angular-lists to install updated Listview package 
 
Please let us know, still if you are facing the issue. 
 
Regards, 
Narayanasamy P. 


Loader.
Live Chat Icon For mobile
Up arrow icon