hi, how can I show a tree instead the datagrid in a subgrid?

[catpaw]

I saw this demo:

http://www.jeasyui.com/tutorial/datagrid/datagrid22.php

And what I need is show a tree instead the datagrid

that is possible??

[stworthy]

It is easy to display any components in the row detail container. The code below shows how to achieve this functionality.

Code:

$('#dg').datagrid({
	view: detailview,
	detailFormatter:function(index,row){
		return '<div style="position:relative;overflow:auto;padding:2px;height:100px"><ul class="ddv"></ul></div>';
	},
	onExpandRow: function(index,row){
		var ul = $(this).datagrid('getRowDetail',index).find('ul.ddv');
		ul.tree({
			//...
		});
		$('#dg').datagrid('fixDetailRowHeight',index);
	}
});

[catpaw]

awesome stworthy

 

Im very thankful

[catpaw]

Hi

Continuing with the example,
place a tree in the subgrid
the tree has a checkbox to true

my problem is when :

- Open a row (+) and I get the list of tree that row , then I check some options
- Close that row (-)
- I open the back row ( +) and the options I had checked, no longer remain active

eg

1.-
--------------------------------------------------------------
| - | row1-colum1 | row1-colum 2                              |
--------------------------------------------------------------
|     | + | subrow1-column1 | subrow1-column1          |    --> if open this subrow
--------------------------------------------------------------
|     | + | subrow2-column1 | subrow2-column1          |
--------------------------------------------------------------
| + | row2-colum1 | row2-colum 2                             |
--------------------------------------------------------------
| + | row3-colum1 | row3-colum 2                             |
--------------------------------------------------------------

2.-
--------------------------------------------------------------
| - | row1-colum1 | row1-colum 2                              |
--------------------------------------------------------------
|     | - | subrow1-column1 | subrow1-column1           |
--------------------------------------------------------------
|             * [] Fruits                                                  |  --> get the tree
|             --- * [] apple                                             |
|             --- * [] orange                                           |      
--------------------------------------------------------------
|     | + | subrow2-column1 | subrow2-column1          |
--------------------------------------------------------------
| + | row2-colum1 | row2-colum 2                             |
--------------------------------------------------------------
| + | row3-colum1 | row3-colum 2                             |
--------------------------------------------------------------

3.-
--------------------------------------------------------------
| - | row1-colum1 | row1-colum 2                              |
--------------------------------------------------------------
|     | - | subrow1-column1 | subrow1-column1           |
--------------------------------------------------------------
|             * [ / ] Fruits                                               |  --> check some items
|             --- * [ / ] apple                                          |
|             --- * [] orange                                           |      
--------------------------------------------------------------
|     | + | subrow2-column1 | subrow2-column1          |
--------------------------------------------------------------
| + | row2-colum1 | row2-colum 2                             |
--------------------------------------------------------------
| + | row3-colum1 | row3-colum 2                             |
--------------------------------------------------------------

4.-
--------------------------------------------------------------
| - | row1-colum1 | row1-colum 2                              |
--------------------------------------------------------------
|     | + | subrow1-column1 | subrow1-column1          | --> close the subrow1
--------------------------------------------------------------
|     | + | subrow2-column1 | subrow2-column1          |
--------------------------------------------------------------
| + | row2-colum1 | row2-colum 2                             |
--------------------------------------------------------------
| + | row3-colum1 | row3-colum 2                             |
--------------------------------------------------------------

5.-
--------------------------------------------------------------
| - | row1-colum1 | row1-colum 2                              |
--------------------------------------------------------------
|     | - | subrow1-column1 | subrow1-column1           |
--------------------------------------------------------------
|             * [] Fruits                                                  |  --> open again subrow1 and the options I had selected, no longer remain active
|             --- * [] apple                                             |
|             --- * [] orange                                           |      
--------------------------------------------------------------
|     | + | subrow2-column1 | subrow2-column1          |
--------------------------------------------------------------
| + | row2-colum1 | row2-colum 2                             |
--------------------------------------------------------------
| + | row3-colum1 | row3-colum 2                             |
--------------------------------------------------------------

What I can do to make the boxes I check stay active?

here is my code

Code:

$('#dg').datagrid({
	view: detailview,
	detailFormatter:function(index,row){
		return '<div style=\'padding:2px\'><table id=\'ddv-'+index+'\'></table></div>';
	},
	onExpandRow: function(index,row){
		$('#ddv-'+index).datagrid({
			title:'',
			url:'get_data.php?id_s='+row.id_s+'&id_c='+row.id_c+'&id_p='+row.id_p,
			fitColumns:false,
			singleSelect:true,
			rownumbers:true,
			nowrap:false,
			width:790,
			height:'auto',
			pagination:true,
			pageSize:5,
			pageList:[5,10,15,20],
			columns:[[
				{field:'clave',title:'Clave',width:100,sortable:true},
				{field:'desc',title:'Descripcion',width:630,sortable:true}
			]],
			onResize:function(){
				$('#dg').datagrid('fixDetailRowHeight',index);
			},
			onLoadSuccess:function(data){
				setTimeout(function(){
					$('#dg').datagrid('fixDetailRowHeight',index);
				},0);
			},
			view: detailview,
			detailFormatter:function(indext,rowt){
				return '<div style="position:relative;overflow:auto;padding:2px;height:130px"><ul id=\'tdv-'+rowt.id_a+indext+'\'></ul></div>';
			},
			onExpandRow: function(indext,rowt){
				$('#tdv-'+rowt.id_a+indext).tree({
					url: 'get_data2.php?id_c='+rowt.id_c,
					lines: true,
					checkbox: true,
					cascadeCheck: false,
					loadFilter:function(rows){
						return convert(rows);
					}
				});
			}
		});
		$('#dg').datagrid('fixDetailRowHeight',index);
	}
});

[stworthy]

To solve your issue, please prevent from re-creating tree component again when expand a row. Try the code below:

Code:

onExpandRow: function(indext,rowt){
	var t = $('#tdv-'+rowt.id_a+indext);
	if (!t.data('tree')){
		t.tree({
			url: 'get_data2.php?id_c='+rowt.id_c,
			lines: true,
			checkbox: true,
			cascadeCheck: false,
			loadFilter:function(rows){
				return convert(rows);
			}
		});
	}
}

[catpaw]

perfect!!!

thank you very much, all your work is amazing