JavaScript DropDownButton

Set the width property of the jqxDropDownButton. Author: http://jqwidgets.com

by klien54

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 style="float:left; margin-right: 10px;" id="dropDownButton">
    <div id='jqxGrid'>            
    </div>
</div>
<div>
<input type="button" id="changedata" value="Change Grid"/>
</div>

JavaScript

$("#dropDownButton").jqxDropDownButton({
     width: 150,
     height: 18,
     theme: 'energyblue'
 });

var gridData = [
                {value: 'SYSTEM', label: 'SYSTEM'}
            ];

var source = {
                datatype: 'local',
                datafields: [
                    {name: 'value', type: 'string'},
                    {name: 'label', type: 'string'}
                ],
                localData: gridData
            };


 $("#jqxGrid").jqxGrid({
      width: 200,
      height: 50,
      source: source,
//    autoheight: false,
      selectionmode: 'checkbox',
      columnsresize: true,
      columns: [{text: 'ALL', datafield: 'label', cellsalign: 'left', align: 'center'}]
 });

$("#changedata").jqxButton({
    width: 100,
    height: 25
}).on('click', function () {
    
    gridData = [
                {value: 'FAB', label: 'FAB'},
                {value: 'INFRA', label: 'INFRA'},
                {value: 'SYSTEM', label: 'SYSTEM'}
            ];
    
    source = {
                datatype: 'local',
                datafields: [
                    {name: 'value', type: 'string'},
                    {name: 'label', type: 'string'}
                ],
                localData: gridData
            };
    
    $("#jqxGrid").jqxGrid('source', source);
});