Forums Home / Wijmo / General Discussion
Posted by: gary.geilow on 5 March 2024, 4:15 am EST
gary.geilow
Posted 5 March 2024, 4:15 am EST
I am using wijmo “@grapecity/wijmo.angular2.all”: “5.20193.646”
I want to use group columns so I am binding [columnGroups] property for grouping, now I want to add filter for the columns
how can I add?
Thanks in advance
vivek.pannu
Posted 5 March 2024, 5:08 pm EST
Hi Gary,
You can attach the FlexGridFilter to the FlexGrid simply by using the FlexGridFilter interop inside the FlexGrid, like this -
<wj-flex-grid [autoGenerateColumns]="false" [columnGroups]="columnGroups" [itemsSource]="data" >
<wj-flex-grid-filter></wj-flex-grid-filter>
</wj-flex-grid>Please note that, you’ll need to import the ‘WjGridFilterModule’ from ‘@grapecity/wijmo.angular2.grid.filter’ module and specify it in the module.ts file imports, to make this work. Please refer to the following code snippet -
...
import { WjGridModule } from '@grapecity/wijmo.angular2.grid';
import { WjGridFilterModule } from '@grapecity/wijmo.angular2.grid.filter';
...
@NgModule({
imports: [BrowserModule, FormsModule, WjGridModule, WjGridFilterModule],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [DataService],
})
export class AppModule {}You can refer to the following sample as per your requirements - https://stackblitz.com/edit/angular-aczpvp?file=src%2Fapp%2Fapp.module.ts
You can also refer to the following demo sample, if needed - https://developer.mescius.com/wijmo/demos/Grid/FilteringSearching/Excel-likeFilter/Overview/angular
You’ll find more demo samples on the same page, you can navigate to other samples from the navigation page on the left side.
Here’s the API link for FlexGridFilter for your reference, if needed - https://developer.mescius.com/wijmo/api/modules/wijmo_angular2_grid_filter.html
https://developer.mescius.com/wijmo/api/classes/wijmo_grid_filter.flexgridfilter.html
In case, you face any issues, please let us know.
Regards
gary.geilow
Posted 10 March 2024, 4:24 pm EST
Thank you Vivek for your response, Can I group them in template?
in html i am want to group I am using “wj-flex-grid-column” for binding.
Thanks
vivek.pannu
Posted 11 March 2024, 5:29 pm EST
Hi Gary,
Yes, you can use the WjFlexGridColumnGroup angular interop for this purpose, you can define your column groups using the component in your .HTML file.
Please refer to the following updated sample for the same - https://stackblitz.com/edit/angular-eubfxd?file=src%2Fapp%2Fapp.component.html
You can also refer to the following demo sample demonstrating the same - https://developer.mescius.com/wijmo/demos/Grid/Columns/ColumnGroupsObjectModel/angular
You can refer to the following API link, if required - https://developer.mescius.com/wijmo/api/classes/wijmo_angular2_grid.wjflexgridcolumngroup.html#asyncbindings
Please note that, you’ll need to upgrade your Wijmo version to use the WjFlexGridColumnGroup, as this feature is not available in Wijmo version - 5.20193.646. This feature was added in Wijmo’s second major release of 2021, i.e. Wijmo 5.2021 v2.
You can refer to the following link for more information regarding this - https://developer.mescius.com/blogs/wijmo-2021-v2-has-landed
It would not be possible to use the flex-grid-column-group interop in the older version, so we recommend you upgrade to the latest Wijmo version to get all new and updated features.
Regards
gary.geilow
Posted 11 March 2024, 6:29 pm EST - Updated 12 March 2024, 3:23 am EST
Getting error “Can’t bind to ‘header’ since it isn’t a known property of ‘wj-flex-grid-column-group’.”
I am using wijmo “@grapecity/wijmo.angular2.all”: “5.20193.646”
Do I need to get new license for latest version?
Thanks
vivek.pannu
Posted 12 March 2024, 10:27 pm EST
Hi Gary,
As we mentioned in our last comment, wj-flex-grid-column-group interop is not supported in Wijmo version - 5.20193.646. The interop support for column groups in flexgrid was added in Wijmo 5.2021 v2 release and hence can be used in Wijmo Version 5.20212.812 and onwards.
You can upgrade your project to the latest Wijmo version to use wj-flex-grid-column-group without any issues. You can contact our sales team for more information regarding the upgrade.
Tel: 1.800.858.2739 | 412.681.4343
Email: us.sales@mescius.com
Regards
gary.geilow
Posted 14 March 2024, 11:50 pm EST
After update to latest I am getting errors
node_modules/@grapecity/wijmo.angular2.input/index.d.ts:2261:18 - error TS2707: Generic type ‘ɵɵComponentDeclaration’ requires between 7 and 8 type arguments.
2261 static ɵcmp: ɵngcc0.ɵɵComponentDeclaration<WjMenuItem, “wj-menu-item”, never, { “wjProperty”: “wjProperty”; “value”: “value”; “cmd”: “cmd”; “cmdParam”: “cmdParam”; }, { “initialized”: “initialized”; }, never, [“*”], false, never>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@grapecity/wijmo.angular2.input/index.d.ts:2273:18 - error TS2707: Generic type ‘ɵɵDirectiveDeclaration’ requires between 6 and 8 type arguments.
2273 static ɵdir: ɵngcc0.ɵɵDirectiveDeclaration<WjMenuItemTemplateDir, “[wjMenuItemTemplateDir]”, never, { “wjMenuItemTemplateDir”: “wjMenuItemTemplateDir”; }, {}, never, never, false, never>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@grapecity/wijmo.angular2.input/index.d.ts:2291:18 - error TS2707: Generic type ‘ɵɵComponentDeclaration’ requires between 7 and 8 type arguments.
2291 static ɵcmp: ɵngcc0.ɵɵComponentDeclaration<WjMenuSeparator, “wj-menu-separator”, never, { “wjProperty”: “wjProperty”; }, { “initialized”: “initialized”; }, never, never, false, never>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@grapecity/wijmo.angular2.input/index.d.ts:2362:18 - error TS2707: Generic type ‘ɵɵDirectiveDeclaration’ requires between 6 and 8 type arguments.
2362 static ɵdir: ɵngcc0.ɵɵDirectiveDeclaration<WjItemTemplate, “[wjItemTemplate]”, [“wjItemTemplate”], { “wjItemTemplate”: “wjItemTemplate”; }, { “initialized”: “initialized”; }, never, never, false, never>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@grapecity/wijmo.angular2.input/index.d.ts:2514:18 - error TS2707: Generic type ‘ɵɵComponentDeclaration’ requires between 7 and 8 type arguments.
2514 static ɵcmp: ɵngcc0.ɵɵComponentDeclaration<WjPopup, “wj-popup”, never, { “wjModelProperty”: “wjModelProperty”; “isDisabled”: “isDisabled”; “tabOrder”: “tabOrder”; “owner”: “owner”; “showTrigger”: “showTrigger”; “hideTrigger”: “hideTrigger”; “fadeIn”: “fadeIn”; “fadeOut”: “fadeOut”; “isDraggable”: “isDraggable”; “isResizable”: “isResizable”; “dialogResultEnter”: “dialogResultEnter”; “dialogResultSubmit”: “dialogResultSubmit”; “modal”: “modal”; “removeOnHide”: “removeOnHide”; }, { “initialized”: “initialized”; “gotFocusNg”: “gotFocus”; “lostFocusNg”: “lostFocus”; “refreshingNg”: “refreshing”; “refreshedNg”: “refreshed”; “invalidInputNg”: “invalidInput”; “showingNg”: “showing”; “shownNg”: “shown”; “hidingNg”: “hiding”; “hiddenNg”: “hidden”; “resizingNg”: “resizing”; “sizeChangingNg”: “sizeChanging”; “sizeChangedNg”: “sizeChanged”; “resizedNg”: “resized”; “draggingNg”: “dragging”; “positionChangingNg”: “positionChanging”; “positionChangedNg”: “positionChanged”; “draggedNg”: “dragged”; }, never, [“*”], false, never>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@grapecity/wijmo.angular2.input/index.d.ts:2548:18 - error TS2707: Generic type ‘ɵɵDirectiveDeclaration’ requires between 6 and 8 type arguments.
2548 static ɵdir: ɵngcc0.ɵɵDirectiveDeclaration<WjContextMenu, “[wjContextMenu]”, [“wjContextMenu”], { “wjContextMenu”: “wjContextMenu”; }, {}, never, never, false, never>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@grapecity/wijmo.angular2.input/index.d.ts:2624:18 - error TS2707: Generic type ‘ɵɵComponentDeclaration’ requires between 7 and 8 type arguments.
2624 static ɵcmp: ɵngcc0.ɵɵComponentDeclaration<WjCollectionViewNavigator, “wj-collection-view-navigator”, never, { “wjModelProperty”: “wjModelProperty”; “isDisabled”: “isDisabled”; “tabOrder”: “tabOrder”; “cv”: “cv”; “byPage”: “byPage”; “headerFormat”: “headerFormat”; “repeatButtons”: “repeatButtons”; }, { “initialized”: “initialized”; “gotFocusNg”: “gotFocus”; “lostFocusNg”: “lostFocus”; “refreshingNg”: “refreshing”; “refreshedNg”: “refreshed”; “invalidInputNg”: “invalidInput”; }, never, never, false, never>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@grapecity/wijmo.angular2.input/index.d.ts:2674:18 - error TS2707: Generic type ‘ɵɵComponentDeclaration’ requires between 7 and 8 type arguments.
2674 static ɵcmp: ɵngcc0.ɵɵComponentDeclaration<WjCollectionViewPager, “wj-collection-view-pager”, never, { “wjModelProperty”: “wjModelProperty”; “cv”: “cv”; }, { “initialized”: “initialized”; }, never, never, false, never>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
I am using angular 14
vivek.pannu
Posted 17 March 2024, 10:38 pm EST
Hi Gary,
These errors are observed after upgrading to the latest Wijmo version because Wijmo no longer provides support for Angular version 14 or earlier, starting from Wijmo build 5.20231.890-rc. This change is due to Angular requiring TypeScript 4.8 and up. While Wijmo itself can function with TypeScript 3.2, Wijmo’s Angular modules must now require TypeScript 4.8 to support the latest Angular releases.
If you wish to use our latest Wijmo build with an older version of Angular i.e. Angular 14 in your case, you can do so by utilizing our legacy packages instead of the Angular2 packages. To access these legacy packages, please add ‘wijmo.angular2legacy.all’ to your package.json file. You can refer to the attached sample for it’s implementation, we have used the legacy packages in the sample.
Regards
