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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Cannot read property 'removeChild' of null

Thread ID:

Created:

Updated:

Platform:

Replies:

147400 Sep 9,2019 03:27 PM UTC Oct 7,2019 09:36 AM UTC Angular - EJ 2 6
loading
Tags: ListView
Emanuele
Asked On September 9, 2019 03:27 PM UTC

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?


Vinoth Kumar Sundara Moorthy [Syncfusion]
Replied On 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 


Emanuele
Replied On 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;
         })
      );

Vinoth Kumar Sundara Moorthy [Syncfusion]
Replied On 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 


Vinoth Kumar Sundara Moorthy [Syncfusion]
Replied On 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 


Emanuele
Replied On 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


Narayanasamy Panneer Selvam [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon