Recent Posts

Thanks jarry !- works great

one minor typo, subgrid needs to be subgrid1

Code:

const row = $('#subgrid1').datagrid('getSelected');

Define the 'id' property for the subgrid component and you will be able to access the selected row of the subgrid.

Code:

subgrid:{
	options:{
		id:'subgrid1',
		fitColumns:true,
		singleSelect:true,
		autoUpdateDetail:false,
		url:'scripts/database/get_costs.php',

Code:

const row = $('#subgrid').datagrid('getSelected');
console.log(row);

Please make sure to download the latest 'datagrid-detailview.js' file from https://www.jeasyui.com/extension/datagridview.php.

This issue has been fixed. Please update to the latest version.

Hello

I have a datagrid and subgrid as below

Code:

var conf = {
						
	options:{
		fitColumns:true,
		toolbar:'#toolbar',
		columns:[[
			{field:'name',title:'name',width:12},
			{field:'amt1',title:'amt1',width:10,align:'right'},									
			{field:'amt2',title:'amt2',width:10,align:'right'},
			{field:'total',title:'Total',width:10,align:'right',		
			styler: function(value,row,index){     
				if (value.charAt(0) == '-'){
			return 'color:red;';}
			}},
			{field:'adjust',title:'Adjust',width:10,align:'right',
			styler: function(value,row,index){     
				if (value.charAt(0) == '-'){
			return 'color:red;';}
			}},	
			{field:'balance',title:'Balance',width:10,align:'right',
			styler: function(value,row,index){     
				if (value.charAt(0) == '-'){
			return 'color:red;';}
			}},	
			]],
			},

			subgrid:{
				options:{
					fitColumns:true,
					singleSelect:true,
					autoUpdateDetail:false,
					url:'scripts/database/get_costs.php',
					foreignField:function(row){
					var dp = $('#yearCombo').combobox('getValue');
                    return {
                        name:row.name,
                        year:dp
                    }},								
					columns:[[
						{field:'date',title:'Date',width:8},	
						{field:'cst1',title:'Cost 1',width:7,halign:'center',align:'right',
						 styler: function(value,row,index){     
 	 				              if (value.charAt(0) == '-'){
     					return 'color:red;';}
					        	}},									
						{field:'cst2',title:'Cost 2',width:7,halign:'center',align:'right'},
						{field:'total_cst',title:'Total',width:7,halign:'center',align:'right'},
                        ]],
						}
					}
	};

I have a form to to edit the values from the sub grid, however this enatils adding a button to each subgrid line

Is there a way to get the row values from a selected sub grid line, without adding a button on each sub grid line..., instead by using a button on the toolbar

Thank you

Please see below additional code in the hope this will help

Code:

var conf = {
						
	options:{
		fitColumns:true,
		toolbar:'#toolbar',
		columns:[[
			{field:'name',title:'name',width:12},
			{field:'amt1',title:'amt1',width:10,align:'right'},									
			{field:'amt2',title:'amt2',width:10,align:'right'},
			{field:'total',title:'Total',width:10,align:'right',		
			styler: function(value,row,index){     
				if (value.charAt(0) == '-'){
			return 'color:red;';}
			}},
			{field:'adjust',title:'Adjust',width:10,align:'right',
			styler: function(value,row,index){     
				if (value.charAt(0) == '-'){
			return 'color:red;';}
			}},	
			{field:'balance',title:'Balance',width:10,align:'right',
			styler: function(value,row,index){     
				if (value.charAt(0) == '-'){
			return 'color:red;';}
			}},	
			]],
			},

			subgrid:{
				options:{
					fitColumns:true,
					singleSelect:true,
					autoUpdateDetail:false,
					url:'scripts/database/get_costs.php',
					foreignField:function(row){
					var dp = $('#yearCombo').combobox('getValue');
                    return {
                        name:row.name,
                        year:dp
                    }},								
					columns:[[
						{field:'date',title:'Date',width:8},	
						{field:'cst1',title:'Cost 1',width:7,halign:'center',align:'right',
						 styler: function(value,row,index){     
 	 				              if (value.charAt(0) == '-'){
     					return 'color:red;';}
					        	}},									
						{field:'cst2',title:'Cost 2',width:7,halign:'center',align:'right'},
						{field:'total_cst',title:'Total',width:7,halign:'center',align:'right'},
                        ]],
						}
					}
	};

Hi Jarry.

Nice, thanks

Jesper

Here is the extended method that will be included into next version.

Code:

(function ($) {
	function findBy(target, field, value) {
		var state = $.data(target, 'treegrid');
		var result = null;
		$.easyui.forEach(state.data, true, function (node) {
			if (node[field] == value) {
				result = node;
				return false;
			}
		});
		return result;
	}
	$.extend($.fn.treegrid.methods, {
		findBy: function (jq, param) {
			return findBy(jq[0], param.field, param.value);
		}
	})
})(jQuery)

Hello

I have a nested Grid

The following styler works fine on the main grid, but not the sub grid

Code:

columns:[[
{field:'adjust',title:'Adjust',width:10,align:'right',
          styler: function(value,row,index){     
 	 	    if (value.charAt(0) == '-'){
                    return 'color:red;';}
}},	
]],

Any suggestions why ??

Thank you

most of control not renderin on
https://www.jeasyui.com/demo-angular/main/index.php
address

please update site

Hi.

In tree there is a findby, but not in treegrid.