[HristoParticipant]

Hello marjan,

Please, clarify your case.
I tested this example below and it seems to work fine:
https://stackblitz.com/edit/github-6gzzze?file=src/app/app.component.ts
I look forward to hearing from you.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[HristoParticipant]

Hello Emilio,

Thank you for this feedback.
I will create a work item for this case.
Meanwhile, you could get the details of the custom settings from the text area below.
After that, add the content into the generated file.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[HristoParticipant]

Hello onatsko,

Please, provide us with more details.
From the provided images it looks like you use custom logic for the table.
What do you want to achieve and what is your final goal?
It will be better if you could provide us with one simple example that demonstrates your case.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[HristoParticipant]

Hello vmlaskin,

I would like to mention that the used initContent callback is very important when adding inside the jqxWindow.
You could use the native React approach to achieve the mentioned scenario.
Please, take a look at this code snippet:

initContent() {
	let buttonsContainer = document.getElementById("buttonsContainer");

	let buttonSample = <button onClick={this.onButtonClick}>Click</button>;
	ReactDOM.render(buttonSample, buttonsContainer);
}

Also, details about the JqxWindow tag:

<JqxWindow ref={this.myWindow}
	onClose={this.eventWindowClose}
	onOpen={this.eventWindowOpen}
	onMoved={this.eventWindowMoved}
	width={270}
	height={165}
	maxHeight={180}
	maxWidth={280}
	minHeight={30}
	minWidth={250}
	// cancelButton={'.cancel'}
	// okButton={'.ok'}
	resizable={false}
	// isModal={true}
	modalOpacity={0.3}
	position={{ x: 90, y: 140 }}
	draggable={true}
	initContent={this.initContent}
>
	<div>
		Modal Window
	</div>
	<div>
		<div>
			Please click "OK", "Cancel" or the close button to close the modal window.
			The dialog result will be displayed in the events log.
		</div>
		<div style={{ float: "right", marginTop: 15 }}>
			<div>
				<JqxButton onClick={this.onButtonClick} className={'ok'} style={{ display: 'inline-block' }} width={80}>
					OK
				</JqxButton>
				<JqxButton onClick={this.onButtonClick} className={'cancel'} style={{ display: 'inline-block' }} width={80}>
					Cancel
				</JqxButton>

				<div id="buttonsContainer"></div>
			</div>
		</div>
	</div>
</JqxWindow>

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[HristoParticipant]

Hello dan123,

You could add an additional item at the first position with the following approach:

data.unshift({
  firstname: "",
  lastname: "",
  title: "",
  notes: ""
});

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[HristoParticipant]

Hello alexisdcarvajaln,

If you want to disable the escape action you could disable it manually.
You need to catch the keypress event to recognize when this happens.
After that, you could add one boolean flag and check for it in the mentioned function.
I hope this will help.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[HristoParticipant]

Hello vmlaskin,

I am sorry about the late answer.
After the simple installation of the default React project I try to add the jQWidgets scripts as follow:
npm install jqwidgets-scripts --save--dev
I need to mention the initContent callback which is important when adding custom components inside the jqxWindow.
Because by default the content in the window is extracted there as plain HTML.
Please, take a look at this code example below:

/* eslint-disabled */
import * as React from 'react';

import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';

import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
import JqxPanel from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpanel';
import JqxWindow from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';

class App extends React.PureComponent {
  myWindow = React.createRef();
  events = React.createRef();

  constructor(props) {
    super(props);
    this.showWindowButtonClick = this.showWindowButtonClick.bind(this);
    this.eventWindowClose = this.eventWindowClose.bind(this);
    this.eventWindowMoved = this.eventWindowMoved.bind(this);
    this.eventWindowOpen = this.eventWindowOpen.bind(this);
    this.onButtonClick = this.onButtonClick.bind(this);
    this.initContent = this.initContent.bind(this);
  }

  render() {
    return (
      <div>
        <JqxButton onClick={this.onButtonClick} width={80}>
          Show
              </JqxButton>
        <button onClick={this.onButtonClick} >
          Outside JqxWindow Button
              </button>
        <div style={{ marginTop: 10 }}>Events Log:</div>
        <JqxPanel ref={this.events}
          style={{ border: 'none' }}
          width={450} height={250}>
        </JqxPanel>
        <JqxWindow ref={this.myWindow}
          onClose={this.eventWindowClose}
          onOpen={this.eventWindowOpen}
          onMoved={this.eventWindowMoved}
          width={270}
          height={165}
          maxHeight={180}
          maxWidth={280}
          minHeight={30}
          minWidth={250}
          // cancelButton={'.cancel'}
          // okButton={'.ok'}
          resizable={false}
          // isModal={true}
          modalOpacity={0.3}
          position={{ x: 90, y: 140 }}
          draggable={true}
          initContent={this.initContent}
        >
          <div>
            {/**/}
                      Modal Window
                  </div>
          <div>
            <div>
              Please click "OK", "Cancel" or the close button to close the modal window.
              The dialog result will be displayed in the events log.
                      </div>
            <div style={{ float: "right", marginTop: 15 }}>
              <div>
                <JqxButton onClick={this.onButtonClick} className={'ok'} style={{ display: 'inline-block' }} width={80}>
                  OK
                              </JqxButton>
                <JqxButton onClick={this.onButtonClick} className={'cancel'} style={{ display: 'inline-block' }} width={80}>
                  Cancel
                              </JqxButton>
                <button className={'native-button'} >
                  My Button
                              </button>
              </div>
            </div>
          </div>
        </JqxWindow>
      </div >
    );
  }

  initContent() {
    let nativeButton = document.getElementsByClassName("native-button")[0];
    nativeButton.addEventListener("click", this.onButtonClick);
  }

  capitaliseFirstLetter(word) {
    return word.charAt(0).toUpperCase() + word.slice(1);
  };

  displayEvent(event) {
    let eventData = 'Event: ' + this.capitaliseFirstLetter(event.type);
    if (event.type === 'moved') {
      eventData += ', X: ' + event.args.x + ', Y: ' + event.args.y;
    }
	
    if (event.type === 'close') {
      eventData += ', Dialog result: ';
      if (event.args.dialogResult.OK) {
        eventData += 'OK';
      } else if (event.args.dialogResult.Cancel) {
        eventData += 'Cancel';
      } else {
        eventData += 'None';
      }
    }

    // this.events.current.prepend('<div style="margin-top: 5px;">' + eventData + '</div>');
  };

  // Event handling
  showWindowButtonClick() {
    this.myWindow.current.open();
  }

  eventWindowClose(event) {
    this.displayEvent(event);
  }

  eventWindowMoved(event) {
    this.displayEvent(event);
  }

  eventWindowOpen(event) {
    // this.displayEvent(event);
  }

  onButtonClick(event) {
    this.events.current.prepend("<div>Some Information</div>");
  }
}

export default App;

I hope this will help.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.comHello vmlaskin,

I am sorry about the late answer.
After the simple installation of the default React project I try to add the jQWidgets scripts as follow:
npm install jqwidgets-scripts --save--dev
I need to mention the initContent callback which is important when adding custom components inside the jqxWindow.
Because by default the content in the window is extracted there as plain HTML.
Please, take a look at this code example below:

I hope this will help.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[HristoParticipant]

Hello wsundet,

I would like to ask you to provide us with one simple example that demonstrates your case.
After that, I will try to provide you a solution to this.
Meanwhile, you could try to use a different theme that could handle this strange appearance that you mentioned.
Also, I would like to suggest you try to use the cellsrenderer callback for a specific column that you want to have dropdown options.
Please, take a look at this code example:

<!DOCTYPE html>
<html lang="en">

<head>
    <title id="Description">In this example is demonstrated how to use the Grid"s CardView mode.</title>
    <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var data = new Array();
            var firstNames = [
                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
            ];
            var lastNames = [
                "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
            ];
            var productNames = [
                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
            ];
            var priceValues = [
                "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
            ];
            for (var i = 0; i < 1000; i++) {
                var row = {};
                var productindex = Math.floor(Math.random() * productNames.length);
                var price = parseFloat(priceValues[productindex]);
                var quantity = 1 + Math.round(Math.random() * 10);
                row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                row["productname"] = productNames[productindex];
                row["price"] = price;
                row["quantity"] = quantity;
                row["total"] = price * quantity;
                data[i] = row;
            }
            var source = {
                localdata: data,
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function(data) {},
                loadError: function(xhr, status, error) {}
            });
            $("#jqxgrid").jqxGrid({
                altrows: true,
                width: 800,
                source: dataAdapter,
                editable: true,
                sortable: true,
                selectionmode: "multiplecellsadvanced",
                cardview: true,
                cardviewcolumns: [{
                    width: "auto",
                    datafield: "firstname"
                }, {
                    width: "auto",
                    datafield: "lastname"
                }, {
                    width: 300,
                    datafield: "productname"
                }],

                columns: [{
                    text: "First Name",
                    datafield: "firstname",
                    width: 100,
                    cellsrenderer: function() {
                        return "<select name='cars' id='cars'>" +
				"<option value='volvo'>Volvo</option>" +
				"<option value='saab'>Saab</option>" +
				"<option value='mercedes'>Mercedes</option>" +
				"<option value='audi'>Audi</option>" +
                            "</select>";
                    }
                }, {
                    text: "Last Name",
                    datafield: "lastname",
                    width: 100,
                    columntype: "dropdownlist"
                }, {
                    text: "Product",
                    datafield: "productname",
                    width: 180,
                    columntype: "dropdownlist"
                }, {
                    text: "Quantity",
                    datafield: "quantity",
                    width: 120,
                    cellsalign: "right"
                }, {
                    text: "Unit Price",
                    datafield: "price",
                    width: 90,
                    cellsalign: "right",
                    cellsformat: "c2"
                }, {
                    text: "Total",
                    datafield: "total",
                    cellsalign: "right",
                    cellsformat: "c2"
                }]
            });

            $("#jqxbutton").jqxButton();
            $("#jqxbutton").on("click", function() {
                var cardView = $("#jqxgrid").jqxGrid("cardview");

                $("#jqxgrid").jqxGrid({
                    cardview: !cardView
                });
            });
        });
    </script>
</head>

<body></body>
<div id="jqxgrid"></div>
<br/>
<button id="jqxbutton">Switch CardView</button>
</body>

</html>

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[HristoParticipant]

Hello SandBird,

Thank you for your contribution to the community.
You would find other similar topics in our forum, let us know if you have any other questions.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[HristoParticipant]

Hello qx5,

Please, clarify it.
I would like to mention that it is not appropriate to use one method with datafield that does not exist.
What is your final goal?
If you provide us with more details I could try to provide you a solution.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[HristoParticipant]

Hello alexisdcarvajaln,

I am not sure did you resolve your case?
Please, clarify it or ask any other questions if you have.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[HristoParticipant]

Hello alinungurean,

It is not appropriate to share the source code of our library.
About the mentioned approach with the jqxDropDownButton I would like to mention that this is only one suggestion that you could try to use.
Please, take a look at this example:
https://jseditor.io/?key=ff0e80fea81311eba19400224d6bfcd5-ver-4
I hope this will help.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[HristoParticipant]

Hello vmlaskin,

The mentioned version of the jQWidgets is an older version.
There is a lot of improvements and updates.
In the example that I created with the Node v14.15.4, the npm v6.14.11, the React v16.8.6, and the jQWidgets v8.1.4.
I would like to suggest you update your project.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[HristoParticipant]

Hello vmlaskin,

Could you clarify it?
Because I click on the default button and its event is fired.
What do you want to achieve, what is your final goal?
I look forward to hearing from you.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[HristoParticipant]

Hello alinungurean,

There is no such option, unfortunately.
You could contact the Sales Department (sales@jqwidgets.com) with such a request.
Another option is to use the jqxDropDownButton with jqxTimePicker inside it with the desired size.
I would like to mention that this is one suggestion only.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts