Original html is always rewritten when scrolling

[williamtourinhoParticipant]

Hi,
if I modify the style attribute of a cell in the grid, when I scroll my modification is canceled, ie will reappear the original style. How can I set the style to not be change with the scroll.
What happens is that the original html is always rewritten when the user makes scroll.
The editable state of the grid is set to false in my case.
Thank you.

[Peter StoevKeymaster]

Hi williamtourinho,

If you want to customize a cell, use the ‘cellsrenderer’ callback function. See here: jquery-grid-cellsrendering.htm.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[williamtourinhoParticipant]

Hi Petter, here a example to better understand my problem. Thank you for your time.

$(document).ready(function () {
var theme = getTheme();
var data = generatedata(500);
var source =
{
localdata: data,
datatype: “array”
};
var dataAdapter = new $.jqx.dataAdapter(source);

var cellrenderer = function (row, column, value) {
var html = ‘

‘ + value +’

‘;
return html;
}

$(“#jqxgrid”).jqxGrid(
{
width: 685,
source: dataAdapter,
showfilterrow: true,
filterable: true,
theme: theme,
columns: [
{ text: ‘Name’, columntype: ‘textbox’, filtertype: ‘textbox’, filtercondition: ‘starts_with’, cellsrenderer: cellrenderer, datafield: ‘name’, width: 115 },
{
text: ‘Product’, filtertype: ‘checkedlist’, datafield: ‘productname’, width: 220
},
{ text: ‘Available’, datafield: ‘available’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 67 },
{ text: ‘Ship Date’, datafield: ‘date’, filtertype: ‘date’, width: 210, cellsalign: ‘right’, cellsformat: ‘d’ },
{ text: ‘Qty.’, datafield: ‘quantity’, filtertype: ‘number’, cellsalign: ‘right’ }
]
});
$(‘#button’).jqxButton({ height: 25, theme: theme });
$(‘#button’).click(function () {
var rows = $(‘#jqxgrid’).jqxGrid(‘getrows’);
var rowindex = $(‘#jqxgrid’).jqxGrid(‘getselectedrowindex’);

$(“#NameRow_” + rowindex).css(“color”, “blue”);
});
});

select cell, press button and them move the scroll bar to see behavior

[Peter StoevKeymaster]

Hi williamtourinho,

To modify the rendering of a cell, use the cellsrenderer callback. The Grid reuses the cells HTML elements so you can’t statically apply a style to a cell, row or any other HTML element. You should use the built-in methods provided by the widget.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[williamtourinhoParticipant]

With the ‘setcellvalue’ I was able to do what I needed. Thank you.

[Author]

Posts