//Call the function when your table renders
$(document).on('knack-view-render.view_XXX', function (event, view , data) {
addGroupExpandCollapse(view);
})
// function that adds expand & collapse to tables with grouping
var addGroupExpandCollapse = function(view) {
var cols = $(’#’ + view.key + ’ > table’).find(“tr:first th”).length - 1;
Thanks everyone for contributing to this piece of code. I have found it very handy and thought I would share some of the changes I have made.
Without any code, you are looking at a table like this:
I have two columns in the table called school. The first is used to Group and the second is used to create a link to "edit" the school.
I wanted to not have the second column displayed and to have the link as part of the Group header line.
I added this javascript and CSS
//////////////////////////////////////////////////////////////////////////////////////////////////
//Call the function when your table renders to collapse the table
//
$(document).on('knack-view-render.view_xxx', function (event, view, data) {
allGroupExpandCollapse(view);
// pass the view and the cell class that has the href link
addGroupExpandCollapse(view, "field_111");
});
//////////////////////////////////////////////////////////////////////////
var addGroupExpandCollapse = function (view, classInUse) {
var viewEl = document.getElementById(view.key);
var trEls = viewEl.getElementsByTagName("tr");
var trElsCount = trEls.length;
for (i = 0; i < trElsCount; i++) {
if (trEls[i].classList.contains("kn-table-group")) {
// find the first 'td' element from the Group Header
var firstTd = trEls[i].getElementsByTagName("td")[0];
var rowText = $(firstTd).html();
var iconHtml = '<i class="fa fa-plus-square-o expand-collapse"></i>&nbsp;';
// find the first 'a' element in the first td from the next detail line
var cellTd = trEls[i + 1].getElementsByClassName(classInUse)[0];
var hrefA = cellTd.getElementsByTagName("a")[0];
if (hrefA != null) {
// replace existing html with a plus icon on all Group Header td
$(firstTd).html(iconHtml);
// copy the first 'a' element from the next detail line and append it to the Group Header td
$($(hrefA)).clone().appendTo($(firstTd));
} else {
// Display only the original text (no link) with the icon
$(firstTd).html(iconHtml + rowText);
}
}
}
$('#' + view.key + ' tbody .' + classInUse + ' span').css("visibility", "hidden");
// This line causes groups to be collapsed by default.
$('#' + view.key + ' .kn-table-group').nextUntil('.kn-table-group').toggle();
$('#' + view.key + ' .expand-collapse').css("cursor", "pointer");
$('#' + view.key).on("click", ".expand-collapse", function () {
var rowEl = $(this).closest("tr");
var rowElHtml = $(rowEl).html();
if (rowElHtml) {
if (rowElHtml.indexOf('fa-minus') !== - 1) {
$(rowEl).html(rowElHtml.replace('minus', 'plus'));
} else {
$(rowEl).html(rowElHtml.replace('plus', 'minus'));
}
}
$(rowEl).nextUntil('.kn-table-group').toggle();
});
}
//////////////////////////////////////////////////////
var allGroupExpandCollapse = function (view) {
Thank you very much for posting this code. I made a small modification that shows the correct icons when the groups are collapsed by default.
The code below has the groups collapsed and shows a "plus" icon for the group which then changes to the "minus" sign when the group is expanded. Below is the full code (make sure to change XXX to the name of your view):
//Call the function when your table renders $(document).on('knack-view-render.view_XXX', function (event, view , data) { addGroupExpandCollapse(view); })
This worked beautifully. I really appreciate everything you guys do. I have one, hopefully small request.
Does anyone know a way for the table, that this is applied to, to show all records. This works, but because my table has 150 records it will split it into two pages. Please help.
Thanks for Sharing. For some reason this code works on all of my table groups other than the very first entry which displays the "+" and "-" but they are non-functional. The buttons on all of the subsequent groups function. Any Tips?
Update: Never mind. I figured it out. In case anyone else has this problem. The code will not work on the first record if you have more than one field grouping assigned. Remove all but one of the field groupings and adjust the sort order on data to achieve the same results.
Then the code runs beautifully. Thanks again for sharing!
Hi all, thanks for posting all of your code! Just wondering - would anyone know how to customize the JS so that the table loads with all rows collapsed on default?
Lacking the JS experience but hoping to get our site up and running where it needs to be... would appreciate any advice offered.
Finally got it! I copied your second code but forgot to include this at the beginning... derp :-P
//Call the function when your table renders
$(document).on('knack-view-render.view_XXX', function (event, view , data) {
addGroupExpandCollapse(view);
})
Ha nice! I use VBA in Excel and have a little experience in Java but still very much a newbie. This is fun though isn't it!
I am using icons for my page menus / buttons so I don't think that's it. Does it matter that I used Steven's jquery code in combination with yours? Or should they still work together?
Newbie too Emay - old self-taught Access VBA dev here, and enjoying the challenge Knack is providing in making a switch.
I was thinking that if you don't use icons anywhere in your app then Knack might not call the library for icons to work, so maybe try adding an icon to something (a menu button or link) and see if that works.
I have not tested though as all my apps have icons somewhere and this code has always worked to date.
I like the idea of Knack contributors Stevan especially after benefitting from the likes of MS Access MVPs in my dark past, and more recently the sharing that’s happening here.