Howto customize color for:

1. Tabs
    - change tabs header color
    - change tabs body color

2. datagrid
    - change datagrid header color
    - change datagrid row, cell color

3. button
    - change button color

i want customer ui-cuppertino to be

 1. dark mode
 2. cyan mode
 3. blue mode
 4. orange mode

TIA

        _{that.chkEnterAlarm.checkbox('options').checked=data.enter_alarm===1;
        that.chkExitAlarm.checkbox('options').checked=data.exit_alarm===1;
        that.chkSendToWhatsApp.checkbox('options').checked=data.send_alarm_to_whatsapp===1;}
       


why above not working event if data.enter_alarm =1, data.exit_alarm=1, but state not checked,

how to set checked programmatically?, i don't use check method

howto set event onClose to dialog that already define in html markup

i try,

<div id="dlgEditVehicle" class="easyui-dialog" data-options="buttons:'#buttons',closed:true,resizable:true" style="width:500px;height:auto;padding:20px;">
        <form id="formEditVehicle">  
          <div class="form-layout">          
            <div class="row">
              <div class="label">User</div>
              <select class="easyui-combotree" name="id_user" id="cboUserInput" style="width:100%"></select>
            </div>
            <div class="row">
              <div class="label">Jenis GPS</div>
              <select class="easyui-combobox" name="id_gpsbrand" id="id_gpsbrand" data-options="valueField:'id',textField:'brand'"  style="width:100%"></select>
            </div>
            <div class="row">
              <div class="label">Jenis Object</div>
              <select class="easyui-combobox" name="object_type" id="object_type" data-options="valueField:'object_type',textField:'object_type'"  style="width:100%"></select>
            </div>
            <div class="row">
              <div class="label">Jenis Kendaraan</div>
              <select class="easyui-combobox" name="id_vhbrand" id="id_vhbrand" data-options="valueField:'id',textField:'vh_brand'"  style="width:100%"></select>
            </div>
            <div class="row">
              <div class="label">Nopol</div>
              <input class="easyui-textbox" name="nopol" id="nopol" style="width:100%">
            </div>
            <div class="row">
              <div class="label">IMEI</div>
              <input class="easyui-textbox" name="imei" id="imei" style="width:100%">
            </div>
            <div class="row">
              <div class="label">Phone</div>
              <input class="easyui-textbox" name="phone" id="phone" style="width:100%">
            </div>
          
          
            <div class="row">
              <div class="label">Password (Password kontrol GPS)</div>
              <input class="easyui-textbox" name="password" id="password" style="width:100%">
            </div>
            <div class="row">
              <div class="easyui-tabs" data-options="fit:true" style="height:300px;">
                  <div title="Setting Alarm" style="padding:10px">
                    <div class="form-layout">
                      <div class="row">
                        <div class="label">Max Parkir</div>
                        <input class="easyui-numberbox" name="max_park" id="max_park" value="0" style="width:100%">
                      </div>
                      <div class="row">
                        <div class="label">Max Offline</div>
                        <input class="easyui-numberbox" name="max_offline" id="max_offline" value="0" style="width:100%">
                      </div>
                    </div>
                  </div>
                  <div title="Kalibrasi Sensor" style="padding:10px">
                    <div class="form-layout">
                      <div class="row">
                        <div class="label">ADC Bawah</div>
                        <input class="easyui-numberbox" name="kalibrasi_adc1" id="kalibrasi_adc1" value="0" style="width:100%">
                      </div>
                      <div class="row">
                        <div class="label">ADC Atas</div>
                        <input class="easyui-numberbox" name="kalibrasi_adc2" id="kalibrasi_adc2" value="0" style="width:100%">
                      </div>
                      <div class="row">
                        <div class="label">Temperature Bawah</div>
                        <input class="easyui-numberbox" name="kalibrasi_temp1" id="kalibrasi_temp1" value="0" style="width:100%">
                      </div>
                      <div class="row">
                        <div class="label">Temperature Atas</div>
                        <input class="easyui-numberbox" name="kalibrasi_temp2" id="kalibrasi_temp2" value="0" style="width:100%">
                      </div>
                    </div>
                  </div>
                  <div title="Setting Kamera" style="padding:10px">
                    <div class="form-layout">
                      <div class="row">
                        <div class="label">Ada fitur kamera</div>
                        <div class="input">
                          <input class="easyui-checkbox" name="has_camera" id="has_camera">
                        </div>
                      </div>
                      
                    </div>
                  </div>
              </div>
            </div>
          
          </div>
        </form>
      </div>

//not working
$("#dlgEditVehicle").dialog("panel").onClose=function(){
     console.log("onclose fire");
}

//try another alternative, success but existing tabs inside dialog remove/missing
$("#dlgEditVehicle").dialog({
   onClose:function(){
      console.log('onclose fire, but existing tabs lose');
   }
});

jeasyui-passwordbox doesnot show password when toggle eye button

How to format a node tree to display 2 or more rows?

Helo
 
Howto remove icon tree for children node, but for parent still available...

Helo,

Is possible to show progressbar inside datagrid?

TIA

Hello,

Howto place frozenColumns right position?

TIA

Howto set treegrid icon with <img src='image/somefile.png'>, i dont want use iconCls ?

  $.messager.progress();
    pbHandler = $.ajax({
        url: 'php_script/report/report_trip.php',
        type: 'POST',
        dataType: 'json',
        data: data,
        success: function (objects)
        {
                
        }
       }).always(function () {
           console.log("complete");
           $.messager.progress('close');
      });

alwaays get error:

jquery.easyui.min.js:3925 Uncaught TypeError: Cannot read property 'onClose' of undefined

when twich call ajax, messenger won't closed

Problem Solve

when tile or msg set, problem gone!!!
 $.messager.progress({
            title:'Please waiting',
            msg:'Loading data...'
         });

Hi Jerry,

Great very help me,

TIA

Hi,

I have problem custom pagination to custom layout button and add searchbox for datagrid:

First time OK,

Code:

var pager = listVehicle.datagrid('getPager');
        pager.pagination({
            pageSize: 50,
            pageList: [50, 100, 200],
            layout: ['list', 'prev', 'next'],
            buttons: '#buttons',
            displayMsg: '' //{from} to {to} of {total} Data
        });

<div id="buttons">
    <table style="border-spacing:0">
        <tr>
            <td>
                <input class="easyui-searchbox" style="width:150px">
            </td>
            <td>
                <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true"></a>
            </td>
        </tr>
    </table>
</div>

But..., after call:

Code:

listVehicle.datagrid('loadData', {"total": 0, "rows": []});
    listVehicle.datagrid({
        queryParams: {
            user_id: id
        }
    });

Pagination back to default,

Help me please,

TIA,

Hi stworthy,

Very help me,

TIA,

Problem Solved....

Hello,

I have datagrid like this:

Code:

<table class="easyui-datagrid" style="width:400px;height:250px"
        data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">
    <thead>
        <tr>
            <th data-options="field:'id',width:100">ID</th>
            <th data-options="field:'name',width:100">Name</th>
            <th data-options="field:'price',width:100,align:'right'">Price</th>
        </tr>
    </thead>
</table>

Is possible find datagrid recording by id, and update record onthefly without reload again?

TIA