The output is as follow, as expected:

<div style="text-align:right;" class="datagrid-cell datagrid-cell-c2-cost">
"BUY Total "
<br>
" SELL Total"
</div>

However, the "SELL Total" line cannot be displayed in the datagrid cell box.
BTW, if I remove the '<br>' in the PHP source, it will display "BUY Total SELL Total" in one line.

Any enlightenment?
Thx,
Mak

I return the data inside a datagrid with PHP. I want to show 2 lines in a footer cell, with:

....
....
   $foot1['cost'] = "BUY Total <br> SELL Total";
   $footer[] = $foot1;
....
....
   
the cell only display 'BUY Total', the 2nd line does not display;
any solution??

rgds,
Mak

I have a datagrid with 2 columns (id and temperature) , something like below:   

<table id="dg" title="View Log" class="easyui-datagrid" style="width:auto;height:auto;"
            url="getlog.php" >
        <thead>
            <tr>
                <th field="id">ID</th>
                <th field="temperature">Temperature</th>
            </tr>
        </thead>
</table>

How can I retrieve the array of temperature values from the datagrid,
arr  = $('#dg').datagrid('options').columns['temperature']   does not work.

thanks,
Mak

I want to have a textbox showing 'the sky is blue', but the following code working, please enlighten me:


 <input  id='ititle' name='title' class='easyui-textbox'  style="width:100%;">

     <script type="text/javascript"> 
       
     $(function(){ 
      $('#ititle').textbox('setValue',"the sky is <font color='blue'>blue</font>");
     });  // end $function()
      
</script>

I write a short code to display the number of character user input into the textbox, on each textbox.keydown event.
However, the code did not work for user input greater than 1 character. It work again if I put an 'alert()' function inside, as shown, please enlighten me.....

   <input  id='title'  class='easyui-textbox'> </div>
   <div id='count'></div>   

    <script type="text/javascript"> 

       $(function(){ 
      
            $('#title').textbox('textbox').bind('keydown', function (e) {
            s = $('#title').val();
            cnt = (s.length+1).toString();

// uncomment the following and the program will work
//alert(cnt);

            $('#count').text(cnt);

            });      
   
         
        });  // end $function()
   </script>

I have subgrid defined under master datagrid 'dg', as follow. How can I retrieve the index of the highlighted row of the subgrid and hence the value of, say, 4th row in the 'Date' column of the expanded subgrid?

Code:

$(function(){
		
		
			$('#dg').datagrid({
				view: detailview,
				detailFormatter:function(index,row){
					return '<div style="padding:2px"><table class="ddv"></table></div>';
				},
				onExpandRow: function(index,row){
					var ddv = $(this).datagrid('getRowDetail',index).find('table.ddv');
					
					ddv.datagrid({
						url: "gettxprog.php?patno=901215&txnum=" + row.txnum,
						//url:'datagrid22_getdetail.php?itemid='+row.itemid,
						fitColumns:true,
						edatagrid:true,
						singleSelect:true,
						rownumbers:true,
						loadMsg:'',
						height:'auto',
						toolbar:subTb,
						columns:[[
							{field:"txdate", title:'Date', width:30, editor:'text'},  
							{field:"descp", title:'Detail', width:80, editor:'text'},  
							{field:"stage", title:'Stage', width:20, editor:'text'},  
							{field:"payway", title:'Pay Method', width:20, editor:'text'},  
							{field:"paid", title:'Paid', width:20, editor:'text'},  
							{field:"dr", title:'Dr', width:20, editor:'text'}  
						]],
						onResize:function(){
							$('#dg').datagrid('fixDetailRowHeight',index);
						},
						onLoadSuccess:function(){
							setTimeout(function(){
								$('#dg').datagrid('fixDetailRowHeight',index);
							},0);
						}
					});
					$('#dg').datagrid('fixDetailRowHeight',index);
				}
			});

I have created a grid, with subgrid  as follow (it is more or less the same as the example code)
The problem is: How can I add a toolbar to this sub-grid? Thx

Code:

$(function(){
		
		
			$('#dg').datagrid({
				view: detailview,
				detailFormatter:function(index,row){
					return '<div style="padding:2px"><table class="ddv"></table></div>';
				},
				onExpandRow: function(index,row){
					var ddv = $(this).datagrid('getRowDetail',index).find('table.ddv');

					ddv.datagrid({
						url: "gettxprog.php?patno=901001&txnum=" + row.txnum,
						//url:'datagrid22_getdetail.php?itemid='+row.itemid,
						fitColumns:true,
						singleSelect:true,
						rownumbers:true,
						loadMsg:'',
						height:'auto',
						columns:[[
							{field:"txdate", title:'Date', width:30},  
							{field:"descp", title:'Detail', width:80},  
							{field:"stage", title:'Stage', width:20},  
							{field:"payway", title:'Pay Method', width:20},  
							{field:"paid", title:'Paid', width:20},  
							{field:"dr", title:'Dr', width:20}  
						]],
						onResize:function(){
							$('#dg').datagrid('fixDetailRowHeight',index);
						},
						onLoadSuccess:function(){
							setTimeout(function(){
								$('#dg').datagrid('fixDetailRowHeight',index);
							},0);
						}
					});
					$('#dg').datagrid('fixDetailRowHeight',index);
				}
			});
			

Usually after editing a row in datagrid, the script call $('#dg').datagrid('validateRow',index) to do data validation.
Does anybody knows what will this 'validateRow' do?
(1) does it call up the field editor to validate the data entered, or
(2) call a built-in 'validateRow' function (which can be overridden by programmer) to do the data validation?

Sorry, forget to post the intercepting code.
I think this is related to the code imperfection.

            switch(e.keyCode){
               case 38:   // up
                  var selected = $('#dg').datagrid('getSelected');

                  if (selected){
                     var index = $('#dg').datagrid('getRowIndex', selected);
                     $('#dg').datagrid('selectRow', index-1);
                  } else {
                     $('#dg').datagrid('selectRow', 0);
                  }
                  break;
               case 40:   // down
                  var selected = $('#dg').datagrid('getSelected');
                  if (selected){
                     var index = $('#dg').datagrid('getRowIndex', selected);
                     $('#dg').datagrid('selectRow', index+1);
                  } else {
                     $('#dg').datagrid('selectRow', 0);
                  }
                  break;

Hi Korenanzo;

Please try the following:

With the keybinding in effect, suppose there are 10 rows displayed in the datagrid (NB with row editing enabled) and your selection was at row 10. Try hit down arrow. The selection disappear. Then try click a row, say row 10, with your mouse. You cannot get row 10 into editing mode again.

In other words, we need to write some code to guard against selection moving out of the page boundary.

mak

I have a datagrid and use 2 separate methods to intercept keystroke in it, as shown below. But both fail to work, please enlighten me what was wrong in the code:

<table id="dg"  class="easyui-datagrid" style="width:800px;height:350px"  toolbar="#summtoolbar" pagination="true" idField="id"  multiSort='false'  autoRowHeight="false" rownumbers="true" fitColumns="true" singleSelect="true"  striped="true" showFooter="true" pageList="[10,20,30,40]" data-options="method: 'get', onDblClickCell: onDblClickCell,  onClickCell: onClickCell, onEndEdit: onEndEdit" > 

......

</table>


// method 1 to alert keystroke
$('#dg').datagrid('getPanel').panel('panel').attr('tabindex',1).bind('keydown',function(e){
    alert(e.keyCode);
});

// method 2 to alert keystroke
$('#dg').datagrid('getPanel').bind('keydown',function(e){
    alert(e.keyCode);
});

Dear Sir;
You have edatagrid class in previous version of EasyUi, where I can double click a row in a datagrid to start cell editing. Can I do this in the latest datagrid class?

thx,
mak

Dear Sir;
Please enlighten me to find the doc of the method/properties for pager and row objects.

Thanks

Dear All;

I want to write a line in javascript which simulate a click on the 'last page' button of the paginated datagrid.
How can I do this?


Mak

I think of 2 ways to assign column values in datagrid:
(1) method One, assign column with an array variable:

      var fldArr = [[
         {field:'id',title:'id'}
      ]];

      $('#dgtest').datagrid({
         url:"test.php",
         columns: fldArr
      });   

(2) Method Two: assign columns inside the datagrid declaration

      $('#dgtest').datagrid({
         url:"test.php",
         columns:  [[
            {field:'id',title:'id'}
              ]]
      });   

Method One did not work, Method Two succeeded. What's wrong with the variable method?