JSFiddle - React, Tailwind, and code Playground

by akaimo

HTML

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="https://az564335.vo.msecnd.net/jslib/16.1.6/css/dx.common.css">
<link rel="stylesheet" href="https://az564335.vo.msecnd.net/jslib/16.1.6/css/dx.light.css">
<script src="https://az564335.vo.msecnd.net/jslib/16.1.6/js/dx.all.js"></script>
  
 <div id="div_tabpanel">              
   <div data-options="dxTemplate : { name: 'GridView1' } ">
     <div id="tab_inner">
       <div id="series_toggle" class="button"></div>
			 <div id="reset_chart" class="button"></div>
     </div>
   </div>
   <div data-options="dxTemplate : { name: 'GridView2' } ">
     <div id="tab_inner">
       <div id='options_form'></div>
     </div>
   </div>                
 </div>

CSS

#tab_inner {
	  background-color: #efefef;
		height: 80%;
	  margin: 15px;
	  padding: 15px;
	}
	#tab_inner ul li {
		font-size: 12px;
	  font-style: italic;
	}

JavaScript

var chart_title = "U.S. Crude Imports/Exports: Monthly";

$("#div_tabpanel").dxTabPanel({
  deferRendering: false,
  height: 250,
  dataSource: [
    { title: "GridView1", template: "GridView1" },
    { title: "GridView2", template: "GridView2" },
    { title: "GridView3", template: "GridView3" },
    { title: "GridView4", template: "GridView4" }
  ]
}).dxTabPanel("instance");
       
$("#options_form").dxForm({
		colCount: 2,
    minColWidth: 470,
		formdata: {
			chart_title: "John",
    	chart_subtitle: "Heart",
		},
    items: [
    {
      itemType: "group",
      caption: "System Information",
      items: ["chart_title","chart_subtitle"]
    },
  	{
    template: function(data, itemElement) {
      itemElement.append('<div id="save_chart"></div>');
      btn = $("#save_chart").dxButton({
        text: "Save Title",
        onClick: function () {
          var postData = $("#options_form").dxForm("instance").option("formData");
          //pivotGridChart.option("title.text", postData.title);
          //pivotGridChart.option("title.subtitle.text", postData.subtitle);
          alert(postData.chart_title);
        }
      });
    }
  }]
}).dxForm("instance");

// TOGGLE ALL SERIES VISIBILITY
$("#series_toggle").dxButton({
  text: "Show/Hide Series",
  onClick: function() {
    alert("series toggled");
  }
});

// RESET CHART BUTTON
$("#reset_chart").dxButton({
  text: "Reset All",
  onClick: function() {
    alert("chart cleared");
  }
});