 Show Posts
|
|
Pages: [1] 2 3 4
|
|
4
|
General Category / EasyUI for jQuery / Combobox auto width problem
|
on: April 04, 2023, 02:30:57 AM
|
I have an EasyUI combobox on my web page, and I have set its panel width property to 'auto'. However, I have noticed that if the panel has a vertical scroll bar, then the text is wrapped, whereas if there is no vertical scroll bar, then the text is displayed as expected. <div style="margin-bottom:20px;width:200px">
<select class="easyui-combobox" label="Language" style="width:100%" data-options="panelHeight:180, panelWidth:'auto'">
<option value="zh-cht">Chinese Traditional</option>
<option value="ar">Arabic</option>
<option value="bg">Bulgarian</option>
<option value="ca">Catalan</option>
<option value="en">English</option>
<option value="fr">French</option>
</select>
</div>
 <div style="margin-bottom:20px;width:200px">
<select class="easyui-combobox" label="Language" style="width:100%" data-options="panelHeight:200, panelWidth:'auto'">
<option value="zh-cht">Chinese Traditional</option>
<option value="ar">Arabic</option>
<option value="bg">Bulgarian</option>
<option value="ca">Catalan</option>
<option value="en">English</option>
<option value="fr">French</option>
</select>
</div>
 |
|
|
|
|
5
|
General Category / EasyUI for jQuery / Re: [SOLVED] vertical text in datagrid header
|
on: February 10, 2022, 12:26:34 AM
|
Dear fguibert, Below is the complete working example code.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link id="dlink" rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<table id="dg" class="easyui-datagrid" style="width:700px;height:220px"
data-options="
fitColumns: false,
singleSelect: true,
rownumbers: false
">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:120">Product ID</th>
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:250, resizable: false">Attribute</th>
<th data-options="field:'status',width:65,align:'center'">Status</th>
</tr>
</thead>
</table>
</body>
</html>
<style>
.datagrid-header-row{
height:100px;
vertical-align: bottom;
}
</style>
<script>
var data = [
{"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
{"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
{"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":28.50,"attr1":"Venomless","itemid":"EST-11"},
{"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
{"productid":"RP-LI-02","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
{"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
{"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
{"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":63.50,"attr1":"Adult Female","itemid":"EST-16"},
{"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
{"productid":"AV-CB-01","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
]
$(document).ready(function () {
var dg = $('#dg');
dg.datagrid({data:data});
var cell_1 = dg.datagrid('getPanel').find('div.datagrid-header td[field="attr1"] .datagrid-cell');
var span_1 = dg.datagrid('getPanel').find('div.datagrid-header td[field="attr1"] span');
span_1.css('display','block');
span_1.css('transform','rotate(-90deg)');
span_1.css('width','100px');
span_1.css('position','relative');
span_1.css('left','10px');
span_1.css('top','36px');
cell_1.css('width','250px');
cell_1.css('height','100px');
var cell_2 = dg.datagrid('getPanel').find('div.datagrid-header td[field="status"] .datagrid-cell');
var span_2 = dg.datagrid('getPanel').find('div.datagrid-header td[field="status"] span');
span_2.css('display','block');
span_2.css('transform','rotate(-90deg)');
span_2.css('width','100px');
span_2.css('position','relative');
span_2.css('left','-23px');
span_2.css('top','69px');
cell_2.css('width','65px');
cell_2.css('height','100px');
});
</script>
|
|
|
|
|
11
|
General Category / EasyUI for jQuery / Thousand separator in datagrid column in cell editng mode
|
on: November 19, 2020, 06:53:43 AM
|
How to use thousand separator in datagrid column in cell editng mode. I use this code it shows thousand separator after loading data and on begain edit but after edit thousand separator disappears from edited cell. <th data-options="field:'listprice',width:80,align:'right',editor:{type:'numberbox',options:{precision:0, groupSeparator:','}},
formatter:function(value, row){
var number = row.listprice;
return number.toLocaleString('en-US', {minimumFractionDigits: 0});
}
">List Price</th>
Please check following example code. http://code.reloado.com/jbhatti/34/edit#html,live |
|
|
|
|
