Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
150
How can I implement ignite-ui-web-components with React JS?
posted

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!!! 

  • 720
    Offline posted

    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