jQXWindwo .js throwing an error h undefined

[walker1234Participant]

I have the following code working properly except when I click on the following button inside projectSpacedGrid function, I get errors in the browser’s console as shown below the code:

<Button
                label="Associate Project Spaces"
                icon="pi pi-plus"
                style={{ marginRight: ".25em", marginTop: ".25em" }}
                onClick={e =>
                  this.setState({
                    assocAssetsVisible: true
                  })
                }
              />

Here’s my full code( I’ve removed lot of code to keep it as small as possible):

`import React from “react”;
import * as ReactDOM from “react-dom”;
import JqxTabs from “jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs”;
import JqxGrid, {
IGridProps,
jqx
} from “jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid”;
import JqxButton from ‘jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons’;
import JqxInput from ‘jqwidgets-scripts/jqwidgets-react-tsx/jqxinput’;
import JqxDateTimeInput from ‘jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput’;
import JqxWindow from ‘jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow’;
import JqxDropDownList, { IDropDownListProps } from ‘jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownlist’;
import JqxNotification from ‘jqwidgets-scripts/jqwidgets-react-tsx/jqxnotification’;
import { Button } from “primereact/button”;
import { Growl } from “primereact/growl”;
import { properties } from “.././properties”;
import { Messages } from “primereact/messages”;
import axios from “axios/index”;

type Props = {
project,
username
};

export interface AssetsState extends IGridProps {
//export interface AssetsState extends IDropDownListProps {
visible: boolean,
assocAssetsVisible: boolean,
project: {},
selectedAsset: [],
addEditLabel: {},
selectedRowIndex: number,
deleteDialogVisible: boolean,
dropdownlistSource:IDropDownListProps[“source”];
rendertoolbar: (toolbar: any) => void;

}

export class Assets extends React.PureComponent<Props, AssetsState> {
private growl = React.createRef<Growl>();

//Created Refs for a particular div
private projectSpacesGridElement = React.createRef<HTMLDivElement>();

//Created Refs for the desired widgets (JQXGrid and JQXTabs)
private assetsDataGrid = React.createRef<JqxGrid>();
private myTabs = React.createRef<JqxTabs>();

//Created Refs for editing popups for project spaces tab
private assetsEditWindow = React.createRef<JqxWindow>();

private assetsAddWindow = React.createRef<JqxWindow>();
private id = React.createRef<JqxInput>();
private assetsTypeId = React.createRef<JqxInput>();
private assetCategoryId = React.createRef<JqxInput>();
private locationTypeId = React.createRef<JqxInput>();
private statusIndicatorId = React.createRef<JqxInput>();
private uri = React.createRef<JqxInput>();
private fileName = React.createRef<JqxInput>();
private fileAddCDSName = React.createRef<JqxInput>();
private fileVersion = React.createRef<JqxInput>();
private fileEncodingId = React.createRef<JqxInput>();
private ownerId = React.createRef<JqxInput>();
private createdDate = React.createRef<JqxDateTimeInput>();
private updatedDate = React.createRef<JqxDateTimeInput>();
private createdBy = React.createRef<JqxInput>();
private assetDescription = React.createRef<JqxInput>();
private assetCDSDescription = React.createRef<JqxInput>();

private msgNotification = React.createRef<JqxNotification>();
private firstTabButtonContent = “Add New Project Space “;
private editrow: number = -1;

private baseUrl = properties.baseUrlWs;
private messages = React.createRef<Messages>();

constructor(props: Props) {
super(props);
this.saveEditCDSBtn = this.saveEditCDSBtn.bind(this);
this.cancelEditCDSBtn = this.cancelEditCDSBtn.bind(this);
this.savenewCDSpaceBtn = this.savenewCDSpaceBtn.bind(this);
this.cancelnewCDSpaceBtn = this.cancelnewCDSpaceBtn.bind(this);

const rendertoolbar = (toolbar: any): void => {
const addPSRowClick = () => {
this.assetsAddWindow.current!.open();
};
ReactDOM.render(
<div style={{ margin: ‘5px’ }}>
<div id=”button1” style={{ float: ‘left’ }}>
<JqxButton theme={‘material’} onClick={addPSRowClick} width={155} value={‘Add Project Space’} />
</div>
</div>,
toolbar[0]
);
};

this.state = {
visible: false,
project: {},
assocAssetsVisible: false,
selectedAsset: [],
addEditLabel: {},
selectedRowIndex: null,
deleteDialogVisible: false,
rendergridrows: (params: any): any[] => {
const data = params.data;
return data;
},
rendertoolbar,
dropdownlistSource:[
{value:0, label:’Individual’},
{value:1, label:’Project’},
{value:2, label:’Institution’},
{value:3, label:’Public’}
]
};
}

public render() {
console.log(this.state.selectedAsset);
return (
<div>
<JqxTabs
ref={this.myTabs}
theme={“arctic”}
width=”1390px”
//height={560}
//height={100}
initTabContent={this.initWidgets}
onSelected={this.onTabSelected}
>
<ul>
<li style={{ marginLeft: 30 }}>
<div style={{ height: 20, marginTop: 5 }}>
<div style={{ float: “left” }}></div>
<div
style={{
marginLeft: 4,
verticalAlign: “middle”,
textAlign: “center”,
float: “left”
}}
>
Project Spaces
</div>
</div>
</li>
</ul>
<div style={{ overflow: “hidden” }}>
<div id=”jqxGrid” ref={this.projectSpacesGridElement} />
<div style={{ marginTop: 10, height: “15%”, width: “100%” }}></div>
</div>

</JqxTabs>
<JqxWindow ref={this.assetsEditWindow} width={250} height={230} resizable={false}
isModal={false} autoOpen={false} modalOpacity={‘0.01’} position={{ x: 68, y: 368 }}>
<div>Edit</div>
<div style={{ overflow: ‘hidden’ }}>
<table>
<tbody>
<tr>
<td align={‘right’}>Name :</td>
<td align={‘left’}>
<JqxInput ref={this.fileName} width={150} height={23} />
</td>
</tr>
<tr>
<td align={‘right’}>Version:</td>
<td align={‘left’}>
<JqxInput ref={this.fileVersion} width={150} height={23} />
</td>
</tr>
<tr>
<td align={‘right’}>Description:</td>
<td align={‘left’}>
<JqxInput ref={this.assetDescription} width={150} height={23} />
</td>
</tr>
<tr>
<td align={‘right’}>Visibility Indicator:</td>
<td align={‘left’}>
{/* <JqxInput ref={this.visibilityIndicatorID} width={150} height={23} /> */}
<JqxDropDownList width={100} height={20} source={this.state.dropdownlistSource} selectedIndex={0} autoDropDownHeight={true}/>
</td>
</tr>

<tr hidden>
<td align={‘right’}>ID:</td>
<td align={‘left’}>
<JqxInput ref={this.id} width={150} height={23} />
</td>
</tr>
<tr hidden>
<td align={‘right’}>Location Type ID:</td>
<td align={‘left’}>
<JqxInput ref={this.locationTypeId} width={150} height={23} />
</td>
</tr>
<tr hidden>
<td align={‘right’}>Asset Category ID:</td>
<td align={‘left’}>
<JqxInput ref={this.assetCategoryId} width={150} height={23} />
</td>
</tr>
<tr hidden>
<td align={‘right’}>Asset Type ID:</td>
<td align={‘left’}>
<JqxInput ref={this.assetsTypeId} width={150} height={23} />
</td>
</tr>
<tr hidden>
<td align={‘right’}>Status Indicator ID:</td>
<td align={‘left’}>
<JqxInput ref={this.statusIndicatorId} width={150} height={23} />
</td>
</tr>
<tr hidden>
<td align={‘right’}>URI:</td>
<td align={‘left’}>
<JqxInput ref={this.uri} width={150} height={23} />
</td>
</tr>
<tr hidden>
<td align={‘right’}>File Encoding ID:</td>
<td align={‘left’}>
<JqxInput ref={this.fileEncodingId} width={150} height={23} />
</td>
</tr>
<tr hidden>
<td align={‘right’}>Owner ID:</td>
<td align={‘left’}>
<JqxInput ref={this.ownerId} width={150} height={23} />
</td>
</tr>
<tr hidden>
<td align={‘right’}>Created Date:</td>
<td align={‘left’}>
<JqxDateTimeInput ref={this.createdDate}
width={150} height={23} formatString={‘F’} />
</td>
</tr>
<tr hidden>
<td align={‘right’}>Updated Date:</td>
<td align={‘left’}>
<JqxDateTimeInput ref={this.updatedDate}
width={150} height={23} formatString={‘F’} />
</td>
</tr>
<tr hidden>
<td align={‘right’}>Created By:</td>
<td align={‘left’}>
<JqxInput ref={this.createdBy} width={150} height={23} />
</td>
</tr>

<tr>
<td align={‘right’} />
<td style={{ paddingTop: ’10px’ }} align={‘right’}>
<JqxButton style={{ display: ‘inline-block’, marginRight: ‘5px’ }} onClick={this.saveEditCDSBtn} width={50}>
Save
</JqxButton>
<JqxButton style={{ display: ‘inline-block’, marginRight: ‘5px’ }} onClick={this.cancelEditCDSBtn} width={50}>
Cancel
</JqxButton>
</td>
</tr>
</tbody>
</table>
</div>
</JqxWindow>
<JqxWindow ref={this.assetsAddWindow} width={250} height={230} resizable={false}
isModal={false} autoOpen={false} modalOpacity={‘0.01’} position={{ x: 68, y: 368 }}>
<div>{this.firstTabButtonContent}</div>
<div style={{ overflow: ‘hidden’ }}>
<table>
<tbody>
<tr>
<td align={‘right’}>Name:</td>
<td align={‘left’}>
<JqxInput ref={this.fileAddCDSName} width={150} height={23} />
</td>
</tr>
<tr>
<td align={‘right’}>Description:</td>
<td align={‘left’}>
<JqxInput ref={this.assetCDSDescription} width={150} height={23} />
</td>
</tr>
<tr>
<td align={‘right’}>Visibility Indicator:</td>
<td align={‘left’}>
<JqxDropDownList width={100} height={20} source={this.state.dropdownlistSource} selectedIndex={0} autoDropDownHeight={true} />
</td>
</tr>

<tr>
<td align={‘right’} />
<td style={{ paddingTop: ’10px’ }} align={‘right’}>
<JqxButton style={{ display: ‘inline-block’, marginRight: ‘5px’ }} onClick={this.savenewCDSpaceBtn} width={50}>
Save
</JqxButton>
<JqxButton style={{ display: ‘inline-block’, marginRight: ‘5px’ }} onClick={this.cancelnewCDSpaceBtn} width={50}>
Cancel
</JqxButton>
</td>
</tr>
</tbody>
</table>
</div>
</JqxWindow>
<JqxNotification ref={this.msgNotification}
width={250} position={‘top-left’} opacity={0.9} autoOpen={false}
autoClose={true} animationOpenDelay={800} autoCloseDelay={3000} template={‘info’} appendContainer={‘#forNotification’}>
<div>
Record Deleted Successfully!
</div>
</JqxNotification>

</div>

);
}

//Tab 1
private projectSpacesGrid = () => {
const source: any = {
datafields: [
{ name: “id”, type: “long” },
{ name: “assetsTypeId”, type: “long” },
{ name: “fileName”, type: “string” },
{ name: “locationTypeId”, type: “long” },
{ name: “uri”, type: “string” },
{ name: “fileVersion”, type: “string” },
{ name: “fileEncodingId”, type: “long” },
{ name: “ownerId”, type: “long” },
{ name: “createdDate”, type: “date”,format: “dd-MMM-yy” },
{ name: “assetCategoryId”, type: “long” },
{ name: “assetDescription”, type: “string” },
{ name: “createdBy”, type: “string” },
{ name: “updatedDate”, type: “date”,format: “dd-MMM-yy” },
{ name: “statusIndicatorId”, type: “long” },
{ name: “visibilityIndicatorId”, type: “long” },
{ name: “displayedValues”, type: “string” }
],
deleterow: (rowid: number,commit:any): void => {
console.log(“Delete row method called in source of Project Spaces”);
console.log(“Role ID:” + rowid);
commit(true);
},
datatype: “json”,
root: “assets”,
url: this.baseUrl + api/assets/search/getAssetsByProjectId
};
const dataAdapter = new jqx.dataAdapter(source, {
//async: false,
autoBind: true,
downloadComplete: (data: any, status: any, xhr: any): void => {
source.totalrecords = parseInt(data[“page”].totalElements);
console.log(“Total Assets Records check”+source.totalrecords);

},
formatData: (data: any): any => {
data.value = this.props.project.id;
data.page = data.pagenum;
data.size = data.pagesize;
if (data.sortdatafield && data.sortorder) {
data.sort = data.sortdatafield + “,” + data.sortorder;
}
return data;
},
loadError: (xhr: any, status: any, error: any) => {
alert(‘Error loading “‘ + source.url + ‘” : ‘ + error);
}
});
const columns: IGridProps[“columns”] = [
{ datafield: “id”, text: “ID Number”, width: 100,hidden:true },
{ datafield: “assetsTypeId”, text: “Assets Type ID”, width: 100, hidden: true },
{ datafield: “fileName”, text: “Name”, width: 275 },
{ datafield: “fileVersion”, text: “File Version”, width: 275, hidden: true },
{ datafield: “fileEncodingId”, text: “File Encoding”, width: 275, hidden: true },
{ datafield: “ownerid”, text: “Owner ID”, width: 100, hidden: true },
{ datafield: “assetCategoryId”, text: “Asset Category ID”, width: 100, hidden: true },
{ datafield: “statusIndicatorId”, text: “Status Indicator ID”, width: 100, hidden: true },
{ datafield: “visibilityIndicatorId”, text: “Visibility Indicator ID”, width: 100, hidden: true },
{ datafield: “displayedValues”, text: “Display Values”, width: 100, hidden: true },
{
datafield: “assetDescription”,
text: “Description”,
width: 250
},
{ datafield: “locationTypeId”, text: “Location Type”, width: 150 },
{ datafield: “uri”, text: “URI”, width: 150 },
{ datafield: “ownerId”, text: “Owner”, width: 150 },
{
//cellsformat: “d”,
cellsformat: “MM/dd/yyyy”,
datafield: “createdDate”,
text: “Created Date”,
width: 150
},
{
//cellsformat: “d”,
cellsformat: “MM/dd/yyyy”,
datafield: “updatedDate”,
text: “Updated Date”,
width: 100
},
{
text: “Delete “,
buttonclick: (): void => {
},
cellsrenderer: (): string => {
return “Delete”;
},
columntype: “button”,
datafield: “Delete”,
width: 80
},
{
text: “Edit Asset”,
buttonclick: (row: number): void => {
// show the popup window.
this.assetsEditWindow.current!.open();
},
cellsrenderer: (): string => {
return “Edit”;
},
columntype: “button”,
datafield: “Edit”,
width: 80
}
];
const grid =
this.state.visible || this.state.assocAssetsVisible ? null : (
<div>
<JqxGrid
ref={this.assetsDataGrid}
width={“100%”}
height={“100%”}
theme={“arctic”}
source={dataAdapter}
columns={columns}
showtoolbar={true}
pageable={true}
pagesize={50}
scrollmode={“default”}
rendertoolbar={this.state.rendertoolbar}
sortable={true}

/>

<Button
label=”Associate Project Spaces”
icon=”pi pi-plus”
style={{ marginRight: “.25em”, marginTop: “.25em” }}
onClick={e =>
this.setState({
assocAssetsVisible: true
})
}
/>
</div>
);

ReactDOM.render(grid, this.projectSpacesGridElement.current!);

};

private saveEditCDSBtn(): void {
if (this.editrow >= 0) {

this.assetsEditWindow.current!.hide();
}
}

private cancelEditCDSBtn(): void {
this.assetsEditWindow.current!.hide();
}

private savenewCDSpaceBtn(): void {

this.assetsAddWindow.current!.hide();
}
private cancelnewCDSpaceBtn(): void {
this.assetsAddWindow.current!.hide();
}

private initWidgets = (tab: any) => {
switch (tab) {
case 0:
this.projectSpacesGrid();
break;

}
};

private onTabSelected = (event: any) => {
if (event.args) {
let tabIndex = event.args.item;
switch (event.args.item) {
case 0:
this.assetsAddWindow.current!.setTitle(this.firstTabButtonContent);
break;
}
}
};
}`

And here are the error screenshots:

Why am I getting jQXWindow related error?

P.S. The above code is not getting formatted despite enclosing code with “" and "“. For better code clarity, you can take a look at my post here:

https://stackoverflow.com/questions/58826361/typeerror-h-is-undefined

[HristoParticipant]

Hello walker1234,

I would like to mention something about the posting source code here if you want to handle it and to see the code well.
It is better to replace all < symbols with < or the relevant one for the “greater than”.
Because they are not parsed and broke the view.

Also, this is a huge source code and it is difficult to revise and I would like to ask you try to create the simplest example only with the scenario that reproduce that.
You could use the “https://stackblitz.com” to create one simple example there.
I try to look on this code and it seem fine.
That I think you could try to check is the “setState” option in the mentioned button with label="Associate Project Spaces" settings.
If I understand you right the issue become from clicking on this button.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[walker1234Participant]

Yes, the issue is happening once I click the button.

For Code formatting:

I didn’t understand what did you mean by replacing < with <. Both are same ? Maybe jQWidgets team can work on it so that it’s easy to format code in one go like other websites like Stackoverflow, Sitepoint etc.

[HristoParticipant]

Hello walker1234,

About the formatting I am sorry, I meant that to use the entities like the “& l t ;” option (type these symbols without the spaces) instead of the “<” symbol in that way, it should be formatted well.
How about the button action?
Is there any success?
What is your goal, what you want to achieve?

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[LadotyriParticipant]

If anyone has something similar, this might or might not be related to an issue we had (v. 8.3.2)
If you have no windows with isModal set to true, and you have some with it set to false, you get this error
If there is at least one window with isModal = true, or other windows do not have isModal set (or set to an undefined variable), it works OK

[HristoParticipant]

Hello Ladotyri,

Please, clarify your case.
It will be better if you could provide us with a simplified example that demonstrates your case.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts