 Show Posts
|
|
Pages: 1 2 [3] 4
|
|
32
|
General Category / EasyUI for jQuery / Re: vertical text in datagrid header - PLS ANY HELP (I know a style issue, but need)
|
on: May 08, 2019, 01:29:50 AM
|
but the css does not work when table created without cols and cols done dynamically like
It works with dynamically created columns just set header text alignment, rotation, size and position after the grid is created and loaded with data. plz see below example with dynamically created columns. http://code.reloado.com/jbhatti/10/editbelow code is applying to all datagrids in the page, any idea how I can scope only to the one with ID="abc"? Tried all I can think of like #abc.datagrid-header-row or #abc .datagrid-header-row .datagrid-header-row
{
height:150px;
vertical-align: bottom;
}
use this code to set header height and vertical alignment var hd = dg.datagrid('getPanel').find('div.datagrid-header');
hd.css('height','100px');
var hr = dg.datagrid('getPanel').find('div.datagrid-header .datagrid-header-row');
hr.css('vertical-align','bottom');
|
|
|
|
|
33
|
General Category / EasyUI for jQuery / Re: How can I set checkbox and radiobutton readonly?
|
on: May 07, 2019, 09:25:17 PM
|
Set disabled property to true. <input class="easyui-checkbox" disabled="true" name="fruit" value="Apple" label="Apple:">
or try this to make it readonly but not disabled.. <input class="easyui-checkbox" name="fruit" value="Apple" label="Apple:"
data-options="
onChange:function(checked){
$(this).checkbox({checked: !checked});
}
">
|
|
|
|
|
35
|
General Category / EasyUI for jQuery / Re: vertical text in datagrid header - PLS ANY HELP (I know a style issue, but need)
|
on: May 07, 2019, 04:01:41 AM
|
Add following css to set column header height and alignment to bottom. .datagrid-header-row{
height:100px;
vertical-align: bottom;
}
and use following js code to rotate text in header. plz dont forget to set column resizable property to false because column resizing will reset all these settings. var dg = $('#dg')
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');
Please refer to following example http://code.reloado.com/jbhatti/9/edit#preview |
|
|
|
|
37
|
General Category / EasyUI for jQuery / Re: Change easyui Theme dynamically
|
on: March 30, 2019, 02:31:59 AM
|
1- First of all give an id to your theme style sheet link. <link id="theme_style" rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
2- Add following javascript code. <script>
/*declare variable to store theme style sheet links*/
var theme_styles = {
'default': 'http://www.jeasyui.com/easyui/themes/default/easyui.css',
'black': 'http://www.jeasyui.com/easyui/themes/black/easyui.css',
'gray': 'http://www.jeasyui.com/easyui/themes/gray/easyui.css'
};
/*function to change themes*/
function changetheme(themname){
$('#theme_style').attr('href', theme_styles[themname]);
}
</script>
3- Calll the changetheme function by passing your theme name as parameter . Please see attached example file. |
|
|
|
|
40
|
General Category / EasyUI for jQuery / Re: how to add dynamically combobox from database
|
on: March 21, 2019, 11:23:57 PM
|
EasyUI controls can't be creaded by just appending the html tags after DOM is fully loaded, you have to re-create it with the javascript after appending html tags. Plese try this in you ajax call success function. document.getElementById('mybody').innerHTML =data[0].model;
$("[name='dataku']").combobox();
|
|
|
|
|
41
|
General Category / EasyUI for jQuery / Re: Tab height
|
on: March 15, 2019, 09:55:27 PM
|
In your above example page please wrap the 'tt2' in separate div and apply your css class 'tt2_class' to that div and in 'tt2' data-options set fit property to true.
<style>
html,body,form {
height: 95%;
}
.tt2_class {
height: calc(100% - 100px);
}
</style>
<body>
<div id="tt1" class="easyui-tabs" border="true" style="height:100px;">
<div title="Tab1">
Hello 1
</div>
</div>
<div class="tt2_class">
<div id="tt2" class="easyui-tabs" border="true" data-options="fit:'true'"/>
<div title="Tab2">
Hello 2
</div>
</div>
</div>
</body>
Or if you want to do it with javascript try this.
var tt1_height = $('#tt1').tabs('options').height;
$('#tt2').tabs({height:$(window).height()-tt1_height});
|
|
|
|
|
42
|
General Category / EasyUI for jQuery / Re: Deleting datagrid row
|
on: March 12, 2019, 10:07:26 PM
|
Try this $('#dg').datagrid('getPanel').panel('panel').attr('tabindex', 1).bind('keydown', function (e) {
if (e.keyCode == 46) {
var dg = $('#dg');
var row = dg.datagrid('getSelected');
if(row){
var row_index = dg.datagrid('getRowIndex', row);
dg.datagrid('deleteRow', row_index);
}
}
});
|
|
|
|
|
