JSFiddle - React, Tailwind, and code Playground

by Semih Muyaoğlu

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.3.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<link rel="stylesheet" href="http://cdn3.devexpress.com/jslib/15.2.8/css/dx.common.css">
<link rel="stylesheet" href="http://cdn3.devexpress.com/jslib/15.2.8/css/dx.light.css">
<script src="http://cdn3.devexpress.com/jslib/15.2.8/js/dx.all.js"></script>
<div id="editDialog"></div>

JavaScript

var jobArrayPODTab = [{
  guid: 0,
  name: "<<New Order>>"
}, {
  guid: 1,
  name: "Job 1"
}, {
  guid: 2,
  name: "Job 2"
}];

$("#editDialog").dxForm({
  formData: {
      field1: 0,
      field2: 'test'
  },
  
  height: 600,
  
  items: [
  {
    dataField: "field1",
    editorType: "dxSelectBox",
    editorOptions: {
      dataSource: jobArrayPODTab,
      valueExpr: 'guid',
      displayExpr: 'name',      
      width: 200,
    }
  }, 
  
  {
    dataField: "field2",
    editorType: "dxSelectBox",
    editorOptions: {
      dataSource: ["test", "test 2"],
      width: 200,
    }
  }, 
  
  ]
});