jQWidgets Forums

This topic contains 9 replies, has 2 voices, and was last updated by simcon94 11 years, 2 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)

Author

ColorPicker Problem Posts

March 27, 2014 at 10:41 am ColorPicker Problem #52039

Participant

Hi,
i have a grid with Colorpicker.
Sometimes it works, sometimes not.
Sometimes the first click in Colorpicker will get the color, sometimes not.
So strange….
My JSON:

[{"Id":"1","Name":"Test","Color":"#000000"},{"Id":"2","Name":"Test2","Color":"#AD1703"},{"Id":"3","Name":"Test3","Color":"#2413B5"},{"Id":"4","Name":"Test4","Color":"#939B01"},{"Id":"5","Name":"Test5","Color":"#262626"},{"Id":"6","Name":"Test6","Color":"#44AF2B"},{"Id":"7","Name":"Test7","Color":"#7BFF07"},{"Id":"8","Name":"Test8","Color":"#FC1905"}]

My Grid:

// initialize jqxGrid
        $("#grid").jqxGrid(
            {
                width: sk.appHelper.getMaxContentWidth()
                , autoheight: true
                , source: dataAdapter
                , editable: editable
                , editmode: 'selectedcell'
                , columnsresize: true
                , columnsreorder: true
                , groupable: true
                , sortable: true
                , filterable: false
                , cellhover: function (element, pageX, pageY) {
                    var cell = $('#grid').jqxGrid('getcellatposition', pageX, pageY);
                    if (cell.column === "Delete") {
                        $("#grid").jqxTooltip({ content: '@Resources.Tooltip.DeleteButton', position: 'bottom', showDelay: 1000 });
                        // open tooltip.
                        $("#grid").jqxTooltip('open', pageX, pageY);
                    };
                }
                , columns: [
                    {
                        text: '', datafield: 'Delete', width: 50, columntype: 'number', hidden: hiddenDeleteButton, cellsrenderer: function () {
                            return '<div style="width: 100%"><img src="Content/icons/delete.png" style="margin-left: 25%" /></div>';
                        }
                    }
                    , { text: '@Resources.Instrument.Name', datafield: "Name", width: 190 }
                    , {
                        text: '@Resources.Instrument.Color',
                        columntype: 'custom',
                        datafield: 'Color',
                        width: 220,
                        createeditor: function(row, cellvalue, editor) {
                            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(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();
                        },
                        cellsrenderer: function (row, columnfield, value) {
                            return getTextElementByColor(new $.jqx.color({ hex: value.substring(1) }))[0].outerHTML;
                            return '<div style="width: 100%;height: 100%; background-color:' + value + '; color: #FFFFFF"></div>';
                            //return '<div style="width: 100%;height: 100%; background-color:' + value +'; color: #FFFFFF">' + value + '</div>';
                        }
                    }
                    , { text: "Id ", datafield: "Id", width: 1, hidden: true }
                ]
            });

JS:

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;
    }

March 27, 2014 at 10:44 am ColorPicker Problem #52042

simcon94

Participant

The first six rows worked…..

March 27, 2014 at 10:45 am ColorPicker Problem #52043

Peter Stoev

Keymaster

Hi simcon94,

You can use this solution: http://www.jqwidgets.com/community/topic/jqxcolorpicker-in-grid/. It always works.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

March 27, 2014 at 10:50 am ColorPicker Problem #52046

simcon94

Participant

whats the difference?

March 27, 2014 at 10:55 am ColorPicker Problem #52049

Peter Stoev

Keymaster

Hi simcon94,

I suggest you to compare your code with the one from the working sample and not only the part which you posted here, because that’s not all the code. The half of the Grid’s initialization is missing and especially the Data Binding part.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

March 27, 2014 at 10:55 am ColorPicker Problem #52050

Peter Stoev

Keymaster

Hi simcon94,

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

March 27, 2014 at 10:58 am ColorPicker Problem #52052

simcon94

Participant

My Databinding:

        var source =
        {
            datatype: "json",
            datafields: [
                { name: 'Id', type: 'Guid' }
                , { name: 'Name', type: 'string' }
                , { name: 'Color', type: 'string' }
            ],

            addrow: function (rowid, rowdata, position, commit) {
                commit(true);
            },
            deleterow: function (rowid, commit) {
                commit(true);
                $('#grid').jqxGrid('refresh');
            },
            updaterow: function (rowid, rowdata, commit) {
                commit(true);
            },

            // get Model Data
            url: sk.appHelper.getAppDomainAppVirtualPath() + "/Instrument/GetInstruments",
            
        };

        var dataAdapter = new $.jqx.dataAdapter(source);

March 27, 2014 at 11:00 am ColorPicker Problem #52055

Peter Stoev

Keymaster

Hi simcon94,

Obviously, the Casing is wrong. In the sample I posted it is: dataFields, not datafields. If you use camel-case, use it everywhere, if you use lowercase, use it everywhere. Don’t mix them. If you use lowercase, your initEditor should be initeditor, etc.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

March 27, 2014 at 11:12 am ColorPicker Problem #52057

simcon94

Participant

So my whole code:

<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 source =
        {
            datatype: "json",
            datafields: [
                { name: 'Id', type: 'Guid' }
                , { name: 'Name', type: 'string' }
                , { name: 'Color', type: 'string' }
            ],

            addrow: function (rowid, rowdata, position, commit) {
                commit(true);
            },
            deleterow: function (rowid, commit) {
                commit(true);
                $('#grid').jqxGrid('refresh');
            },
            updaterow: function (rowid, rowdata, commit) {
                commit(true);
            },

            // get Model Data
            url: sk.appHelper.getAppDomainAppVirtualPath() + "GetData",
            
        };

        var dataAdapter = new $.jqx.dataAdapter(source);
        var editable = true;
        var hiddenDeleteButton = false;
        // initialize jqxGrid
        $("#grid").jqxGrid(
            {
                width: sk.appHelper.getMaxContentWidth()
                , autoheight: true
                , source: dataAdapter
                , editable: editable
                , editmode: 'selectedcell'
                , columnsresize: true
                , columnsreorder: true
                , groupable: true
                , sortable: true
                , filterable: false
                , cellhover: function (element, pageX, pageY) {
                    var cell = $('#grid').jqxGrid('getcellatposition', pageX, pageY);
                    if (cell.column === "Delete") {
                        $("#grid").jqxTooltip({ content: 'DeleteButton', position: 'bottom', showDelay: 1000 });
                        // open tooltip.
                        $("#grid").jqxTooltip('open', pageX, pageY);
                    };
                }
                , columns: [
                    {
                        text: '', datafield: 'Delete', width: 50, columntype: 'number', hidden: hiddenDeleteButton, cellsrenderer: function () {
                            return '<div style="width: 100%"><img src="Content/icons/delete.png" style="margin-left: 25%" /></div>';
                        }
                    }
                    , { text: 'Name', datafield: "Name", width: 190 }
                    , {
                        text: 'Color',
                        columntype: 'custom',
                        datafield: 'Color',
                        width: 220,
                        createeditor: function(row, cellvalue, editor) {
                            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(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();
                        },
                        cellsrenderer: function (row, columnfield, value) {
                            return getTextElementByColor(new $.jqx.color({ hex: value.substring(1) }))[0].outerHTML;
                            
                        }
                    }
                    , { text: "Id ", datafield: "Id", width: 1, hidden: true }
                ]
            });
    });
</script>

@*GRID*@
<div id="grid"></div>

March 27, 2014 at 1:32 pm ColorPicker Problem #52083

simcon94

Participant

I found the Problem……
The Problem was:
autoheight: true

Author

Posts

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.