[vish05091980Participant]

Here is what I tried and it worked.

componentDidMount method:
=========================
componentDidMount() {
this.savedWindowCurrentRef = this.myWindowRef.current ===> This is what I did here. Saving the this.myWindowRef.current upfront to be used later.
}

render method:
==============

render() {
return(
<div>
<JqxWindow ref= {this.myWindowRef} width={400} height={400} >
<div>
<JqxButton width={80}
onClick={() => this.savedWindowCurrentRef.close()} ==> This change works.
Close Window
</JqxButton>
</div>
</JqxWindow>
</div>
);
}

So is the above solution I tried correct? And do you think doing the above way will cause any issue in future or it should work fine?

Since I am attaching the “savedWindowCurrentRef” to the “this” I believe it should only be limited to current instance of my custom component within which the JqxWindow is encapsulated. Any new invocation of my custom component will have it’s own version of “savedWindowCurrentRef”. Do you agree to this?

Thanks
Vish

[vish05091980Participant]

I saw the above example. Thanks for pointing that out. One question, above you mentioned:
“The reason is that, you are trying to use them, before they are in the DOM.” So “them” and “they” you referring to is the JqxComboBox and JqxDateTimeInput right? If so. Can i instantiate JqxComboBox or JqxDateTime in my custom components constructor and then use it’s reference in the render method. Do you think it should work?

e.g. Taking same example from my previous post:
myCustomComboBox.js file:
—————————————————-
import React from ‘react’;

import ‘jqwidgets-scripts/jqwidgets/styles/jqx.base.css’;
import JqxComboBox from ‘jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox’;

class MyCustomComboBox extends React.Component {
constructor(props) {
super(props);
this.jqxComboBox = <JqxComboBox width={250} height={25} source={comboBoxSource} displayMember=’displayMember’ valueMember=’valueMember’ />; ===> instantiating here
}

render() {
return(
<div>
{this.jqxComboBox} ==> using the reference from the one instantiated in constructor.
</div>
);
}
}
export default MyCustomComboBox ;

Thanks in advance
Vish

[vish05091980Participant]

i could not find pure React based example for my situation. Hence requesting. Can you please show me or provide a link to such example.

Thanks
Vish

[vish05091980Participant]

So can you please provide pure React based example where JqxComBoBox is used as cellEditor inside JqxGrid.

Thanks
Vish

[vish05091980Participant]

Can provide me with a sample example(in React style) of the same where the JqxComBoBox is used as cellEditor?

Thanks in advance
Vish

[vish05091980Participant]

Few more update. From the stacktrace of the error Invalid Selector – #JqxComboBoxjqx01069c135cbd! Please, check whether the used ID or CSS Class name is correct.

It shows it is failing in the jqxcore.js:7611. I put breakpoints in the chrome and debugged. It is failing because of the following check in jqxcore.js:7611:

if(this.length == 0) { ===> Here the this is JqxComboBox
if(this.selector) {
throw new Error(“Invalid Selector – ” + this.selector + “! Please, check whether the used ID or CSS Class name is correct.”)
}
}

Why the JqxComboBox “length” is 0? What should i do(props or some imports etc) to get the length == 1?

Please reply to my previous last 2 post + this post.

Thanks in advance
Vish

[vish05091980Participant]

I checked the code of react_jqxcombobox.esm.js i see the following:

var JqxComboBox = (function(_super) {
__extends(JqxComboBox, _super);
function JqxComboBox(props) {
var _this = _super.call(this, props) || this;
_this._jqx = JQXLite;
_this._id = ‘JqxComboBox’ + _this._jqx.generateID();
_this._componentSelector = ‘#’ + _this._id;
_this.state = {lstProps: props};
return _this;
}
:
:
})

So looks like the JqxComboBox is creating a randomly generated id to be used a componentSelector. So why is it failing/throwing error saying Invalid Selector – #JqxComboBoxjqx01069c135cbd! Please, check whether the used ID or CSS Class name is correct. as mentioned in my previous post.

Is there a way to provide and id to <JqxComboBox id={“myContainerId”}/> which will allow it to find the componentSelector?

Please can you check my previous post and also this one and reply back.

Thanks in advance
Vish

[vish05091980Participant]

Hi,

I looked at your ‘jqwidget-scripts/jqwidgets-react-tsx/*’ latest version(which I am using in my below examples) examples especially the JqxComboBox and JqxDateTimeInput components which i am interest in.

They work fine when i use them as standalone. i.e. when i do the following in my render method:

render() {
return(
<JqxComboBox width={250} height={25} source={comboBoxSource} displayMember=’displayMember’ valueMember=’valueMember’ />
<JqxDateTimeInput/>
);
}

But issue is when I am using either of the above components in the Grid cell as cellEditor(in my case i am using Ag Grid version 22.1.1) it blows up.

The error i get is as follows (assuming i am using the JqxComboBox as grid cellEditor):

Invalid Selector – #JqxComboBoxjqx01069c135cbd! Please, check whether the used ID or CSS Class name is correct.

And when i use the above component in my Ag Grid as cellEditor I am providing it as custom component like this:

myCustomComboBox.js file:
———————————-
import React from ‘react’;

import ‘jqwidgets-scripts/jqwidgets/styles/jqx.base.css’;
import JqxComboBox from ‘jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox’;

class MyCustomComboBox extends React.Component {
constructor(props) {
super(props);
}

render() {
return(
<div>
<JqxComboBox width={250} height={25} source={comboBoxSource} displayMember=’displayMember’ valueMember=’valueMember’ />
</div>
);
}
}
export default MyCustomComboBox ;

And this is how I am registering MyCustomCombobox in Ag Grid to be used as cellEditor:

myAgrGrid.js file:
—————————
import React from ‘react’;
import MyCustomComboBox from ‘./myCustomComboBox’;

class MyAgGrid extends React.Component {
render() {
var myColDefs =[ {
headerName: “My Custom Combo Box”,
field: “customComboBox”,
cellEditor: “myCustomComboBox”,
editable: true
}
:
:
etc. other col defs
];
return (
<div>
<AgGridReact
rowData={myRowData}
columnDefs={myColDefs}
frameworkComponents={{myCustomComboBox: MyCustomComboBox }}

</div>
);
}
}
export default MyAgGrid;

Here is my following following UI stack:
1> React & ReactDom 16.12.0
2> AgGrid Community 22.1.1
3> jqwidgets-scripts 9.1.3
4> jquery 3.4.1
5> webpack 4.41.6
6> webpack-cli 3.311
7> webpack-dev-server 3.10.3

Can you please help. Why the JqxComboBox fails to get created/instantiated when used as a cellEditor? Can you provide me a sample example which has the above mentioned use case.

Thanks in advance
Vish

[vish05091980Participant]

Now considering that I can’t use the TypeScript in my React JS files. I tried to use the regular Javascript like below

MyCustomComp.js
import $ from ‘jquery’;

import ‘jqwidget-scripts/jqwidget/styles/jqx.base.css’;
import ‘jqwidget-scripts/jqwidget/jqx.all.js’;

export function MyCustomComp() {}

MyCustomComp.prototype.init = function (params) {
this.eInput = document.createElement(“div”);
$(this.eInput).jqxDateTimeInput({formatString: ‘MM/dd/yyyy’}); or $(this.eInput).jqxComboBox({source: myComboDataSource});
}

It is saying “jqxDateTimeInput” is not a function. iam not referencing the above jqx-all.js via html. Iam only referencing it via import in my
MyCustomComp.js file.

So is there a way i can do this by only importing the jqx-all.js in my custom js file and still be able to use the jqxDateTimeInput or jqxComboBox

Please reply back as Iam eagerly looking to use this jqwidgets due to it’s simple API and good documentation.

Thanks in Advance
Vish

[vish05091980Participant]

The React Docs & Examples are all in typescript. I want a example where their is React component in pure javascript i.e. mycomponent.js and i can use the jqwidget written in typescript(.ts or .tsx) be used or referenced in mycomponent.js.
e.g. mycomponent.js below has following code:
import JqxDateTimeInput from ‘jqxwidget/jqxwidget-react-tsx/jqxDateTimeInput.tsx’;
class MyComponent extends Component {

render() {
return (<JqxDateTimeInput />);
}
}

[vish05091980Participant]

But can i use those TypeScript in my React Js files or can i use the pure javascript library solution in my React js i.e. does the pure javascript libraries export the jqwidget as module which i can use it in my React component?

Thanks in advance
Vish

[Author]

Posts