This question is locked. New answers and comments are not allowed.
So I have a grid that has a DetailView, and I wanted a way to be able to expand/collapse all of the rows with one click.
I thought I'd share my solution just in case someone else needs to do the same thing.
In either the document ready handler, or the grid onDataBound event handler, add the following to add a link in the header of the detail view column:
Then create a function that will handle the expanding/collapsing:
If someone else has a more elegant idea, please share it.
I added this code to a global javascript file that is referenced by every page so that all of my grids would have this capability. It'd be better to add this to the grid's databound event so that it resets it to the expand icon when the grid refreshes.
I thought I'd share my solution just in case someone else needs to do the same thing.
In either the document ready handler, or the grid onDataBound event handler, add the following to add a link in the header of the detail view column:
$(document).ready(
function
() {
$(
'th.t-hierarchy-cell'
).html(
'<a href="#" title="Expand/Collapse all" onclick="return toggleDetail(this);" class="t-icon t-plus"></a>'
);
});
Then create a function that will handle the expanding/collapsing:
function
toggleDetail(e) {
var
grid = $(e).closest(
'.t-grid'
).data(
'tGrid'
);
if
($(e).hasClass(
't-minus'
)) {
grid.$rows().each(
function
(index) { grid.collapseRow(
this
); })
$(e).removeClass(
't-minus'
);
}
else
{
grid.$rows().each(
function
(index) { grid.expandRow(
this
); })
$(e).addClass(
't-minus'
);
}
return false;
}
If someone else has a more elegant idea, please share it.
I added this code to a global javascript file that is referenced by every page so that all of my grids would have this capability. It'd be better to add this to the grid's databound event so that it resets it to the expand icon when the grid refreshes.