format the record count?

[nklapperParticipant]

Is there a way to format the record count that displays?

Or another way to add commas to the number, to improve readability?

Thanks in advance…

[Ivo ZhulevParticipant]

Hi nklapper,

Can you please provide us a fiddle?

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[nklapperParticipant]

Thank you Ivo.

Actually, you can see an example in one of your demos: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/virtualdata.htm

Notice that the 1,000,000 total record count at the bottom right is difficult to read without commas.

–Norm

[nklapperParticipant]

bump

[Ivo ZhulevParticipant]

Hi nklapper,

Take a look at this demo:
http://jsfiddle.net/jqwidgets/5fsjV/
As you can see you can make the look all custom.

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[nklapperParticipant]

Thanks again Ivo.

Trying to use pagerrenderer, as you recommended.

Cannot format using just CSS, so must use some javascript.

Here is a function I have for this:

var numberWithCommas = function(x) { //adds comma to numbers, e.g. 12000 -> 12,000
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, “,”);}

If I try to apply this to the pagerrenderer code like this:

var paginginfo = numberWithCommas(datainfo.paginginformation);

…it does not work. See http://jsfiddle.net/w9o79od0/

I am probably missing something simple.

Could you please advise?

Best regards,

Norm

[Ivo ZhulevParticipant]

Hi nklapper,

You are using the datainfo.pagingInformation which does not contain the rows count(console.log it and you will see).
A few lines below there is a datainfo.rowscount which does.
So leave var paginginfo be var paginginfo = datainfo.paginginformation; and instead of
label.text("1-" + paginginfo.pagesize + ' of ' + datainfo.rowscountA); write

     var rowsCountWithCommas = numberWithCommas(datainfo.rowscount);
     label.text("1-" + paginginfo.pagesize + ' of ' + rowsCountWithCommas)

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[nklapperParticipant]

Hi Ivo,

Good stuff, works perfectly, you guys are the best!

Could you please take a look at: http://jsfiddle.net/1zqoc7bg/ ?

I am just using code I found in another example, but the Show Rows selector seems to have a few glitches…

1. initially shows 10 rows instead of the specified default of 15

2. does not recognize an event when the default value 15 is subequently selected by the user

Your help would be appreciated.

Thanks,

Norm

[Ivo ZhulevParticipant]

Hi Norm,

First, thanks for the feedback
Now on the point:

1. The value set from the dropdown is on click. When you initialize the grid you don`t click on the dropdown.
That is why nothing happens on initialization. So you must specify pageSize property in the grid initialization code. For you case pageSize: 15.

2. This is happening because when you click on a dropdown option you render the grid and the pagerrenderer property is called again so you create the dropdown from scratch with selectedIndex:0. The solution is to make the selectedIndex take dynamic value :

Instead of :

dropdown.jqxDropDownList({ source: ['15', '30', '50', '100'], selectedIndex: 0, width: 50, height: 17, autoDropDownHeight: true });

Write down :

var source = ['15', '30', '50', '100'];
dropdown.jqxDropDownList({ source: source, selectedIndex: source.indexOf((paginginfo.pagesize).toString()), 
width: 50, height: 17, autoDropDownHeight: true });

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts