Using jqwidget latest with React with pure js files

[vish05091980Participant]

Hi,

I like the amount of component that jqwidget provides. Especially was interested in the following:
1> jqxToolbar
2> jqxDateTimeInput
3> jqxCombobox with autocomplete

Also i like the API documentation that you have. But i see the latest version of jqwidgets is all written in typescript.
1> Is there a latest version of jqwidgets in pure javascript?
2> If not can i use any of the above component(from latest jqwidget version i.e. in typescript) into my React component written in pure javascript file?
e.g. class MyComponent extends Component {
render() {
//using JqxDateTimeInput from jqwidget latest library written in typescript
(<JqxDateTimeInput formatString={“MM/dd/yyyy”}/>);
}
}
export default MyComponent;
if this is possible can you share an small example that will really help.

3> If none of the above is possible is the latest version of jqwidget pure javascript library be used in my custom React component. i.e. are these components mentioned above exported so i can import them into my React custom component and use them. Again small example will really help.

Iam really looking forward to using this library and don’t want to give up just because it is using the typescript. As i cannot use typescript in my project.

Thanks in advance.
Vish

[adminKeymaster]

Hi Vish,

We ship our react components with Typescript and our demos are available in typescript only. Unfortunately, we do not have pure js in the latest version.

Regards,
Peter

[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

[adminKeymaster]

Hi Vish,

You can take a look at our React Docs & Examples to get started with our components. The benefit of typescript is to ensure that correct type is used.

Regards,
Peter

[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]

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]

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]

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]

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

[adminKeymaster]

Hi Vish,

The reason is that, you are trying to use them, before they are in the DOM.

Regards,
Peter

[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

[adminKeymaster]

Hi Vish,

We cannot provide such example with the third-party product that you are using. With our Grid component, we have react examples with jqxComboBox used as a cell editor.

Regards,
Vish

[vish05091980Participant]

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

Thanks
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

[adminKeymaster]

Please, navigate to: https://www.jqwidgets.com/react/react-grid/index.htm. The example’s name is Cascading ComboBox.

Regards,
Peter

[Author]

Posts