David,
If you want to duplicate the data from the pagination and display this somewhere else on the page, you can do this with some javascript in combination with the javascript widget from the app store.
Add the widget on the page where the grid is located and set the type to javascript. The content should be something like below:
setTimeout(myCloneFunction,3000);
function myCloneFunction(){
var pages = document.getElementsByClassName("dijitInline mx-grid-paging-status")[0];
var clonedpages = pages.cloneNode(true);
var x = clonedpages.innerHTML.lastIndexOf(' ');
var y = clonedpages.innerHTML.substring(x);
clonedpages.innerHTML = y;
document.getElementById("mxui_widget_ActionButton_1").appendChild(clonedpages);
};
The code waits for 3000 ms to make sure the complete page is loaded (you might want to play around with something like window.onload e.g. to get some more control) Then the pagination element is selected based on the class name. I'm using the default class name here and selecting the first element, if you have multiple datagrids on the page you'll need to think about a solution as it's not possible to select by id as the element does not have an id assigned.
Then I clone the div and search for the last space character in the innerHTML. Then perform as substring to get the number of elements in the grid. Next I rewrite the innerHTML of the cloned div and search for a place to put the cloned div. In my case this is the actionbutton at the top of the default empty Mendix project.
Now you have the number of entries in the grid next to the company action button.
You'll need some additional javascript to make sure updates can be dealt with, because when searching the number of items in the grid will change but you'll need to update the cloned element as well.
I hope this gives you an idea on how to proceed.
[UPDATE]
David,
Found the complete solution as well.
Set your html/javascript widget to Javascript with JQuery and set the content to:
$("body").on('DOMSubtreeModified', ".mx-grid-paging-status", function () {
$(function () {
var $exists = $('.newclass');
if ($exists != null) {
$exists.remove();
}
var $button = $('.mx-grid-paging-status').clone();
var $buttontext = $button.text();
var $buttonstring = $buttontext.substring($buttontext.lastIndexOf(' '));
$button.text($buttonstring);
$button.addClass('newclass');
$button.appendTo('#mxui_widget_ActionButton_1');
})
});
Now this piece of java script subscribes to changes in the pagination and will update the div being cloned. SO now when searches are done in the grid the display at the top of the screen will change as well. No need for timeout anymore, but it still has the restriction for 1 data grid as all paginations will get the same class and no id.
This might be solved by adding a class to the grid and changing the selector like:
var $button = $('.mx-grid-paging-status').clone();
to
var $button = $('.yourclass .mx-grid-paging-status').clone();
Hope this will allow you to achieve the desired result
Hi David,
In the header of the Data Grid, there is a nice calculated value of this in the top right corner. It sounds like you know this already, so if you want to move it around or put that value somewhere else on the page, I would recommend using CSS. The relevant CSS class for this looks like: mx-grid-paging-status, so by changing that class in the theme you should be able to put that value wherever you want. I have seen people put it at the bottom of the search grid sometimes. Is there something else you want to do with this number than just display it?
Thank you for the quick response.
Our requirement is to display the count at the top of page. For example, when the pagination displays '1 to 20 of 114383' we should also display:
114383 Record(s) found
At the top of the page, with additional styling of course. We also still need to display the pagination info as it currently is.
Our javascript guru came up with a solution using dojo aspect coding:
require(["dojo/aspect"], function(aspect) {
var iterate = setInterval(function () {
if ($(".mx-name-grid44")[0].id !== "" && dijit.byId($(".mx-name-grid44")[0].id)._pagingStatusNode.innerHTML !== "" ) {
clearInterval(iterate);
fillOutCount();
aspect.after(dijit.byId($(".mx-name-grid44")[0].id), "fillGrid", fillOutCount);
}
}, 500);
});
function fillOutCount() {
var count = dijit.byId($(".mx-name-grid44")[0].id)._pagingStatusNode.innerHTML.split(" ")[4];
text = "<span class='someclass'>"+count+"</span>";
text += "<span class='otherclass'> record(s) found</span>";
$(".grid44GridCount").html(text);
}
Thanks to everyone who chimed in.