[knight88Participant]

Hi Peter..

I already make some example according to your example that you have provide to me before..
and it working..

But i having this problem when i try to color the cell base on the the jqxColorPicker value for the next rows?

I use the cellsrenderer function to change the cell grid css background color…

When i add the first row into the grid, and i choose the color , it working..
but when i add and change color in the second row and comeback at the row to change the color.. it don’t working in first row cell even the value already change…

i thought there are some problem with my cellsrenderer declaration.. can you help me?

****************************************************************************************
$(“#categoryGrid”).jqxGrid({
width: ‘100%’,
height: 240,
source: dataAdapter,
editable: true,
theme: theme,
columns: [
{text: ‘Name’, datafield: ‘name’, align: ‘center’},
{text: ‘Color’, datafield: ‘color’, align: ‘center’, width: ‘15%’, columnType: ‘custom’,
createeditor: function(row, cellvalue, editor, celltext, cellwidth, cellheight) {
var dropDownButton = $(“<div style=’border: none;’><div style=’padding: 5px;’><div class=’colorPicker” + row + “‘></div></div></div>”);
dropDownButton.appendTo(editor);
dropDownButton.jqxDropDownButton({width: ‘100%’, height: ‘100%’});
var colorPicker = $($.find(“.colorPicker” + row));
colorPicker.jqxColorPicker({width: 220, height: 220});
colorPicker.on(‘colorchange’, function(event) {
dropDownButton.jqxDropDownButton(‘setContent’, getTextElementByColor(event.args.color));
});
dropDownButton.jqxDropDownButton(‘setContent’, getTextElementByColor(new $.jqx.color({hex: “FFFFFF”})));
},
initeditor: function(row, cellvalue, editor, celltext, cellwidth, cellheight) {
$($.find(‘.colorPicker’ + row)).val(cellvalue);
},
geteditorvalue: function(row, cellvalue, editor) {
return $($.find(‘.colorPicker’ + row)).val();
},
cellvaluechanging: function(row, datafield, columntype, oldvalue, newvalue) {
var colorPicker = $($.find(“.colorPicker” + row));
var colorSelected = colorPicker.jqxColorPicker(‘getColor’);
return colorSelected[‘hex’];
},
cellsrenderer: function(row, columnfield, value, defaulthtml, columnproperties) {
var element = $(defaulthtml);
element.css({‘background-color’: ‘#’ + value});
element.css({‘color’: ‘#’ + 000000});
return element[0].outerHTML;
}
},
{text: ”, datafield: ‘deletecurrentrow’, width: ‘5%’, align: ‘center’, cellsrenderer: deleteRow, editable: false}
]
});

********************************************************
//color function
function getTextElementByColor(color) {
if (color == ‘transparent’ || color.hex == “”) {
return $(“<div style=’text-shadow: none; position: relative; padding-bottom: 4px; margin-top: 4px;’>transparent</div>”);
}

var element = $(“<div style=’text-shadow: none; position: relative; padding-bottom: 4px; margin-top: 4px;’>#” + color.hex + “</div>”);
var nThreshold = 105;
var bgDelta = (color.r * 0.299) + (color.g * 0.587) + (color.b * 0.114);
var foreColor = (255 – bgDelta < nThreshold) ? ‘Black’ : ‘White’;
element.css(‘color’, foreColor);
element.css(‘background’, “#” + color.hex);
element.addClass(‘jqx-rc-all’);
return element;
}
//end color function

[knight88Participant]

hu.. ok thanks for the reply , i hope you can implement that function in the latest @ next version…

[knight88Participant]

sorry can you give me some example how to do it? i still new and hard to understand it

[Author]

Posts