EasyUI Forum
March 29, 2024, 01:49:31 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
  Home Help Search Login Register  
  Show Posts
Pages: [1] 2 3
1  General Category / EasyUI for jQuery / Datetimebox OK button event on: February 18, 2024, 08:30:00 AM
how to detect OK button clicked at datetimebox

thanks
2  General Category / EasyUI for jQuery / Sidemenu item hide on: October 23, 2023, 07:00:32 AM
Hi,

It is possible to hide item/nodes in sidemenu?

Or if it not possible how to clear selection item in sidemenu

Best regard
3  General Category / EasyUI for jQuery / Button Group Click on: July 11, 2023, 08:05:37 AM
Hi,

is there any sample button group click?

best regrads
4  General Category / EasyUI for jQuery / SideMenu Selected Color on: May 26, 2023, 10:02:12 AM
Hi,
anyone help please ..
is there any way to change sidemenu style color onselected?

best regards
5  General Category / EasyUI for jQuery / Re: how to make line on group header datagrid on: February 09, 2022, 08:40:04 PM
 after doing inspect I got this line, and how to style border-right on it
6  General Category / EasyUI for jQuery / Re: how to make line on group header datagrid on: February 09, 2022, 07:38:18 PM
how about the body,
my code work on header only
Code:
var dg = $('#dg6');
     dg.datagrid();
     var td = dg.datagrid('getPanel').find('div.datagrid-header td[field="penerima_total"]');
     td.css("border-right","1px solid grey");
    
     var td1=dg.datagrid('getPanel').find('div.datagrid-header td[field="porsi_rescue"]');
     td1.css("border-right","1px solid grey");
    
     var td2 = dg.datagrid('getPanel').find('div.datagrid-header td[id="id1"]');
     td2.css("border-right","1px solid grey");
7  General Category / EasyUI for jQuery / Re: how to make line on group header datagrid on: February 09, 2022, 01:42:26 PM
here my code,but my problem in td3 is not work as expected
Code:
     
     var dg = $('#dg6');
     dg.datagrid();
     var td = dg.datagrid('getPanel').find('div.datagrid-header td[field="penerima_total"]');
     td.css("border-right","1px solid grey");
     
     var td1=dg.datagrid('getPanel').find('div.datagrid-header td[field="porsi_rescue"]');
     td1.css("border-right","1px solid grey");
     
     var td2 = dg.datagrid('getPanel').find('div.datagrid-header td[id="id1"]');
     td2.css("border-right","1px solid grey");
     
     var td3 = dg.datagrid('getPanel').find('div.datagrid-body td[field="penerima_total"]');
     td3.css("border-right","1px solid red");
8  General Category / EasyUI for jQuery / how to make line on group header datagrid on: February 09, 2022, 03:08:05 AM
hi everyone,

I have a problem with the group header Datagrid, I want to make the border just the right border only.

any suggestion, please?



Best Regards

9  General Category / EasyUI for jQuery / sample code using easyui datagrid pagination in laravel on: September 03, 2020, 09:41:58 PM
Hi,

is there any sample code how to use easyui datagrid pagination in laravel?

Thanks
10  General Category / EasyUI for React / add new icon on: October 06, 2019, 11:00:20 PM
Help Please
how to add new icon?

Thanks...
11  General Category / EasyUI for jQuery / Background image in layout 'center' on: August 27, 2018, 07:46:15 PM
hi, please help

for set background image in layout i tried this code:

$('#vw_center').css('background',url('img/banner.jpg'));

Thanks
12  General Category / EasyUI for jQuery / (Closed) Datagrid Frozen Column with Merge Cell on: August 09, 2018, 02:16:38 AM
Hi,
please help to frozen datagrid column with a merge cell code my code is not work for frozen column, i have try to place data-options="frozen:true" at <thead> but result is blank

Code:
<table class="easyui-datagrid" style="width:100%;height:100%"
            data-options="rownumbers:false,singleSelect:true,url:'../control/get_data.php',method:'get',onLoadSuccess: onLoadSuccess">
       <thead >
            <tr data-options="frozen:true">
                <th data-options="field:'dept',width:135" rowspan="2">Departemen</th>
<th data-options="field:'objective_group',width:150" rowspan="2">Objective Group</th>
<th data-options="field:'target_group',width:80,align:'center'" formatter="formatPrice" rowspan="2">Target</th>
<th data-options="field:'objective',width:300" rowspan="2">Detail Objective</th>
<th data-options="field:'unit',width:200,align:'center'" rowspan="2">Unit</th>
<th data-options="field:'target_group_detail',width:100,align:'right',frozen:true" formatter="formatPrice" rowspan="2">Target</th>

                <th colspan="3">Jan</th>
<th colspan="3">Feb</th>
<th colspan="3">Mar</th>
<th colspan="3">Apr</th>
<th colspan="3">May</th>
<th colspan="3">Jun</th>
<th colspan="3">Jul</th>
<th colspan="3">Aug</th>
<th colspan="3">Sep</th>
<th colspan="3">Oct</th>
<th colspan="3">Nov</th>
<th colspan="3">Dec</th>
            </tr>
</thead>
<thead>
            <tr>
<!-- Jan -->
                <th data-options="field:'T_Jan',width:80,align:'right'" formatter="formatPrice">Target</th>
                <th data-options="field:'A_Jan',width:80,align:'right'" formatter="formatPrice">Actual</th>
                <th data-options="field:'P_Jan',width:50,align:'right'">%</th>
<!-- Feb -->
<th data-options="field:'T_Feb',width:80,align:'right'" formatter="formatPrice">Target</th>
                <th data-options="field:'A_Feb',width:80,align:'right'" formatter="formatPrice">Actual</th>
                <th data-options="field:'P_Feb',width:50,align:'right'">%</th>
<!-- Mar -->
<th data-options="field:'T_Mar',width:80,align:'right'" formatter="formatPrice">Target</th>
                <th data-options="field:'A_Mar',width:80,align:'right'" formatter="formatPrice">Actual</th>
                <th data-options="field:'P_Mar',width:50,align:'right'">%</th>
<!-- Apr -->
<th data-options="field:'T_Apr',width:80,align:'right'" formatter="formatPrice">Target</th>
                <th data-options="field:'A_Apr',width:80,align:'right'" formatter="formatPrice">Actual</th>
                <th data-options="field:'P_Apr',width:50,align:'right'">%</th>
<!-- Mar -->
<th data-options="field:'T_May',width:80,align:'right'" formatter="formatPrice">Target</th>
                <th data-options="field:'A_May',width:80,align:'right'" formatter="formatPrice">Actual</th>
                <th data-options="field:'P_May',width:50,align:'right'">%</th>
<!-- Mar -->
<th data-options="field:'T_Jun',width:80,align:'right'" formatter="formatPrice">Target</th>
                <th data-options="field:'A_Jun',width:80,align:'right'" formatter="formatPrice">Actual</th>
                <th data-options="field:'P_Jun',width:50,align:'right'">%</th>
<!-- Mar -->
<th data-options="field:'T_Jul',width:80,align:'right'" formatter="formatPrice">Target</th>
                <th data-options="field:'A_Jul',width:80,align:'right'" formatter="formatPrice">Actual</th>
                <th data-options="field:'P_Jul',width:50,align:'right'">%</th>
<!-- Mar -->
<th data-options="field:'T_Aug',width:80,align:'right'" formatter="formatPrice">Target</th>
                <th data-options="field:'A_Aug',width:80,align:'right'" formatter="formatPrice">Actual</th>
                <th data-options="field:'P_Aug',width:50,align:'right'">%</th>
<!-- Mar -->
<th data-options="field:'T_Sep',width:80,align:'right'" formatter="formatPrice">Target</th>
                <th data-options="field:'A_Sep',width:80,align:'right'" formatter="formatPrice">Actual</th>
                <th data-options="field:'P_Sep',width:50,align:'right'">%</th>
<!-- Mar -->
<th data-options="field:'T_Oct',width:80,align:'right'" formatter="formatPrice">Target</th>
                <th data-options="field:'A_Oct',width:80,align:'right'" formatter="formatPrice">Actual</th>
                <th data-options="field:'P_Oct',width:50,align:'right'">%</th>
<!-- Mar -->
<th data-options="field:'T_Nov',width:80,align:'right'" formatter="formatPrice">Target</th>
                <th data-options="field:'A_Nov',width:80,align:'right'">Actual</th>
                <th data-options="field:'P_Nov',width:50,align:'right'">%</th>
<!-- Mar -->
<th data-options="field:'T_Dec',width:80,align:'right'" formatter="formatPrice">Target</th>
                <th data-options="field:'A_Dec',width:80,align:'right'" formatter="formatPrice">Actual</th>
                <th data-options="field:'P_Dec',width:50,align:'right'">%</th>
            </tr>


        </thead>
    </table>
</body>
<script type="text/javascript">
        function onLoadSuccess(data){
            var merges = [{
                index: 0,
                rowspan: 4
},{
                index: 4,
                rowspan: 5
            },{
                index: 9,
                rowspan: 4
            },{
                index: 13,
                rowspan: 3
            }];

var merges1 =[{
   index: 0,
                rowspan: 4
},{
                index: 4,
                rowspan: 5

            },{
                index: 9,
                rowspan: 4
            },{
                index: 13,
                rowspan: 3
            }];
var merges2 =[{
   index: 0,
                rowspan: 4
},{
                index: 4,
                rowspan: 5
},{
                index: 9,
                rowspan: 4
            },{
                index: 13,
                rowspan: 3
            }];

            for(var i=0; i<merges.length; i++){
                $(this).datagrid('mergeCells',{
                    index: merges[i].index,
                    field: 'dept',
                    rowspan: merges[i].rowspan
                });
            }
   for(var i=0; i<merges1.length; i++){
                $(this).datagrid('mergeCells',{
                    index: merges1[i].index,
                    field: 'objective_group',
                    rowspan: merges1[i].rowspan
                });
            }
for(var i=0; i<merges2.length; i++){
                $(this).datagrid('mergeCells',{
                    index: merges2[i].index,
                    field: 'target_group',
                    rowspan: merges2[i].rowspan
                });
            }

        }
</script>
13  General Category / EasyUI for jQuery / Re: datagrid with combogrid as editor keyevent (keypress) detect on: April 17, 2018, 12:51:15 PM
Closed

Code:
<html>
<head>
 <link rel="stylesheet" type="text/css" href="../themes/metro-gray/easyui.css">
 <link rel="stylesheet" type="text/css" href="../themes/icon.css">
 <link rel="stylesheet" type="text/css" href="../css/demo.css">
 <link rel="stylesheet" type="text/css" href="../themes/color.css">
 <script type="text/javascript" src="../js/jquery.min.js"></script>
 <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
 <script type="text/javascript" src="../js/jquery.edatagrid.js"></script>
 <link rel="stylesheet" href="../css/w3.css">
 
  <script type="text/javascript">
$(function(){
$('#dg').edatagrid({
onAdd: function(index,row){
var ed1 =$(this).datagrid('getEditor', {
                index: index,
                field: 'pcn'
           });
var t = $(ed1.target).combogrid('textbox').focus();
t.focus();

},
onBeginEdit:function(index){
var ed1 = $(this).edatagrid('getEditor',{index:index,field:'pcn'});
var ed2 = $(this).edatagrid('getEditor',{index:index,field:'unit'});
var ed3 = $(this).edatagrid('getEditor',{index:index,field:'qty'});
setKeydown([ed1.target,ed3.target]);
}

});

document.addEventListener("keydown", keyDownTextField, false);

function keyDownTextField(e) {
  var keyCode = e.keyCode;
  if(keyCode==78) {
    //alert("You hit the enter key.");
var dg = $('#dg');
dg.edatagrid('addRow');
var index = dg.edatagrid('getRows').length-1;  // the editing row index
var ed = dg.edatagrid('getEditors', index)[0];  // get the first editor
$(ed.target).focus();

  } else if (keyCode==67) {
//alert (keyCode);
    //alert("Oh no you didn't.");
$('#dg').edatagrid('cancelRow');
  }else{
//alert(keyCode);
  }
}
});
</script>
 
 <style>
.w3-button {width:100px;height:30px;}
</style>

</head>
<body>
<table id="dg"  style="width:100%;height:250px" data-options="toolbar:'#toolbar', pagination:true, idField:'id', rownumbers:true, fitColumns:true, singleSelect:true">
        <thead>
            <tr>
                <th field="pcn"  width="50" editor="{type:'combogrid',options:{required:false,panelWidth:580,idField:'pcn',textField:'pcn',mode:'remote',url:'../control/get_product.php',columns: [[
{field:'pcn',title:'pcn',width:100},{field:'product',title:'product',width:250},{field:'unit',title:'unit',width:50},

]],

onSelect: onSelectGrid, onShowPanel: onShowPanel,onHidePanel: onHidePanel,onChange: onChange,

}}">Product</th>
<th field="unit" width="30" editor="{type:'validatebox',options:{readonly:true}}">Unit</th>
                <th field="qty" width="50" editor="{type:'validatebox',options:{required:true}}">Qty</th>

             
            </tr>
        </thead>
 </table>
<div align="right" style="margin:10 0 0">
<a href="#" id="btnSave" class="easyui-linkbutton c5" style="width:120px;height:35px">Save Transaction</a>
</div>
<div id="toolbar">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onClick="javascript:$('#dg').edatagrid('addRow')">New</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onClick="javascript:$('#dg').edatagrid('cancelRow')">Cancel</a>
    </div>

<script>
function onShowPanel() {
cbg = $(this);

}
function onHidePanel() {
cbg = null;
}
function onSelectGrid(index,record) {
if(cbg) {
var cb = cbg;
var opts =cb.combogrid('options');
var grid = cb.combogrid('grid');
var row= grid.datagrid('getSelected');
// alert (row.price);
var dgs = $('#dg');
var index = dgs.datagrid('getRowIndex', dgs.datagrid('getSelected'));


var editors = dgs.datagrid('getEditors', index);
$(editors[1].target).val(row.unit);



}
}
function onChange(newValue, oldValue) {
if(cbg) {
var opts = cbg.combogrid('options');
grid=cbg.combogrid('grid');
var row= grid.datagrid('getSelected');
var dgs = $('#dg');
var index = dgs.datagrid('getRowIndex', dgs.datagrid('getSelected'));


var editors = dgs.datagrid('getEditors', index);
$(editors[1].target).val(row.unit);

}
}

function setKeydown(tt){
for(var i=0; i<tt.length; i++){
        var t = tt[i];
        getInputBox(t).bind('keydown',{i:i},function(e){
            if (e.keyCode == 13){
                var next = getInputBox(tt[e.data.i+1]||tt[0]);
                next.focus();
            }
        });
    }
}
function getInputBox(target){
    return $(target).data('textbox') ? $(target).textbox('textbox') : $(target);
}
</script>
</body>
</head>
14  General Category / EasyUI for jQuery / keyhandler combogrid as datagrid editor on: April 17, 2018, 11:06:13 AM
Hi

i face problem with keyhandler in combogrid as datagrid editor, i need to detect enter key in combogrid.

here my code

Code:
<html>
<head>
 <link rel="stylesheet" type="text/css" href="../themes/metro-gray/easyui.css">
 <link rel="stylesheet" type="text/css" href="../themes/icon.css">
 <link rel="stylesheet" type="text/css" href="../css/demo.css">
 <link rel="stylesheet" type="text/css" href="../themes/color.css">
 <script type="text/javascript" src="../js/jquery.min.js"></script>
 <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
 <script type="text/javascript" src="../js/jquery.edatagrid.js"></script>
 <link rel="stylesheet" href="../css/w3.css">
 
  <script type="text/javascript">
$(function(){
$('#dg').edatagrid({
onAdd: function(index,row){
var ed1 =$(this).datagrid('getEditor', {
                index: index,
                field: 'pcn'
           });
var t = $(ed1.target).combogrid('textbox').focus();
t.focus();

}

});

});
</script>
 
 <style>
.w3-button {width:100px;height:30px;}
</style>

</head>
<body>
<table id="dg"  style="width:100%;height:250px" data-options="toolbar:'#toolbar', pagination:true, idField:'id', rownumbers:true, fitColumns:true, singleSelect:true">
        <thead>
            <tr>
                <th field="pcn"  width="50" editor="{type:'combogrid',options:{required:false,panelWidth:580,idField:'pcn',textField:'pcn',mode:'remote',url:'../control/get_product.php',columns: [[
{field:'pcn',title:'pcn',width:100},{field:'product',title:'product',width:250},{field:'unit',title:'unit',width:50},

]],

keyHandler: $.extend({}, $.fn.combogrid.defaults.keyHandler, {
enter: function(e){
//...
}
})

}}">Product</th>
<th field="unit" width="30" editor="{type:'validatebox',options:{readonly:false}}">Unit</th>
                <th field="qty" width="50" editor="{type:'validatebox',options:{required:true}}">Qty</th>

             
            </tr>
        </thead>
 </table>
<div align="right" style="margin:10 0 0">
<a href="#" id="btnSave" class="easyui-linkbutton c5" style="width:120px;height:35px">Save Transaction</a>
</div>
<div id="toolbar">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onClick="javascript:$('#dg').edatagrid('addRow')">New</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onClick="javascript:$('#dg').edatagrid('cancelRow')">Cancel</a>
    </div>


</body>
</head>
15  General Category / EasyUI for jQuery / Re: Set Focus in edatagrid editor when click add New Row on: April 17, 2018, 10:50:31 AM
Finally Find solution:

Code:
<html>
<head>
 <link rel="stylesheet" type="text/css" href="../themes/metro-gray/easyui.css">
 <link rel="stylesheet" type="text/css" href="../themes/icon.css">
 <link rel="stylesheet" type="text/css" href="../css/demo.css">
 <link rel="stylesheet" type="text/css" href="../themes/color.css">
 <script type="text/javascript" src="../js/jquery.min.js"></script>
 <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
 <script type="text/javascript" src="../js/jquery.edatagrid.js"></script>
 <link rel="stylesheet" href="../css/w3.css">
 
  <script type="text/javascript">
$(function(){
$('#dg').edatagrid({
onAdd: function(index,row){
var ed1 =$(this).datagrid('getEditor', {
                index: index,
                field: 'pcn'
           });
//$(ed1.target).focus();
var t = $(ed1.target).combogrid('textbox').focus();
t.focus();

}

});
});
</script>
 
 <style>
.w3-button {width:100px;height:30px;}
</style>

</head>
<body>
<table id="dg"  style="width:100%;height:250px" data-options="toolbar:'#toolbar', pagination:true, idField:'id', rownumbers:true, fitColumns:true, singleSelect:true">
        <thead>
            <tr>
                <th field="pcn"  width="50" editor="{type:'combogrid',options:{required:false,panelWidth:580,idField:'pcn',textField:'pcn',mode:'remote',url:'../control/get_product.php',columns: [[
{field:'pcn',title:'pcn',width:100},{field:'product',title:'product',width:250},{field:'unit',title:'unit',width:50},

]],

}}">Product</th>
<th field="unit" width="30" editor="{type:'validatebox',options:{readonly:false}}">Unit</th>
                <th field="qty" width="50" editor="{type:'validatebox',options:{required:true}}">Qty</th>

             
            </tr>
        </thead>
 </table>
<div align="right" style="margin:10 0 0">
<a href="#" id="btnSave" class="easyui-linkbutton c5" style="width:120px;height:35px">Save Transaction</a>
</div>
<div id="toolbar">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onClick="javascript:$('#dg').edatagrid('addRow')">New</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onClick="javascript:$('#dg').edatagrid('cancelRow')">Cancel</a>
    </div>


</body>
</head>
Pages: [1] 2 3
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!