JSFiddle - React, Tailwind, and code Playground

by Anderson Lopez

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<script src="http://cdn3.devexpress.com/jslib/14.1.11/js/dx.webappjs.js"></script>
<link rel="stylesheet" href="http://cdn3.devexpress.com/jslib/14.1.11/css/dx.common.css">
<link rel="stylesheet" href="http://cdn3.devexpress.com/jslib/14.1.11/css/dx.light.css">
<div id="divGridContGrouping"></div>
<div class="options">
    <div>
        <div id="autoExpand"></div>
        <div>Expandir todos os grupos</div>
    </div>
</div>

CSS

#divGridContGrouping{
    width: 100%;
    heigth: auto;
}
.options > div{
    margin-top: 5px;
}
.options > div > div:first-child{
    float: left;
    margin: 1px 20px 1px 0;
    
    color: #fff;
}
.options > div > div:lastchild{
    line-height: 24px;
    background: #008899; 
}

JavaScript

var gObjVlsGridGrouping = [{
	'ID':1, 'Companhia':'VBS','Estado':'SP'
},{
	'ID':2, 'Companhia':'VBS','Estado':'SP'
},{
	'ID':3, 'Companhia':'VBS','Estado':'SP'
},{
	'ID':4, 'Companhia':'Artplan','Estado':'SP'
},{
	'ID':5, 'Companhia':'Artplan','Estado':'RJ'
},{
	'ID':6, 'Companhia':'Artplan','Estado':'RJ'
},{
	'ID':7, 'Companhia':'Ogilvy','Estado':'SP'
},{
	'ID':8, 'Companhia':'Ogilvy','Estado':'RJ'
},{
	'ID':9, 'Companhia':'Ogilvy','Estado':'SP'
},{
	'ID':10, 'Companhia':'X3M','Estado':'RJ'
}];

var dtGrid = $('#divGridContGrouping').dxDataGrid({
	dataSource: gObjVlsGridGrouping,
    allowColumnReordering: true,
    grouping: {
    	autoExpandAll: true,
    },
    paging:{
    	pageSize: 20
    },
    searchPanel: {
    	visible: true
    },
    paging:{
    	pageSize:10
    },
    groupPanel:{
    	visible: true
    },
    columns: [{dataField: 'Companhia'},
              {dataField: 'Estado',groupIndex: 0}]
}).dxDataGrid('instance');

$('#autoExpand').dxCheckBox({
	value:true,
    onValueChanged: function(data){
    	dataGrid.option('grouping.autoExpandAll', data.value);
    }
});