jQWidgets Forums
jQuery UI Widgets › Forums › Grid › jqxColorPicker in Grid
Tagged: jqxColorPicker, jqxgrid
This topic contains 8 replies, has 3 voices, and was last updated by hitotsukami 10 years, 1 month ago.
-
AuthorjqxColorPicker in Grid Posts
-
How to use jqxColorPicker in Grid?
I want to have some column in my grid with jqxColorPicker to pick some color?
can u provide me some example?Hi knight88,
You may use the same approach for creating a ColorPicker in jqxGrid as illustrated in this sample: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtreegrid/javascript-tree-grid-property-editor.htm?arctic
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi 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 functionHi knight88,
You can find below a working sample:
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>In this sample is illustrated how to create a custom editor for each jqxTreeGrid cell. </title> <meta name="description" content="Property Editor - JavaScript Tree Grid Demo | jQWidgets"> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcolorpicker.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownbutton.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript" src="../sampledata/generatedata.js"></script> <script type="text/javascript"> 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; } $(document).ready(function () { var data = [ { "property": "Background", "value": "#4621BC", type: "color" }, { "property": "Color", "value": "#B1B11B", type: "color" } ]; var source = { dataType: "json", dataFields: [ { name: "property", type: "string" }, { name: "value", type: "string" }, { name: "type", type: "string" }, { name: "children", type: "array" } ], hierarchy: { root: "children" }, localData: data }; var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function () { } }); $("#grid").jqxGrid( { source: dataAdapter, editable: true, editmode: 'selectedcell', columns: [ { text: 'Property Name', editable: false, columnType: 'none', dataField: 'property', width: 150 }, { text: 'Value', dataField: 'value', width: 220, columnType: "custom", cellsrenderer: function(rowKey, column, value) { return getTextElementByColor(new $.jqx.color({ hex: value.substring(1) }))[0].outerHTML; }, // creates an editor depending on the "type" value. createEditor: function (rowKey, cellvalue, editor, cellText, width, height) { var dropDownButton = $("<div style='border: none;'><div style='padding: 5px;'><div class='colorPicker" + rowKey + "'></div></div></div>"); dropDownButton.appendTo(editor); dropDownButton.jqxDropDownButton({ width: '100%', height: '100%' }); var colorPicker = $($.find(".colorPicker" + rowKey)); 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: "ffaabb" }))); }, // updates the editor's value. initEditor: function (rowKey, cellvalue, editor, celltext, width, height) { $($.find('.colorPicker' + rowKey)).val(cellvalue); }, // returns the value of the custom editor. getEditorValue: function (rowKey , cellvalue, editor) { return $($.find('.colorPicker' + rowKey)).val(); } } ] }); }); </script> </head> <body class='default'> <div id="grid"></div> </body> </html>Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comDear Peter,
i have successfully implemented this example, but the bug is that if you click outside the grid area while you are editing the color, the edit mode stops and you can no longer edit.
I made this fiddle http://jsfiddle.net/4xs7mv8w/ to show this problem: to reproduce the wrong behaviour you just open the colorpicker and click on it where it is hover the grey area.
Best regards,
NicolaHi Peter,
in the screeshot above i have made the following steps:
1 – select the ‘Color’ grid cell (the cell enters in edit mode and the dropdown shows)
2 – click on the colorpicker where you see the white pointer in my screenshot (i.e. is outside the grid area) and keep pushing (note that the grid cell is no more in edit mode)
3 – do not release the mouse button and move the pointer around: you see that the colorpicker correctly updates but the grid cell value does not!Tell me if it is more clear now.
Thanks,
NicolaHi Nicola,
I missed the “keep pushing” part. Ok, if you wish you can close the Custom Editor when you wish using its “close” method. Ex: http://jsfiddle.net/jqwidgets/ew0993tt/
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comThanks Peter,
unfortunately in this way I cannot write rgb color in the text field.
I will try to use updateStart and updateEnd functions to handle this situation, if I am able to solve this in the future i will post the solution.Best regards,
Nicola -
AuthorPosts
You must be logged in to reply to this topic.