diff --git a/src/webcomponents/commons/grid-commons.js b/src/webcomponents/commons/grid-commons.js
index 85d43d56a..3dd024f17 100644
--- a/src/webcomponents/commons/grid-commons.js
+++ b/src/webcomponents/commons/grid-commons.js
@@ -339,56 +339,54 @@ export default class GridCommons {
         return columns;
     }
 
-    displayResponseWarningEvents(response, maxVisibleEvents = 3) {
+    displayResponseWarningEvents(response) {
         const eventsContainer = this.context.querySelector(`div#${this.gridId}WarningEvents`);
         if (eventsContainer && (response?.events?.length > 0 || response?.responses?.[0]?.events?.length > 0)) {
             const events = [...(response?.events || []), ...(response?.responses?.[0]?.events || [])]
-                .filter(event => event && event.type === "WARNING" && !!event.message)
-                .map(event => {
-                    return `
-                        <div class="alert alert-warning mb-2">
-                            <i class="fas fa-exclamation-triangle pe-1"></i>
-                            <span>${event.message}</span>
-                        </div>
-                    `;
-                });
-            if (events.length > 0) {
-                const defaultVisibleEvents = events.length > maxVisibleEvents ? events.slice(0, maxVisibleEvents) : events;
-                const defaultHiddenEvents = events.length > maxVisibleEvents ? events.slice(maxVisibleEvents) : [];
-                const eventsMessages = UtilsNew.renderHTML(`
+                .filter(event => event && event.type === "WARNING" && !!event.message);
+            // If there is only one event message, just display it
+            if (events.length === 1) {
+                const eventsContent = UtilsNew.renderHTML(`
+                    <div class="alert alert-warning mb-2">
+                        <i class="fas fa-exclamation-triangle pe-1"></i>
+                        <span>${events[0].message}</span>
+                    </div>
+                `).querySelector("div");
+                eventsContainer.replaceChildren(eventsContent);
+            } else if (events.length > 1) {
+                const eventsContent = UtilsNew.renderHTML(`
                     <div>
-                        ${defaultVisibleEvents.join("")}
-                        ${defaultHiddenEvents.length > 0 ? `
-                            <div data-role="hidden-events" style="display:none;">${defaultHiddenEvents.join("")}</div>
-                            <div class="text-muted">
-                                <div data-role="show-more-events" style="display:inline-block;cursor:pointer;">
-                                    <small><i class="fas fa-chevron-down" style="padding-right:6px;"></i>Show more warning events (<b>${defaultHiddenEvents.length}</b>)</small>
-                                </div>
-                                <div data-role="show-less-events" style="display:none;cursor:pointer;">
-                                    <small><i class="fas fa-chevron-up" style="padding-right:6px;"></i>Show less warning events</small>
-                                </div>
+                        <div class="alert alert-warning mb-2">
+                            <div class="d-flex align-items-center gap-2">
+                                <i class="fas fa-exclamation-triangle pe-2"></i>
+                                <span>There are warning events (<b>${events.length}</b>).</span>
+                                <span data-role="show-events" style="cursor:pointer;text-decoration:underline">Show all events.</span>
+                                <span data-role="hide-events" style="display:none;cursor:pointer;text-decoration:underline;">Hide all events.</span>
+                            </div>
+                            <div data-role="events" class="mt-1" style="display:none;">
+                                <ul class="mb-0">
+                                    ${events.map(event => `<li>${event.message}</li>`).join("")}
+                                </ul>
                             </div>
-                        ` : ""}
+                        </div>
                     </div>
                 `).querySelector("div");
-                eventsContainer.replaceChildren(eventsMessages);
-                if (defaultHiddenEvents.length > 0) {
-                    const hiddenEventsElement = eventsMessages.querySelector(`div[data-role="hidden-events"]`);
-                    const showMoreEventsElement = eventsMessages.querySelector(`div[data-role="show-more-events"]`);
-                    const showLessEventsElement = eventsMessages.querySelector(`div[data-role="show-less-events"]`);
-                    // Show more events click
-                    showMoreEventsElement.addEventListener("click", () => {
-                        hiddenEventsElement.style.display = "block";
-                        showLessEventsElement.style.display = "inline-block";
-                        showMoreEventsElement.style.display = "none";
-                    });
-                    // Show less events click
-                    showLessEventsElement.addEventListener("click", () => {
-                        hiddenEventsElement.style.display = "none";
-                        showLessEventsElement.style.display = "none";
-                        showMoreEventsElement.style.display = "inline-block";
-                    });
-                }
+                eventsContainer.replaceChildren(eventsContent);
+                const eventsElement = eventsContent.querySelector(`div[data-role="events"]`);
+                const showEventsElement = eventsContent.querySelector(`span[data-role="show-events"]`);
+                const hideEventsElement = eventsContent.querySelector(`span[data-role="hide-events"]`);
+                // Show events click
+                showEventsElement.addEventListener("click", () => {
+                    eventsElement.style.display = "";
+                    hideEventsElement.style.display = "";
+                    showEventsElement.style.display = "none";
+                });
+                // Hide events click
+                hideEventsElement.addEventListener("click", () => {
+                    eventsElement.style.display = "none";
+                    hideEventsElement.style.display = "none";
+                    showEventsElement.style.display = "";
+                });
             }
         }
     }