Jqwidgets: Grid Cells Formatting
$(#jqxgrid).jqxGrid({ width: 670, height: 450, source: source, theme: theme, sortable: true, columns: [ { text: 'Ship Name', datafield: 'ShipName', width: 250 }, { text: 'Shipped Date', datafield: 'ShippedDate', width: 230, cellsformat: 'D' }, { text: 'Freight', datafield: 'Freight', width: 130, cellsformat: 'F2', cellsalign: 'right' }, { text: 'Ship Address', datafield: 'ShipAddress', width: 350 }, { text: 'Ship City', datafield: 'ShipCity', width: 100 }, { text: 'Ship Country', datafield: 'ShipCountry', width: 100 } ]});
Number format strings:
D-decimal numbers.
F-floating-point numbers.
N-integer numbers.
C-currency numbers.
P-percentage numbers.
For adding decimal places to the numbers, add a number after the formatting string.
For example: c3 displays a number in this format $25.256
Built-in Date formats:
// Short date pattern
D-M/d/yyyy,
// Long date pattern
D-dddd, MMMM dd, yyyy,
// Short time pattern
T-h: mm tt,
// Long time pattern
T-h: mm: ss tt,
// Long date, short time pattern
F-dddd, MMMM dd, yyyy h: mm tt,
// Long date, long time pattern
F-dddd, MMMM dd, yyyy h: mm: ss tt,
// Month/day pattern
M-MMMM dd,
// Month/year pattern
Y-yyyy MMMM,
// S is a sortable format that does not vary by culture
S-yyyy '-'mm'-'dd't'hh': 'mm': 'ss
Date format strings:
D-the day of the month;
Dd-the day of the month;
Ddd-the abbreviated name of the day of the week;
Dddd-the full name of the day of the week;
H-the hour, using a 12-hour clock from 1 to 12;
Hh-the hour, using a 12-hour clock from 01 to 12;
H-the hour, using a 24-hour clock from 0 to 23;
HH-the hour, using a 24-hour clock from 00 to 23;
M-the minute, from 0 through 59;
Mm-the minutes, from 00 though59;
M-the month, from 1 through 12;
MM-the month, from 01 through 12;
MMM-the abbreviated name of the month;
MMMM-the full name of the month;
S-the second, from 0 through 59;
Ss-the second, from 00 through 59;
T-the first character of the AM/PM designator;
Tt-the AM/PM designator;
Y-the year, from 0 to 99;
Yy-the year, from 00 to 99;
Yyy-the year, with a minimum of three digits;
Yyyy-the year as a four-digit number;
Yyyyy-the year as a four-digit number.
Grid Cells Formatting Sample
$(#jqxgrid).jqxGrid({ width: 670, height: 450, source: source, theme: theme, sortable: true, columns: [ { text: 'Ship Name', datafield: 'ShipName', width: 250, sortable: false }, { text: 'Shipped Date', datafield: 'ShippedDate', width: 230, cellsformat: 'D' }, { text: 'Freight', datafield: 'Freight', width: 130, cellsformat: 'F2', cellsalign: 'right' }, { text: 'Ship Address', datafield: 'ShipAddress', width: 350 }, { text: 'Ship City', datafield: 'ShipCity', width: 100 }, { text: 'Ship Country', datafield: 'ShipCountry', width: 100 } ]});