Za pomoci hidden parametru CellRenderer je možné při renderování browse modifikovat vzhled jednotlivých buněk. Při renderování každé buňky se volá funkce zadaná v hodnotě parametru. Předpokládá se že funkce je zapsaná přímo ve stránce v tagu „script“.
<input type="hidden" name="CellRenderer" value="myCellRenderer">
Na vstupu má funkce následující atributy a předpokládá se návrat modifikovaného atributu defaulthtml nebo null, pokud nic nemodifikujeme.
Argumenty každé takto volané funkce jsou:
Následná funkce může vypadat třeba takto:
Provádí Removing trailing zeros / potlačení koncových nul u sloupce HDPRODCENA
<script> var formatNumber = function (num) { return new Intl.NumberFormat("cs-CZ", { minimumFractionDigits: 0, maximumFractionDigits: 20 // dostatečně velké, aby zachytilo všechny }).format(num); } var myCellRenderer = function (row, columnfield, value, defaulthtml, columnproperties, field, rowData) { if (field.name == 'HDPRODCENA'){ if (value != null || value != "") //jen když je neprazdne. Jinak by se doplňovala 0. defaulthtml.innerText = formatNumber(value) } return defaulthtml; }; </script>
Dalším příkladem může být doplnění třídy a na základě této třídy úprava vizualizace.
<!-- styl pro třídu nonNull--> <style> .nonNull { /*jakákoli CSS vlastnost*/ } </style> <!-- doplnění třídy nonNull--> <script> var myCellRenderer = function (row, columnfield, value, defaulthtml, columnproperties, field, rowData) { if (field.name == 'HDPRODCENA'){ if (value != null || value != "") defaulthtml.classList.add("nonNull"); } return defaulthtml; }; </script>
S defaulthtml je možné manipulovat jak je potřeba, jen je nutné brát zřetel na to, že výrazná modifikace může spůsobit nefunkčnost Browse.