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>

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'}]
});


gridData = [
 {value: 'SYSTEM1', label: 'SYSTEM1'},
   {value: 'SYSTEM2', label: 'SYSTEM2'},
   {value: 'SYSTEM3', label: 'SYSTEM3'}
   
           ];

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

$("#jqxGrid").jqxGrid('source', source);