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

Filter bar template with multiselect => Cannot read property 'insertBefore' of null

Thread ID:

Created:

Updated:

Platform:

Replies:

144922 May 28,2019 09:50 PM UTC Jun 3,2019 09:40 AM UTC Angular - EJ 2 5
loading
Tags: Grid
Viktor
Asked On May 28, 2019 09:50 PM UTC

Hi,
is it possible to add multiselect component for a particular column ?
i have tried to modify the sample you have provided but unfortunately without success.
https://ej2.syncfusion.com/angular/documentation/grid/filtering/?no-cache=1#filter-bar-template-with-custom-component

the code looks like something like this (or see attachment):

 const dd = document.createElement('input');
        dd.id = 'OrderID';
        const source: string[] = ['All', '1', '3', '4', '5', '6', '8', '9'];      
        const msObject: MultiSelect = new MultiSelect({
          dataSource:source
        });
        msObject.appendTo(dd);
        return msObject;


nd exception:

core.js:14597 ERROR TypeError: Cannot read property 'insertBefore' of null
    at MultiSelect.push../node_modules/@syncfusion/ej2-dropdowns/src/multi-select/multi-select.js.MultiSelect.render (multi-select.js:2792)
    at MultiSelect.push../node_modules/@syncfusion/ej2-base/src/component.js.Component.appendTo (component.js:130)
    at create (app.component.ts:64)
    at FilterCellRenderer.push../node_modules/@syncfusion/ej2-grids/src/grid/renderer/filter-cell-renderer.js.FilterCellRenderer.render (filter-cell-renderer.js:85)
    at _loop_1 (row-renderer.js:82)
    at RowRenderer.push../node_modules/@syncfusion/ej2-grids/src/grid/renderer/row-renderer.js.RowRenderer.refreshRow (row-renderer.js:114)
    at RowRenderer.push../node_modules/@syncfusion/ej2-grids/src/grid/renderer/row-renderer.js.RowRenderer.render (row-renderer.js:27)
    at Filter.push../node_modules/@syncfusion/ej2-grids/src/grid/actions/filter.js.Filter.render (filter.js:70)
    at Observer.push../node_modules/@syncfusion/ej2-base/src/observer.js.Observer.notify (observer.js:89)
    at GridComponent.push../node_modules/@syncfusion/ej2-base/src/component.js.Component.notify (component.js:189)
    
    
thanks!
regards
viktor
PS
maybe it has something to do with the dynamic columns or is this not supported yet? 

Attachment: SfGridAsyncTemplate_Filtering_327e4cff.zip

Pavithra Subramaniyam [Syncfusion]
Replied On May 29, 2019 12:22 PM UTC

Hi Viktor, 
 
Thanks for contacting Syncfusion support. 
 
We have checked your query and you can resolve the reported issue by using the below way. We have prepared a sample to achieve your requirement and we suggest you to use custom component code within the write function and you can filter the data by selected values in the multiselect component by using the select event. Please refer the following code, sample link and documentation link. 
 
[app.component.ts] 
export class AppComponent implements OnInit, AfterViewInit { 
    
  public data: Observable<DataStateChangeEventArgs>; 
  public pageOptions: Object; 
  public state: DataStateChangeEventArgs; 
  constructor(public service: OrdersService) { 
    this.data = service; 
  } 
 
  templateOptions: IFilterUI; 
  public columns: any; 
 @ViewChild('grid') grid: GridComponent; 
  @ViewChild('template1') template1: NgModel; 
  @ViewChild('template2') template2: NgModel; 
 
  public dataStateChange(state: DataStateChangeEventArgs): void { 
  this.service.execute(state); 
  } 
  public ngOnInit(): void { 
    this.pageOptions = { pageSize: 5, pageCount: 4 }; 
    const state = { skip: 0, take: 20 }; 
    this.service.execute(state);     
    this.columns = [ 
      { field: 'OrderID', headerText: 'Order ID', isPrimaryKey: true, width: 120, textAlign: 'Right' }, 
      .   .   .   .   . 
    ]; 
 
    this.templateOptions = { 
      create: (args: { element: Element, column: Column }) => { 
        const dd = document.createElement('input'); 
        dd.id = 'CustomerID'; 
        return dd; 
      }, 
      write: (args: { element: Element, column: Column }) => { 
        const source: string[] = ['All', 'VINET', 'HANAR', 'VICTE']; 
        const msObject: MultiSelect = new MultiSelect({ 
            dataSource: source, 
            select(e: any) { 
                   // here you can filter the column from you custom data with selected value.  
            } 
          }); 
          msObject.appendTo(args.element as any); 
        args.element.addEventListener('input', (args1: Event): void => { 
          const target: HTMLInputElement = args1.currentTarget as HTMLInputElement; 
          if (target.value !== 'All') { 
            const value = + +target.value; 
            this.grid.filterByColumn(target.id, 'equal', value); 
          } else { 
            this.grid.removeFilteredColsByField(target.id); 
          } 
        }); 
      }, 
    }; 
  } 
  ngAfterViewInit(): void { 
    .   .   .   . 
  } 
} 
 
                                https://ej2.syncfusion.com/angular/documentation/grid/observables/#handling-grid-actions 
 
Please get back to us for further assistance. 
 
Regards, 
Pavithra S. 
 


Viktor
Replied On May 30, 2019 08:14 AM UTC

hi,
thank you for your quick response!
your tip was very helpful.
but!
it doesn't work if the property "frozenColumns" is set to equal or greater than 1 (:
the rendering of the multiselect component (or dropdown) seems to be blocked.
i have attached the sample so that you can easilly reproduce the problem

thanks
regards
viktor


Attachment: SfGrid_Async_Template_Filtering_FrozenColumns_3f06afd8.zip

Thavasianand Sankaranarayanan [Syncfusion]
Replied On May 31, 2019 12:19 PM UTC

Hi Viktor,  

Sorry for the inconvenience caused. 

Query: “it doesn't work if the property "frozenColumns" is set to equal or greater than 1 (: 

We are able to reproduce the reported issue at our end. In the Write function for the filterbartemplate MultiSelectComponent is not appended properly to element. Hence the reported issue occur. So to overcome the reported issue, we suggest you to use the below modified code to achieve your requirement. 

this.templateOptions = { 
      create: (args: { element: Element, column: Column }) => { 
        const dd = document.createElement('input'); 
        dd.id = 'OrderID'; 
       return dd; 
      }, 
      write: (args: { element: Element, column: Column }) => { 
setTimeout(function(){ 
        const source: string[] = ['All', 'VINET', 'HANAR', 'VICTE']; 
        const msObject: MultiSelect = new MultiSelect({ 
          dataSource: source, 
          select(e: any) { 
            // here you can filter the column from you custom data with selected value.   
          } 
        }); 
        msObject.appendTo("#OrderID");  
      },0)  
      }, 
    }; 
  } 

   
Please get back to us if you have further queries.  

Regards, 
Thavasianand S. 


Viktor
Replied On May 31, 2019 09:18 PM UTC

Hi,
first of all, i would like to thank you for your support!
i really appreciate it.
yes, your suggestion did the trick.
thanks!
but!: )
it seems that the MultiSelectComponent doesnt work if the property "Mode" is set to "CheckBox".
it results in exception can not ready property "setAttribute" of null (see screenshot below).
and as usual i have prepared a sample so that you can easily reproduce the problem.
regards
viktor




Attachment: SfGridAsyncTemplate_Filtering_e8e45d20.zip

Pavithra Subramaniyam [Syncfusion]
Replied On June 3, 2019 09:40 AM UTC

Hi Viktor, 
 
To use checkbox mode when multiselect component is rendered with typescript, you need to inject the CheckBoxSelection module in the MultiSelect component. Please refer to the below code example , documentation link and sample link for more information. 
 
import { MultiSelect, CheckBoxSelection } from '@syncfusion/ej2-dropdowns'; 
 
MultiSelect.Inject(CheckBoxSelection); 
 
 
@Component({ 
  selector: 'app-root', 
  templateUrl: './app.component.html' 
}) 
export class AppComponent implements OnInit, AfterViewInit { 
    
     this.templateOptions = { 
      .  .  . 
      write: (args: { element: Element, column: Column }) => { 
        setTimeout(() => { 
          const source: string[] = ['All', 'VINET', 'HANAR', 'VICTE']; 
          const msObject: MultiSelect = new MultiSelect({ 
            dataSource: source, 
            mode:"CheckBox",  
            open:(e)=>{ 
              if (parentsUntil(msObject.element,'e-filterbarcell').getAttribute('tabindex') === '-1') { 
                parentsUntil(msObject.element,'e-filterbarcell').setAttribute('tabindex', '0'); 
             }           
            }, 
            close:(e)=>{ 
              if (parentsUntil(msObject.element,'e-filterbarcell').getAttribute('tabindex') === '0') { 
                parentsUntil(msObject.element,'e-filterbarcell').setAttribute('tabindex', '-1'); 
                e.cancel = true; 
            }           
            } 
          }); 
          msObject.appendTo("#OrderID");  
        }, 0); 
         
      }, 
    }; 
  } 
 
 
Note: You need to bind open and close event for multi select with checkbox mode while using in filterbar template to handle the tab index.   
 
                              https://ej2.syncfusion.com/documentation/api/multi-select#open 
                              https://ej2.syncfusion.com/documentation/api/multi-select#close 
 
 
Please get back to us if you need any further assistance on this. 
 
Regards, 
Pavithra S. 


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