How to make onChange in Textbox but with query like show data in url combogrid, so render data in Textbox?
This my code but with combogrid. Please help me..

Code:

$('#idpo_customer').combogrid({
				panelWidth:550,
                                width:250,
				url: 'template/json/combogrid/cb_pocustomer.php',
				idField:'idpocustomer',
				textField:'nopo',
				mode:'remote',
                                fitColumns:true,
				columns:[[
                                        {field:'idpocustomer',title:'idpocustomer',align:'left',width:350,hidden:true},
                                        {field:'nopo',title:'No.PO',align:'left',width:350},
					{field:'tglpo',title:'Tgl. PO',align:'left',width:200},
                                        {field:'nama_customer',title:'Customer',align:'left',width:450},
                                        {field:'keterangan',title:'Keterangan',align:'left',width:300}
				]],
                            
                            onChange:function(newValue,oldValue){  
                                  $('#no_ppbj').combogrid({
                                            panelWidth:200,
                                            width:200,
                                            url: 'template/json/combogrid/cb_noppbj.php?idpocustomer='+newValue,
                                            idField:'kode_customer',
                                            textField:'kode_customer',
                                            mode:'remote',
                                            fitColumns:true,
                                            columns:[[
                                            {field:'kode_customer',title:'No.PPBJ',align:'left',width:160},
                                            ]],
                                    });
                                }
                                
            });

Code:

<input name="idpo_customer" id="idpo_customer" class="easyui-validatebox" data-options="required: true, width: 200, prompt: 'prompt1...'" autocomplete="off"/>
<input name='no_ppbj' id='no_ppbj' style="width: 200;" class="easyui-validatebox" required="true" autocomplete="off"/>

Hi,
I had a problem when using the sample code from this :
http://www.jeasyui.com/tutorial/datagrid/datagrid9.php
when i paste in php files under easyui-tabs become like this :

Code:

<div data-options="region:'center',iconCls:'icon-layout'" style="padding: 2px;">
                <div id="tabhome" class="easyui-tabs" style="width:auto;" >  
                        <div id="konten_menu" title="Konten" style="padding: 2px;">
                        <?php
                            include "data/beranda.php";   
                        ?>  
                        </div> 
                </div> 
        </div>

But if i paste under easyui-tabs become good...
Why with my code??

So not easy if I use array database, so manuall use include menu.php based group user
Thanks stworthy

I have code like this :

Code:

<div style="padding:5px;border:1px solid #ddd">
		<a href="index.php" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-home'">Home</a>
<?php
    $kueri_module=mysql_query("SELECT * FROM module ORDER BY no_urut");
    $no_module=1;
    while($array_module=mysql_fetch_array($kueri_module)){
        echo "<a href='#' class=easyui-menubutton data-options=menu:'#mm$no_module',iconCls:'icon-grid'>$array_module[module]</a>";
        echo "<div id='mm$no_module' style='width:150px;'>";
        
        $kueri_menu=mysql_query("SELECT * FROM menu WHERE id_module=$array_module[id] AND id_group_users=$kueri_user[id_group_users] ORDER BY no_urut");    
       
        while($array_menu=mysql_fetch_array($kueri_menu)){
            echo'<div data-options='."iconCls:'".$array_menu['icon_tag']."'".' id="'.$array_menu['id_tag'].'" class="'.$array_menu['class_tag'].'">'.$array_menu['nm_menu'].'</div>';
        }
        echo"</div>";                
        $no_module++;
    }
?>
</div>

Where do I put this code, for submenu?

Code:

<div style="width:150px;">

       

Any clue for me?

I want to create an input form at the top of the table. After submit the form, the form element to be clean, and the resulting data is instantly displayed in gridtabel.

I post code like this, what we need to change?

<?php require_once("../lib/fn_lib.php");
   session_start();
   isAjax();
   privilegesPage();
 ?>
<script>
function tb_hapus_customer(){
            $.messager.confirm('Konfirmasi','Yakin untuk menghapus?',function(hapusOK){
         if (hapusOK){
           var ids = [];  
            var rowss = $('#tt').datagrid('getSelections');  
             for(var i=0; i<rowss.length; i++){  
                ids.push(rowss.kode);  
            }
                $.ajax({
                  type: 'POST',
                  url: 'process/del_customer.php',
                  data:{ var_array:ids },
                
                  success: function(result){
                         var result = eval('('+result+')');
                         if (result.success){
                            $.messager.show({
                               title: 'Success',
                               msg: result.msg
                            });
                            $('#tt').datagrid('reload');
                         } else {
                            $.messager.show({
                               title: 'Error',
                               msg: result.msg
                            });
                         }
                      }
                });
                }
                })
    }
  
$(function(){
    $('#tt').datagrid({
        url: 'data/data_customer.php',
          rownumbers: true,
        pagination:true,
        striped:true,
        toolbar:'#toolbar',
        frozenColumns:[[
            {field:'ck',checkbox:'true',title:'all',width:75,align:'center'},
            {field:'kode_customer',title:'Kode Customer',width:85},  
            {field:'nama_customer',title:'Nama Customer',width:250},  
        ]],  
        columns:[[
            {field:'status_customer',title:'Status',width:110},
            {field:'alamat_customer',title:'Alamat',width:450},
            {field:'kota_customer',title:'Kota',width:110},
            {field:'kodepos_customer',title:'Kode Pos',width:85},
            {field:'sales_area_customer',title:'Sales Area Penjualan',width:125},
            {field:'telp1_customer',title:'Telp 1',width:85},
            {field:'telp2_customer',title:'Telp 2',width:85},
            {field:'tipe_customer',title:'Tipe',width:85},
            {field:'fax_customer',title:'Fax',width:105},
            {field:'email_customer',title:'Email',width:125},
            {field:'npwp_customer',title:'NPWP',width:150},
            {field:'payment_term',title:'Payment Term',width:125},
            {field:'credit_limit',title:'Credit Limit',width:125},
            {field:'credit_status',title:'Credit Status',width:125},
            {field:'general_note',title:'General Note',width:150},
        ]]
                    
    })
    
    
    $('#tb-edit-customer').linkbutton({  
        iconCls: 'icon-edit'  
    });
    
    $('#tb-hapus-customer').linkbutton({  
        iconCls: 'icon-remove'  
    });
    $('#tb-tambah-customer').linkbutton({  
        iconCls: 'icon-add'  
    });
//    $("#tb-tambah-customer").live('click',function(){
//        $('#dlg-buttons').show();  
//       var f_url = 'customer';
//        buildForm(f_url);
//    })
    
    $("#tb-edit-customer").live('click',function(){
      $('#dlg-buttons').show();  
       var row = $('#tt').datagrid('getSelected');
       if (row){
              var f_url = 'customer';
              $.ajax({
                 url: "template/form/fa_"+f_url+".php?id="+row.id,
                 dataType: 'json',
                 timeout: 2000,
                 error: function() {
                          
                 },
                 success: function(xr){
                    var ctn = xr.content;
                    editUser(xr.ftitle,f_url+".php?id="+row.id,ctn.replace(/\\/,""),xr.dtitle);
                 }   
              })
           }
           
        })
})
</script>
<style type="text/css">
        a{
         text-decoration: none;  
        }
        a:hover{
         text-decoration: underline;
        }
        #field_form {
           background:#EBF4FB none repeat scroll 0 0;
           border:2px solid #B7DDF2;
           width: 90%;
            margin-bottom: 10px;
        }
        .field_form_confirm {
        
           border:2px solid #B7DDF2;
           width: 700px;
            margin-bottom: 10px;
        }
        legend {
           color: #fff;
           background: #80D3E2;
           border: 1px solid #781351;
           padding: 2px 6px
        }
    </style>
  <script type="text/javascript">        

$(function(){            
    $('#tutup_form').linkbutton({  
        iconCls: 'icon-cancel'  
    });
    $('#kode,#nama,#alamat,#kota,#telp1').validatebox({
            required:true
        })
    $('#ttserta').tabs({  
        border:false,  
    });
          
        $('#form_customer').form({  
            url:'process/fse_customer.php',  
            onSubmit:function(){  
                return $(this).form('validate');  
            },  
            success:function(data){
         document.location.reload(true);
      }
        });
      
        
    })
    </script>
        <form id="form_customer" method="POST">
        <table width="auto" border="0">
            
        <tr>
          <td>
              <fieldset id="field_form"><legend><b>DATA CUSTOMER</b></legend>
            <table border="0">
            <tr><td width="100">Kode</td>
                <td>&nbsp;:</td>
                <td width="300"><input name='kode' id='kode' autocomplete="off" />&nbsp; </td>
            </tr>
            <tr><td>Nama</td>
                <td>&nbsp;:</td>
                <td><input name='nama' id='nama' size="40" autocomplete="off"/>&nbsp; </td>
            </tr>
            <tr><td>Alamat</td>
                <td>&nbsp;:</td>
                <td><textarea name="alamat" rows="3" cols="25" autocomplete="off"></textarea></td>
            </tr>
            <tr><td>Kota</td>
                <td>&nbsp;:</td>
                <td><input name='kota' id='kota' style="width: auto;" autocomplete="off"/></td>
            </tr>
            <tr><td>Kode Pos</td>
                <td>&nbsp;:</td>
                <td><input name='kodepos' id='kodepos' style="width: auto;" autocomplete="off"/> </td>
            </tr>
            <tr><td colspan="3"><hr></td></tr>
            <tr><td>Telp 1</td>
                <td>&nbsp;:</td>
                <td><input name='telp1' id='telp1'  style="width: auto;" autocomplete="off" /> </td>
            </tr>
            <tr><td>Telp 2</td>
                <td>&nbsp;:</td>
                <td><input name='telp2' id='telp2'  style="width: auto;" autocomplete="off" /> </td>
            </tr>
            <tr><td>Fax</td>
                <td>&nbsp;:</td>
                <td><input name='fax' id='fax'  style="width: auto;" autocomplete="off"/> </td>
            </tr>
            <tr><td>Email</td>
                <td>&nbsp;:</td>
                <td><input name='email' id='email'  style="width: auto;" autocomplete="off"/> </td>
            </tr>
        </table>
        </fieldset></td>
          <td>
        <fieldset id="field_form"><legend><b>SETTING PENJUALAN</b></legend>
        <table border="0">
            <tr><td width="100">Tipe Customer</td>
                <td>&nbsp;:</td>
                <td width="300"><input name='tipe' id='tipe' autocomplete="off" /> </td>
            </tr>
            <tr><td>Area Penjualan</td>
                <td>&nbsp;:</td>
                <td><input name='sales_area' id='sales_area' autocomplete="off" /> </td>
            </tr>
            <tr><td>NPWP</td>
                <td>&nbsp;:</td>
                <td><input name='npwp' id='npwp' autocomplete="off" /></td>
            </tr>
            <tr><td>Credit Limit</td>
                <td>&nbsp;:</td>
                <td><input name='credit_limit' id='credit_limit' autocomplete="off"/> </td>
            </tr>
            <tr><td>Credit Status</td>
                <td>&nbsp;:</td>
                <td><input name='credit_status' id='credit_status' autocomplete="off"/> </td>
            </tr>
            <tr><td>Payment Term</td>
                <td>&nbsp;:</td>
                <td><input name='payment_term' id='payment_term' autocomplete="off"/> </td>
            </tr>
            <tr><td>Status Customer</td>
                <td>&nbsp;:</td>
                <td><input name='status_customer' id='status_customer' autocomplete="off"/> </td>
            </tr>
            <tr><td>Keterangan</td>
                <td>&nbsp;:</td>
                <td><textarea name="general_notes" rows="3" cols="25"></textarea></td>
            </tr>
            <tr><td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr><td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
        </table>
        </fieldset> </td>
        </tr>
        <tr><td>&nbsp;&nbsp;<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#form_customer').submit()">Submit</a></td></tr>
        </table>
         </form>
    
<table id='tt'>
</table>
<div id="toolbar">
    <a href="#"  plain="true" id="tb-tambah-customer">Baru</a>
    <a href="#"  plain="true" id="tb-edit-customer">Edit</a>  
    <a href="#"  plain="true" onclick="tb_hapus_customer()" id="tb-hapus-customer">Hapus</a>  
</div>  
    

Thanks jarry , Solved.

Hi,

I have form add, with dropdown on change to other dropdown.
Success for add. When update why not show data on dropdown?
Source when add :
$data['content']="<script type='text/javascript'>
    $('#id_group_users').combogrid({
               
            panelWidth:270,
                                width:300,
            url: 'template/json/combogrid/cb_group_users.php',
            idField:'id',
            textField:'group_users',
            mode:'remote',
   
            fitColumns:true,
            columns:[[
                       
               {field:'group_users',title:'Group Users',align:'left',width:140},
                  
            ]],
                               
                onChange:function(newValue,oldValue){
                    var modul=$('#id_module').combogrid('getValue');
                    $('#id_menu').combogrid({
                      panelWidth:370,
                                width:300,
                      url: 'template/json/combogrid/cb_menu.php?level='+newValue+'&modul='+modul,
                      idField:'id_menu',
                      textField:'ordered',
                      mode:'remote',
                                fitColumns:true,
                      columns:[[
                         {field:'id',title:'Kode',width:50,align:'center'},
                         {field:'nm_menu',title:'Nama Menu',align:'left',width:160},
                                        {field:'no_urut',title:'No Urut',align:'left',width:50},
                      ]]
                    });
                    }
    });

// how to show to #id_menu when update?
    $('#id_menu').combogrid({
            panelWidth:270,
                                width:300,
    });
    $('#status_aktif').combobox({
       panelHeight:'auto'
        });
      $('#id_module').combogrid({
               
            panelWidth:270,
                                width:300,
            url: 'template/json/combogrid/cb_module.php',
            idField:'id',
            textField:'module',
            mode:'remote',
                                fitColumns:true,
            columns:[[
                       
               {field:'id',title:'Kode',width:50,align:'center'},
               {field:'module',title:'Module',align:'left',width:160}
            ]]
    }); 
    </script>";

Its work. Thanks stworthy. 

If you set the 'fitColumns' to true, the columns will be expanded/contracted to fit the grid width and prevent horizontal scrolling. So please set the 'fitColumns' to false to enable horizontal auto scroll in datagrid.

Code:

$('#dg-customers').datagrid({  
  fitColumns: false,
  //...
});

First posting, I use CI and have view "page_customers.php"like this.

<table id="dg-customers" class="easyui-datagrid" data-options="iconCls:'icon-reload',fit:true,toolbar: '#tb-customers',border:false"></table>

and other view "page_customers_js.php" like this

$(document).ready(function() {
   
    $('#dg-customers').datagrid({ 
        url:'<?=site_url('ajax/ajaxGetCustomers')?>',
      fitColumns: true,
        striped: true,
        rownumbers: true,
        singleSelect: true,
        pagination: true,
        pageSize: 30,
        frozenColumns:[[
        {field:'cus_code',title:'Kode',width:50,sortable:true},
        {field:'cus_name',title:'Nama',width:200,sortable:true},
        ]],
        columns:[[ 
            {field:'cus_cont',title:'Contact Person',width:150,sortable:true},
            {field:'cus_telp',title:'No. Telp',width:175,sortable:true},
            {field:'cus_fax',title:'Fax',width:200,sortable:true},
            {field:'cus_adr',title:'Alamat',width:400,sortable:true},
            {field:'cus_city',title:'Kota',width:150,sortable:true},
            {field:'cus_npwp',title:'NPWP',width:150,sortable:true},
        ]],
      onHeaderContextMenu: function(e, field){
         e.preventDefault();
         if (!$('#tmenuCustomers').length){
            createColumnMenuCustomers();
         }
         $('#tmenuCustomers').menu('show', {
            left:e.pageX,
            top:e.pageY
         });
      },
        onDblClickRow: function(index,data){
             $('#editCustomers').click();
        }
    });
   
    function createColumnMenuCustomers(){
      var tmenu = $('<div id="tmenuCustomers" style="width:100px;"></div>').appendTo('body');
      var fields = $('#dg-customers').datagrid('getColumnFields');
      for(var i=0; i<fields.length; i++){
         $('<div iconCls="icon-ok"/>').html(fields).appendTo(tmenuCustomers);
      }
      tmenu.menu({
         onClick: function(item){
            if (item.iconCls=='icon-ok'){
               $('#dg-customers').datagrid('hideColumn', item.text);
               tmenu.menu('setIcon', {
                  target: item.target,
                  iconCls: 'icon-empty'
               });
            } else {
               $('#dg-customers').datagrid('showColumn', item.text);
               tmenu.menu('setIcon', {
                  target: item.target,
                  iconCls: 'icon-ok'
               });
            }
         }
      });
    }

How could I show grid with freeze column?
Thanks