So I'm using the expand row form within the datagrid, however I've run into a design flaw in the demo/tutorial and I can't find good documentation on this issue. The problem is thus. First of all I wanted the datagrid to continue to expand and have no maximum length as this causes a double scroll bar in mobile devices. However because that is turned off the expand row view form is really really small and very difficult to use when there is 1-2 records in the datagrid. It gets subsequently better and the datagrid gets overall larger. But the problem is still there when the total rows become "less optimum" for this feature.
The code from this page datagrid-detailview.js is the culprit.
$.extend($.fn.datagrid.methods, {
fixDetailRowHeight: function(jq, index){
return jq.each(function(){
var opts = $.data(this, 'datagrid').options;
if (!(opts.rownumbers || (opts.frozenColumns && opts.frozenColumns.length))){
return;
}
var dc = $.data(this, 'datagrid').dc;
var tr1 = opts.finder.getTr(this, index, 'body', 1).next();
var tr2 = opts.finder.getTr(this, index, 'body', 2).next();
// fix the detail row height
if (tr2.is(':visible')){
tr1.css('height', '');
tr2.css('height', '');
/*
THIS IS THE CULPRIT LINE IN THE CODE THAT SEEMS TO BE THE START OF THE ISSUES.
If I set this code height to be larger the 'opening' to edit the data is bigger, but there is some sort of centring of the fields within that
opening which is turned on, which I still have to scroll to use the fields within.
*/
// var height = Math.max(tr1.height(), tr2.height()); //Original code
var height = Math.max(tr1.height(), tr2.height()) + 100; //My testing modification code - less than optimal.
tr1.css('height', height);
tr2.css('height', height);
}
dc.body2.triggerHandler('scroll');
});
},
getExpander: function(jq, index){ // get row expander object
var opts = $.data(jq[0], 'datagrid').options;
return opts.finder.getTr(jq[0], index).find('span.datagrid-row-expander');
},
// get row detail container
getRowDetail: function(jq, index){
var opts = $.data(jq[0], 'datagrid').options;
var tr = opts.finder.getTr(jq[0], index, 'body', 2);
return tr.next().find('div.datagrid-row-detail');
},
expandRow: function(jq, index){
return jq.each(function(){
var opts = $(this).datagrid('options');
var dc = $.data(this, 'datagrid').dc;
var expander = $(this).datagrid('getExpander', index);
if (expander.hasClass('datagrid-row-expand')){
expander.removeClass('datagrid-row-expand').addClass('datagrid-row-collapse');
var tr1 = opts.finder.getTr(this, index, 'body', 1).next();
var tr2 = opts.finder.getTr(this, index, 'body', 2).next();
tr1.show();
tr2.show();
$(this).datagrid('fixDetailRowHeight', index);
if (opts.onExpandRow){
var row = $(this).datagrid('getRows')[index];
opts.onExpandRow.call(this, index, row);
}
}
});
},
collapseRow: function(jq, index){
return jq.each(function(){
var opts = $(this).datagrid('options');
var dc = $.data(this, 'datagrid').dc;
var expander = $(this).datagrid('getExpander', index);
if (expander.hasClass('datagrid-row-collapse')){
expander.removeClass('datagrid-row-collapse').addClass('datagrid-row-expand');
var tr1 = opts.finder.getTr(this, index, 'body', 1).next();
var tr2 = opts.finder.getTr(this, index, 'body', 2).next();
tr1.hide();
tr2.hide();
dc.body2.triggerHandler('scroll');
if (opts.onCollapseRow){
var row = $(this).datagrid('getRows')[index];
opts.onCollapseRow.call(this, index, row);
}
}
});
}
});