Hi
I am trying to implement the concept of advance filtering in my React App which is there in ignite-ui-web-components(https://es.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/grid/advanced-filtering) but I am not getting how it can be done as I am facing issues while implementing it and there is no such reference for how to use web components with react.
I am trying to implement the advance filtering in react like this but this format is not working:-
import 'igniteui-webcomponents-grids/grids/combined'; import { ComponentRenderer, ModuleManager, WebGridDescriptionModule } from 'igniteui-webcomponents-core'; import { IgcGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids'; import { NwindDataItem, NwindDataItem_LocationsItem, NwindData } from './NwindData'; import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids'; import { html, nothing } from 'lit-html'; import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css"; import React from 'react'; export default class DataGridBindingLocalData extends React.Component<any, any>{ private grid: IgcGridComponent; private column1: IgcColumnComponent; private _bind: () => void; constructor(props: any) { super(props); var grid = this.grid = document.getElementById('grid') as IgcGridComponent; var column1 = this.column1 = document.getElementById('column1') as IgcColumnComponent; this._bind = () => { grid.data = this.nwindData; } this._bind(); } private _nwindData!: NwindData; public get nwindData(): NwindData { if (this._nwindData == null) { this._nwindData = new NwindData(); } return this._nwindData; } private _componentRenderer!: ComponentRenderer; public get renderer(): ComponentRenderer { if (this._componentRenderer == null) { this._componentRenderer = new ComponentRenderer(); var context = this._componentRenderer.context; WebGridDescriptionModule.register(context); } return this._componentRenderer; } public render(): JSX.Element { return ( <> <igc-grid auto-generate="false" primary-key="ProductID" row-editable="true" allow-filtering="true" batch-editing="true" name="grid" id ="grid"> <igc-action-strip name="actionStrip" id ="actionStrip"> <igc-grid-pinning-actions > </igc-grid-pinning-actions> <igc-grid-editing-actions edit-row="true" delete-row="false"> </igc-grid-editing-actions> </igc-action-strip> <igc-pinning-config rows="Top"> </igc-pinning-config> <igc-column field="ProductName" header="Product Name" name="ProductName" id ="ProductName"> </igc-column> <igc-column name="UnitPrice" id ="UnitPrice" field="UnitPrice" header="Unit Price"> </igc-column> <igc-column name="UnitsOnOrder" id ="UnitsOnOrder" field="UnitsOnOrder" header="Units On Order"> </igc-column> <igc-column name="UnitsInStock" id ="UnitsInStock" field="UnitsInStock" header="Units In Stock"> </igc-column> <igc-column name="QuantityPerUnit" id ="QuantityPerUnit" field="QuantityPerUnit" header="Quantity Per Unit"> </igc-column> <igc-column name="ReorderLevel" id ="ReorderLevel" field="ReorderLevel" header="Reorder Level"> </igc-column> <igc-column name="Discontinued" id ="Discontinued" field="Discontinued" header="Discontinued"> </igc-column> </igc-grid> </> ); } }
If someone can suggest the right way or the correct approach to use web components features with react then it would be great.
Hoping for a positive response.
Thanks!!!
Hello Avanish,
Thank you for contacting Infragistics Support!
Attached could be found a small sample, which demonstrates how to use the IgniteUI for WebComponents grid within react project. Please note that as stated in our documentation in order to use the igcGrid the following packages should be installed:
igniteui-webcomponents-core igniteui-webcomponents-grids igniteui-webcomponents-inputs igniteui-webcomponents-layouts
In addition, a useful resources about using Web Components in React application in general can be found below:
https://reactjs.org/docs/web-components.html web-highlights.com/.../
However, since the approaches described in the above resources are not directly related to the IgniteUI for Webcomponents product, you will not find them implemented in the attached sample.
Please note that in future version we are planning to provide a react wrapper of the igcGrid which will make the setup process easier.
Please let me know if you need any further assistance.
Best Regards, Martin Evtimov Software Developer Infragistics, Inc.
react-with-igniteui-web-components.zip