2. PHPRunner General questions
  3. [SOLVED] "...see more" ("...see less") with details tables
This topic is locked
[SOLVED]

"...see more" ("...see less") with details tables

 		7/22/2024 14:27:07
PHPRunner General questions
Davor Geci authorDevClub member

Hello,
on some pages I have a list that is having a lot of detail tables.
I like the text link with the number of records for details links.
But when I have a lot of detail tables the row becomes too stretched.
How can I make it so that if I have more than two tables with details, it narrows the row and displays only the first two details. And give me a link with "...see more" ("...see less") and "expand/collapse" in the header
See the images:

img alt

img alt

Davor Geci authorDevClub member 8/16/2024

With help from Sergey in the latest DevClub webinar providing directions, little searching and some ChatGPT, I have managed to solve the challenge of collapse/expand in Grid.
Here is the end result (if GIF works):

img alt

Here is the code if someone needs this type of show more / show less in grid.
All the buttons (links) are generated in code.
Code in Javascript Onload Event:

$(document).ready(function() {
// Define variables for text and page identifier
var pageId = "employees_list"; // Page identifier variable

var headerShowAllText = 'Show All'; // Text for the header link
var headerShowLessText = 'Show Less'; // Text for the header link
var detailsShowMoreText = '>>> View More'; // Base text for the details links with right pointers
var detailsShowLessText = '<<< View Less'; // Base text for the details links with left pointers

// Function to update the text of the toggle link with the count of hidden details
function updateToggleText($toggleButton, $links) {
var hiddenCount = $links.filter(':hidden').length;
if (hiddenCount > 0) {
$toggleButton.text(`${detailsShowMoreText} (${hiddenCount})`);
} else {
$toggleButton.text(detailsShowLessText);
}
}

// Function to toggle visibility of details in all rows
function toggleAllRows(showAll) {
$('td[data-page="' + pageId + '"]').each(function() {
var $td = $(this);
var $links = $td.find('span[data-itemtype="grid_details_link"]');

if (showAll) {
$links.show();
updateToggleText($td.find('.toggleLinks'), $links);
} else {
$links.slice(3).hide();
updateToggleText($td.find('.toggleLinks'), $links);
}
});
}

// Create and add the header toggle button
var $headerCell = $('th[data-cellid="grid_headcell_details"]');
var $headerToggleButton = $('<a href="javascript:void(0)" class="header-toggle">' + headerShowAllText + '</a>');
$headerCell.append($headerToggleButton);

// Add click event to the header toggle button
var allExpanded = false;
$headerToggleButton.on('click', function() {
allExpanded = !allExpanded;
toggleAllRows(allExpanded);
$(this).text(allExpanded ? headerShowLessText : headerShowAllText);
});

// Existing code for individual row toggles
$('td[data-page="' + pageId + '"]').each(function() {
var $td = $(this);
var $links = $td.find('span[data-itemtype="grid_details_link"]');

if ($links.length > 3) {
// Hide all links after the third one
$links.slice(3).hide();

// Create the toggle button with a distinct class
var $toggleButton = $('<a href="javascript:void(0)" class="toggleLinks"></a>');
$td.append($toggleButton);

// Add click event to the button
updateToggleText($toggleButton, $links); // Initialize the button text

$toggleButton.on('click', function() {
if ($links.filter(':hidden').length > 0) {
// Show all hidden links
$links.show();
updateToggleText($(this), $links);
} else {
// Hide all but the first three links
$links.slice(3).hide();
updateToggleText($(this), $links);
}
});
}
});
});

Custom CSS:

/* CSS for the header toggle button */
.header-toggle {
color: white; /* White text color */
text-decoration: none; /* Remove underline */
font-weight: normal; /* Normal weight for text */
background-color: transparent; /* No background color */
padding: 0; /* Remove padding */
border: none; /* Remove border */
display: inline-block; /* Ensure it appears inline with other elements */
}

/* Ensure header toggle button remains white on hover, active, and focus states */
.header-toggle:hover,
.header-toggle:active,
.header-toggle:focus {
color: white; /* White text color */
text-decoration: none; /* Remove underline */
outline: none; /* Remove outline on focus */
background-color: transparent; /* Ensure no background color */
}

/* CSS for the row toggle links */
.toggleLinks {
color: blue; /* Blue color for details links */
text-decoration: none; /* Remove underline */
font-weight: bold; /* Bold text for details links */
}

/* Hover effect for the row toggle links */
.toggleLinks:hover {
color: darkblue; /* Dark blue on hover */
}
Davor Geci authorDevClub member 8/16/2024

Maybe this cuold be integrated in v11 (10.91) when we use text links for details?
Sergey Kornilov admin 8/17/2024

Great, thank you for the update!

We'll see if we can include it as a feature.