Html Window

Set the initContent property of the jqxWindow. Author: http://jqwidgets.com

HTML

<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id="jqxwindow">
  <div>Header</div>
  <div>
    <div>
      <input type="button" value="Cancel" id="cancelButton" />
      <br>
      <br>
      <div id="sampleForm" style="width: 400px; height: auto;"></div>
    </div>
  </div>
</div>

JavaScript

$("#jqxwindow").jqxWindow({
  height: 250,
  width: 550,
  theme: "energyblue",
  initContent: function () {
    $("#cancelButton").jqxButton({
      width: "80px",
      disabled: false
    });

    var citiesTX = [
      "Houston",
      "San Antonio",
      "Dallas",
      "Austin"
    ];
    var citiesNY = [
      "New York",
      "Buffalo",
      "Rochester",
      "Yonkers"
    ];
    var template = [
      {
        name: "state",
        bind: "state",
        type: "option",
        label: "State",
        required: true,
        labelWidth: "80px",
        width: "250px",
        component: "jqxDropDownList",
        options: [
          { value: "New York"},
          { value: "Texas"}
        ]
      },
      {
        name: "city",
        bind: "city",
        type: "custom",
        label: "City",
        required: true,
        labelWidth: "80px",
        width: "250px",
        init: function (component) {
          var options = [
            { value: "California" },
            { value: "New York"},
            { value: "Oregon"},
            { value: "Illinois"},
            { value: "Texas"}
          ];

          component.jqxComboBox({
            width: 250,
            height: 30,
            source: citiesTX,
            placeHolder: "Choose city"
          });

          // Native binding to the "change" event of the jqxComboBox when using "init" callback
          component.on("change", function (event) {
            console.log("change");
          });
        }
      }  
    ];
    var sampleValue = {
      city: "San Antonio",
      state: "Texas"
    };
    var sampleForm = $("#sampleForm").jqxForm({
      template: template,
      value: sampleValue,
      padding: { left: 10, top: 10, right: 10, bottom: 10 }
    });

    sampleForm.on("formDataChange", function (event) {
      var args = event.args;
      var newValue = args.value;
      var previousValue = args.previousValue;

      for (var key in newValue) {
        var...