CODEWITHSUNDEEP
javascriptkendo-uikendo-grid
Srijani Ghosh
Srijani Ghosh

Reputation: 4216

Kendo UI color picker not showing the dialog to choose color

I am trying to show a Kendo Color Picker when I click on a cell of a Kendo grid.

My actual code is much more complex and mostly generating during execution time. But, here is my code for editor for the a specific column of a Kendo Grid.

editor: function(container, options){ 
    var color = document.createElement('input');
    color.setAttribute('type', 'color');
    color.setAttribute('id', 'myColorField');
    container.show();
    $('#myColorField').appendTo(container).kendoColorPicker(
        {
            buttons: true
         }
    );
    }

I don't get any error, however, when I click on the cell to edit it, no color selection window is appearing. (only the text disappears on on-click of the cell.) I am very new to Kendo UI. Could anyone please help about it?

Thanks!

Update:

I changed the code as below: 

editor: function(container, options){ 
    var color = document.createElement('input');
    color.setAttribute('type', 'color');
    color.setAttribute('class', 'myColorField');
    container.show();
    $(this).find('.myColorField').appendTo(container).kendoColorPicker(
        {
            buttons: true
         }
    );
    }

Still no luck!

update: Alternate approach, still not working though!

editor: function(container, options){ 
  $("< input type = 'color' data-bind = 'value:" + prop.Name + "' /> " ).appendTo(container).kendoColorPicker({buttons: true});
}

update: Partially working code!

sb.Append(", editor: function(container, options){ " +
                                          "console.log(container);" +
                                           "$(\"< input name = '\"+options.field+\"' /> \" )" +
                                               ".appendTo(container)" +
                                               ".kendoColorPicker(" +
                                               "{" +
                                                   "buttons: true, " +
                                                   "value: options.model." + prop.Name+ "," +
                                                   "select: function(e) {" +
                                                        "options.model." + prop.Name + " = e.value" +
                                                   "}" +
                                               "}" +
                                           ");" +
                                       "}"
                                    );

I am now able to select the color from color picker and set it to the field I wanted. But, when I am trying to open this color picker, it looks weird and it show the data from tag from the code above. I tried so many things, but, nothing worked!

enter image description here

update: There was an unintended space. The right code was this:

"$(\"<input name = '\"+options.field+\"' /> \" )"

instead of this:

"$(\"< input name = '\"+options.field+\"' /> \" )"

Upvotes: 0

Views: 1630

Answers (1)

David Shorthose
David Shorthose

Reputation: 4497

here is a simple dojo showing you a colour picker being added to a grid. https://dojo.telerik.com/aRUsUJOw

updated dojo: This one shows the colour stylized with the new colour being selected rather than just the hex colour code. https://dojo.telerik.com/aRUsUJOw/4

Upvotes: 2

Related Questions