jQuery UI Widgets Forums React Render a Table Cell with React JqxLinearGauge

This topic contains 1 reply, has 2 voices, and was last updated by  Hristo 1 week, 5 days ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • TT MM
    Participant

    Using React, I’m trying to render a JqxDataTable cell with a JqxLinearGauge component without much success. Is what I’m trying to do even possible? I’ve stripped down the original version of the code and included what I think is the relevant snippet, depicting my attempt to render a JqxGauge in a table cell below: (Two different cases of cellsrenderer are shown.) (If you notice that the code shouldn’t run, trust me it does — I may have pared it down too much, but the real code runs. It’s the cellsrenderer code that doesn’t deliver for me.)

    Case 1 (using temperate literal with JqxLinearGauge):

    import * as React from "react";
    // import * as ReactDOM from "react-dom";
    
    import JqxDataTable, {
       IDataTableProps,
       jqx,
    } from "jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable";
    import JqxLinearGauge from "jqwidgets-scripts/jqwidgets-react-tsx/jqxlineargauge";
    
    import "jqwidgets-scripts/jqwidgets/styles/jqx.base.css";
    import "jqwidgets-scripts/jqwidgets/styles/jqx.office.css";
    
    import "../../styles/index.css";
    // import cellRendererRange52 from "../renderers/cellRendererRange52";
    
    interface MyState extends IDataTableProps {
       stockWatch?: any;
       isLoggedInToFirebase?: boolean;
       ownSource?: any[];
       ownEditorRenderer?: any;
    }
    class BodComp1 extends React.PureComponent<
       {
          auth2: any;
          loggedInWithGoogle: boolean;
          googleToken: any;
          emailAddress: any;
       },
       MyState
    > {
       stocksRef: any;
       numUpdates: number;
       numRows: number;
       columns: any[];
       dataAdapter: null;
       auth2!: gapi.auth2.GoogleAuth;
       stock: any | undefined;
       emailAddress: string | undefined;
    
       private myDataTable = React.createRef<JqxDataTable>();
       private myLinearGauge = React.createRef<JqxLinearGauge>();
    
       constructor(props: {
          auth2: any;
          loggedInWithGoogle: boolean;
          googleToken: any;
          emailAddress: any;
       }) {
          super(props);
          this.stocksRef = "";
          this.numUpdates = 0;
          this.numRows = 0;
          this.columns = [];
          this.dataAdapter = null;
    
          this.state = {
             stockWatch: [],
             isLoggedInToFirebase: false,
             editSettings: {
                cancelOnEsc: true,
                editOnDoubleClick: true,
                editOnF2: true,
                editSingleCell: true,
                saveOnBlur: true,
                saveOnEnter: true,
                saveOnPageChange: true,
                saveOnSelectionChange: true,
             },
          };
          this.getAppBodyContent = this.getAppBodyContent.bind(this);
       }
    
       componentDidMount() {}
    
       onCollectionUpdate = (querySnapshot: any) => {
          // console.log(<code>In onCollectionUpdate() <${util.inspect(querySnapshot)}></code>);
          this.numUpdates++;
          let stockWatch: any[] = [];
          this.numRows = 0;
          querySnapshot.forEach(
             (doc: {
                data: () => {
                   companyName: any;
                   latestPrice: any;
                   symbol: any;
                   range52: any;
                };
                id: any;
             }) => {
                const { companyName, latestPrice, symbol, range52 } = doc.data();
                stockWatch.push({
                   key: doc.id,
                   doc, // DocumentSnapshot
                   companyName,
                   latestPrice,
                   symbol,
                   range52,
                });
             }
          );
          this.setState({
             stockWatch,
          });
          this.numRows++;
       };
    
       getAppBodyContent() {
          const source = {
             datafields: [
                { name: "companyName", type: "string" },
                { name: "symbol", type: "string" },
                { name: "latestPrice", type: "float" },
                { name: "range52", type: "string" },
             ],
             id: "key",
             dataType: "json",
             localData: () => {
                let data: any[] = [];
                let i = 0;
    
                this.state.stockWatch.forEach((s: any) => {
                   data[i++] = {
                      key: s.key,
                      companyName: s.companyName,
                      symbol: s.symbol,
                      latestPrice: s.latestPrice,
                      range52: s.range52,
                   };
                   this.numRows++;
                });
                return data;
             },
          };
          this.dataAdapter = new jqx.dataAdapter(source);
          // --
          const columnWidths = [
             ["companyNameWidth", 200],
             ["tickerWidth", 64],
             ["currPriceWidth", 90],
             ["range52Width", 115],
          ];
    
          this.columns = [
             {
                text: "Company Name",
                datafield: "companyName",
                width: columnWidths[2][1],
                align: "center",
                editable: false,
             },
             {
                text: "Symbol",
                datafield: "symbol",
                width: columnWidths[3][1],
                editable: false,
             },
             {
                text: "Curr. Price",
                datafield: "latestPrice",
                align: "center",
                width: columnWidths[4][1],
                cellsalign: "right",
                cellsformat: "c2",
                editable: false,
             },
             {
                text: "52W Range",
                datafield: "range52",
                width: columnWidths[14][1],
                editable: false,
                align: "center",
                cellsalign: "center",
                cellsrenderer: (
                   row: any,
                   column: any,
                   value: any,
                   rowData: any
                ): any => {
                      return " <-- this is really a back-tick, but it clobbers the code formatting of this post
    
                            ${(
                               <JqxLinearGauge>
                                  ref={this.myLinearGauge}
                                  width={"99px"}
                                  height={"25px"}
                                  orientation={"horizontal"}
                                  min={0}
                                  value={66}
                                  max={100}
                                  ticksPosition={"both"}
                               </JqxLinearGauge>
                            )}
                        "; <-- this is really a back-tick, but it clobbers the code formatting of this post
                }, //cellsrenderer closing bracket
             },
          ];
          return (
             <JqxDataTable
                ref={this.myDataTable}
                width={1100}
                theme={"office"}
                source={this.dataAdapter}
                columns={this.columns}
                filterable={true}
                pageable={true}
                pagerMode={"advanced"}
                altRows={true}
                autoRowHeight={true}
                height={this.numRows > 10 ? 650 : this.numRows * 59 + 190}
                sortable={true}
                columnsReorder={true}
                columnsResize={true}
                editable={true}
                key={this.numUpdates} // this forces a re-render of the table!
                editSettings={this.state.editSettings}
                pageSizeOptions={[5, 10, 25, 30, 50]}
                pageSize={30}
             />
          );
       }
    
       public render() {
          return <div>{this.getAppBodyContent()}</div>;
       }
    }
    
    export default BodComp1;

    Running the snippet above renders the following in the cell: [object Object]
    Obviously, not what I want.

    —————————-
    Case 2 (cellsrenderer does not return anything, but it tries to render the JqxLinearGauge in the appropriate cell of the table; i.e., the parent element of the linear gauge):

                   cellsrenderer: (
                      row: any,
                      column: any,
                      value: any,
                      rowData: any
                   ): any => {
                      const theRange52Cell = document.querySelector(
    body > div:nth-of-type(1) > div > div > div > div:nth-of-type(2) > div > div:nth-of-type(4) > div:nth-of-type(2) > div > table:nth-of-type(2) > tbody > tr:nth-of-type(${row +
                            1}) > td:nth-of-type(11)
                      );
                      ReactDOM.render(
                         <JqxLinearGauge>
                            ref={this.myLinearGauge}
                            width={"99px"}
                            height={"25px"}
                            orientation={"horizontal"}
                            min={0}
                            value={66}
                            max={100}
                            ticksPosition={"both"}
                         </JqxLinearGauge>,
                         theRange52Cell
                      );
                   }, //cellsrenderer closing bracket

    Running the snippet above did not render the table because of the following error:
    Error: Minified React error #200; which translates into: Target container is not a DOM element.

    I believe it’s telling me that the cell doesn’t yet exist yet at the time I’m trying to render the JqxLinearGauge.
    (By the way, I pulled the css querySelector Xpath from the chrome inspector when the table rendered properly using the value, so I know that is correct.)

    Any suggestions? Is this even possible?

    Thanks,
    Tony

    • This topic was modified 2 weeks ago by  TT MM.
    • This topic was modified 2 weeks ago by  TT MM. Reason: trying to fix the template literal since it uses a tick mark that marks it as code
    • This topic was modified 2 weeks ago by  TT MM.

    Hristo
    Participant

    Hello Tony,

    The cellsRenderer callback is used to transform the data represented in the cells typically.
    Another option that you could use is rendered callback.
    Please, take a look at the approach used in the demo below:
    https://www.jqwidgets.com/react/react-datatable/react-datatable-rowtemplate.htm?material

    Also, if you do not have a specific reason to use the jqxDataTable then I would like to suggest another approach.
    But for this reason, you need to use the jqxGrid and its createwidget and initwidget callbacks.
    I would like to suggest you look at this demo and to visualize the wanted widget you could use the render” method of the React to visualize it.
    I hope this will help.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.