1. Home
  2. Forum
  3. Angular - EJ 2
  4. Dynamically change complex columns

Dynamically change complex columns

Hello,

I'm running into an issue when trying to dynamically change the columns in the Query Builder.

Example app:
https://stackblitz.com/edit/angular-59nuhv-efrn3s

The goal is to eventually set multiple ColumnsModel objects via API call and allow the user to toggle between them.

This appears to work with a flat ColumnsModel object. But when using complex columns (User2 -> ID2 or Name2) is selected, it renders a blank white box and throws JS error.

Is there a bug in my implementation? Or an alternative approach to the example shown? Please advise.

Thank you!

Luke


7 Replies
YA YuvanShankar Arunagiri Syncfusion Team June 21, 2022 07:34 AM UTC

Hi Luke,


We have validated your reported query and done some code change in your provided sample. Please use the fieldMode and separator property of query builder when we use complex type column data source. Please refer the below code snippet and sample.

[app.component.html]:

<ejs-querybuilder #querybuilder class="row" [columns]="filter" [fieldMode]="fieldMode" [separator]="separator"></ejs-querybuilder>


[app.component.ts]:

separator: string = '.';

fieldMode: FieldMode = 'DropdownTree';


Sample link: https://stackblitz.com/edit/angular-59nuhv-c9ckt4?file=app.component.html,app.component.ts


Could you please check the above code and get back to us, if you need any further assistance on this. 


Regards,

YuvanShankar A


LA Luke Adams June 21, 2022 12:31 PM UTC

Hi YuvanShankar,

Thank you for the response!

I'm getting an error in your sample link and not able to see it functioning:

Error in ~/src/main.ts

ngcc failed to run on @syncfusion/[email protected], @syncfusion/[email protected], @syncfusion/[email protected], @syncfusion/[email protected], @syncfusion/[email protected], @syncfusion/[email protected], @syncfusion/[email protected], @syncfusion/[email protected], @syncfusion/[email protected], @syncfusion/[email protected], @syncfusion/[email protected], @syncfusion/[email protected], @syncfusion/[email protected].


I did apply your highlighted changes to my sample. But this doesn't appear to fix the issue. Once I toggle to filter2, select a field from the dropdown, I see the blank white box and JS error.

My updated sample link: https://stackblitz.com/edit/angular-59nuhv-efrn3s

Also, is there a way to use the default fieldMode that separates the complex/child columns from the parent? If not, I can work with the DropdownTree mode, but I like the default view of separate dropdown inputs.


Thank you!

Luke


YA YuvanShankar Arunagiri Syncfusion Team June 24, 2022 02:29 PM UTC

Hi Like,


We can reproduce your reported issue at our end. So, we have confirmed this as an issue and logged a bug report for this. The fix will be available in our upcoming patch release which is scheduled on 6th July 2022.


Regards,

YuvanShankar A


LA Luke Adams June 24, 2022 02:34 PM UTC

Hi YuvanShankar,

Thank you for the update!

I'm glad to hear that this will be resolved soon. I hope the solution may work with the default (DropDownList?) FieldMode. But we'll be happy with either.

Thank you,
Luke


YA YuvanShankar Arunagiri Syncfusion Team June 29, 2022 05:33 AM UTC

Hi Luke,


Query: I hope the solution may work with the default (DropDownList?) FieldMode?


We have prepared the sample based on your requirement. Please refer the below sample link.

Sample link: https://stackblitz.com/edit/angular-atxzhx?file=app.component.ts

Could you please check the above sample and get back to us, if you need any further assistance on this. 


Regards,

YuvanShankar A


LA Luke Adams July 13, 2022 07:51 PM UTC

Hi YuvanShankar,

Thank you for responding and resolving the issue reported. I am able to use the updated version with the DropDownList/Default FieldMode successfully!

Thanks,

Luke


YA YuvanShankar Arunagiri Syncfusion Team July 14, 2022 08:27 AM UTC

Hi Like,


Thanks for the patience.


We are glad to announce that our weekly patch release (20.2.38) is rolled out. We have included the fix for this issue in this release. So, we suggest you upgrade our Syncfusion packages to our latest version to resolve this issue in your end. (20.2.38).


Sample link: https://stackblitz.com/edit/angular-59nuhv-e6wqkk?file=app.component.ts


Now, you can dynamically change the column item both default(dropdownlist) and dropdowntree mode.

Please get back to us if you need further assistance on this.


Regards,

YuvanShankar A


Loader.
Up arrow icon