<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.3/css/tether.min.css" />
<link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/17.1.5/css/dx.common.css" />
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/17.1.5/css/dx.light.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Hello Plunker!</h1>
<div id="chart"></div>
<script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.3/js/tether.min.js"></script>
<script data-require="bootstrap@*" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script src="https://cdn3.devexpress.com/jslib/17.1.5/js/dx.all.js"></script>
<script src="script.js"></script>
</body>
</html> $((function() {
let dataForm = {
'labelLocation':'top',
'formData': {},
'items':[
{
'itemType': 'tabbed',
'tabs': [
{
"title": "Titulo",
"colCount": 1,
"colSpan": 1,
"items": [
{
"readOnly": false,
"visible": true,
"itemType": "group",
"cssClass": "sinc-frame",
"colCount":4,
"items": [
{
"dataField":"obervacoes",
"editorOptions":{
"width":"100%",
"allowCanceling":false,
"tabIndex":1,
},
"label":{
"text":"Observações",
"showColon":false
},
"editorType":"dxTextBox","colSpan": 1,
"validationRules":[
{
"type":"required"
},
]
},
{
"caption":"Retirada",
"visible": true,
"itemType": "group",
"cssClass": "sinc-frame",
"colCount":4,
"items": [
{
"dataField":"nomeRetirada",
"editorOptions":{
"width":"100%",
"allowCanceling":false,
"tabIndex":1,
},
"label":{
"text":"Nome",
"showColon":false
},
"editorType":"dxTextBox","colSpan": 1,
"validationRules":[
{
"type":"required"
},
]
},
{
"dataField":"localRetirada",
"editorOptions":{
"width":"100%",
"allowCanceling":false,
"tabIndex":1,
},
"label":{
"text":"local",
"showColon":false
},
"editorType":"dxTextBox","colSpan": 1,
"validationRules":[
{
"type":"required"
},
]
},
{
"dataField":"enderecoRetirada",
"editorOptions":{
"width":"100%",
"allowCanceling":false,
"tabIndex":1,
},
"label":{
"text":"Endereço",
"showColon":false
},
"editorType":"dxTextBox","colSpan": 1,
"validationRules":[
{
"type":"required"
},
]
},
{
"dataField":"bairroRetirada",
"editorOptions":{
"width":"100%",
"allowCanceling":false,
"tabIndex":1,
},
"label":{
"text":"Bairro",
"showColon":false
},
"editorType":"dxTextBox","colSpan": 1,
"validationRules":[
{
"type":"required"
},
]
},
{
"dataField":"cidadeRetirada",
"editorOptions":{
"width":"100%",
"allowCanceling":false,
"tabIndex":1,
},
"label":{
"text":"Cidade",
"showColon":false
},
"editorType":"dxTextBox","colSpan": 1,
"validationRules":[
{
"type":"required"
},
]
},
{
"dataField":"estadoRetirada",
"editorOptions":{
"width":"100%",
"allowCanceling":false,
"tabIndex":1,
},
"label":{
"text":"Estado",
"showColon":false
},
"editorType":"dxTextBox","colSpan": 1,
"validationRules":[
{
"type":"required"
},
]
},
{
"dataField":"contatoRetirada",
"editorOptions":{
"width":"100%",
"allowCanceling":false,
"tabIndex":1,
},
"label":{
"text":"Contato",
"showColon":false
},
"editorType":"dxTextBox","colSpan": 1,
"validationRules":[
{
"type":"required"
},
]
},
{
"dataField":"telefoneRetirada",
"editorOptions":{
"width":"100%",
"allowCanceling":false,
"tabIndex":1,
},
"label":{
"text":"Telefone",
"showColon":false
},
"editorType":"dxTextBox","colSpan": 1,
"validationRules":[
{
"type":"required"
},
]
},
{
"dataField":"celularRetirada",
"editorOptions":{
"width":"100%",
"allowCanceling":false,
"tabIndex":1,
},
"label":{
"text":"Celular",
"showColon":false
},
"editorType":"dxTextBox","colSpan": 1,
"validationRules":[
{
"type":"required"
},
]
},
{
"caption":"Entrega",
"visible": true,
"itemType": "group",
"cssClass": "sinc-frame",
"colCount":4,
"items": [
{
"dataField":"nomeEntrega",
"editorOptions":{
"width":"100%",
"allowCanceling":false,
"tabIndex":1,
},
"label":{
"text":"Nome",
"showColon":false
},
"editorType":"dxTextBox","colSpan": 1,
"validationRules":[
{
"type":"required"
},
]
},
{
"dataField":"localEntrega",
"editorOptions":{
"width":"100%",
"allowCanceling":false,
"tabIndex":1,
},
"label":{
"text":"Local",
"showColon":false
},
"editorType":"dxTextBox","colSpan": 1,
"validationRules":[
{
"type":"required"
},
]
},
{
"dataField":"enderecoEntrega",
"editorOptions":{
"width":"100%",
"allowCanceling":false,
"tabIndex":1,
},
"label":{
"text":"Endereço",
"showColon":false
},
"editorType":"dxTextBox","colSpan": 1,
"validationRules":[
{
"type":"required"
},
]
},
{
"dataField":"bairroEntrega",
"editorOptions":{
"width":"100%",
"allowCanceling":false,
"tabIndex":1,
},
"label":{
"text":"Bairro",
"showColon":false
},
"editorType":"dxTextBox","colSpan": 1,
"validationRules":[
{
"type":"required"
},
]
},
{
"dataField":"cidadeEntrega",
"editorOptions":{
"width":"100%",
"allowCanceling":false,
"tabIndex":1,
},
"label":{
"text":"Cidade",
"showColon":false
},
"editorType":"dxTextBox","colSpan": 1,
"validationRules":[
{
"type":"required"
},
]
},
{
"dataField":"estadoEntrega",
"editorOptions":{
"width":"100%",
"allowCanceling":false,
"tabIndex":1,
},
"label":{
"text":"Estado",
"showColon":false
},
"editorType":"dxTextBox","colSpan": 1,
"validationRules":[
{
"type":"required"
},
]
},
{
"dataField":"contatoEntrega",
"editorOptions":{
"width":"100%",
"allowCanceling":false,
"tabIndex":1,
},
"label":{
"text":"Contato",
"showColon":false
},
"editorType":"dxTextBox","colSpan": 1,
"validationRules":[
{
"type":"required"
},
]
},
{
"dataField":"telefoneEntrega",
"editorOptions":{
"width":"100%",
"allowCanceling":false,
"tabIndex":1,
},
"label":{
"text":"Telefone",
"showColon":false
},
"editorType":"dxTextBox","colSpan": 1,
"validationRules":[
{
"type":"required"
},
]
},
{
"dataField":"celularEntrega",
"editorOptions":{
"width":"100%",
"allowCanceling":false,
"tabIndex":1,
},
"label":{
"text":"Celular",
"showColon":false
},
"editorType":"dxTextBox","colSpan": 1,
"validationRules":[
{
"type":"required"
},
]
},
]
}
]
}
]
}
],
'editorOptions':{
'rtlEnabled':false
}
}
],
'onContentReady':function(form){
}
};
let grid = $('#chart').dxForm(dataForm).dxForm('instance');
})());/* Styles go here */