EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: harik on November 25, 2014, 04:37:10 AM

Title: Expanded datagrid-detailview & detailview has button to add multiple rows
Post by: harik on November 25, 2014, 04:37:10 AM

Datagrid needs to be expanded detailview(subgrid) without (+ or -) sign in the datagrid. detailview(subgrid) has 'Add Button' with two text fields. Each click on 'Add button' add text field rows in detailview same same master. detailview records should be refer to master row.
when Save/update total should process to persist(master row with detailview).

Could you please provide sample code snippet to achieve this.
Thanks in advance.

Title: Re: Expanded datagrid-detailview & detailview has button to add multiple rows
Post by: stworthy on November 25, 2014, 05:28:05 AM

You can call 'expandRow' or 'collapseRow' methods to expand or collapse a row. If you want to keep all rows expanded when loading data successfully, please try the following code.

Code:

$('#dg').datagrid({
	onLoadSuccess:function(){
		var count = $(this).datagrid('getRows').length;
		for(var i=0; i<count; i++){
			$(this).datagrid('expandRow', i);
		}
	}
})

Title: Re: Expanded datagrid-detailview & detailview has button to add multiple rows
Post by: harik on November 25, 2014, 05:40:54 AM

Thanks stworthy,

To list out all records, i want to make detailview should view by default when it has data. If no data i don't want show detailview. While adding(new )/editing master record only detailview show with 'Add button' with two text fields.

Could you please help me.

Title: Re: Expanded datagrid-detailview & detailview has button to add multiple rows
Post by: stworthy on November 25, 2014, 06:12:46 AM

Is is simple to expand or collapse a row according to your special conditions.

Code:

if (some condition){
  $('#dg').datagrid('expandRow',...);
  //or
  //$('#dg').datagrid('collapseRow',...);
}