How to set kendo color picker value inside in a kendo template

4 posts, 0 answers
  1. zhivko.zhelezov
    zhivko.zhelezov avatar
    31 posts
    Member since:
    May 2011

    Posted 20 Nov 2015 Link to this post

    Hi folks,

     I am having the following column template :

    <script id="gridTemplate" type="text/x-kendo-template">
        <tr data-uid="#= uid #">
                <input type="color" kendo-color-picker="colorPicker" k-palette="trend.colors" value="#= color #" on-change="trend.changeColor(colorPicker.value(), this)" />
                <button type="button" style="background-color:black; float:right;" class="btn btn-default btn-xs white" ng-click="trend.deleteSeries('#= tag#');"><span class="glyphicon glyphicon-remove"></span></button>
                #= tag#
                #= description#
                #= unit#

    The problem is with setting the color of the color picker (via the value attribute) in the first column.Initially in the dataItem, the value of color was in the form of #rrggbb, but this was resulting in an error (because of the "#" symbol). I changed it in rgba() and it was working fine with 2014 kendo release. Today I update to 2015 and now it does not work. Any suggestion how to fix it?

  2. Daniel
    Daniel avatar
    2231 posts

    Posted 25 Nov 2015 Link to this post


    Could you clarify how is the provided template used? If you are using angular then could you check if setting the value as option:
    <input kendo-color-picker="colorPicker" k-value="'#=color#'" />
    or binding it to the item:
    <input kendo-color-picker="colorPicker" ng-model="dataItem.color" />

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Dinesh
    Dinesh avatar
    1 posts
    Member since:
    Jun 2017

    Posted 07 Jul 2017 Link to this post

    i Created one simple Project where i am using kendo-UI Text-Editor  and i fixed my selector Color white to black in my CSS file.
    but when i am selecting any other color its not displaying that selected color.
    please help me.

    this is my Css code.

    span.k-selected-color {
         background-color: black !important;

    in this 2nd Image i selected color Red but in selected-color it is showing black.

  4. Ianko
    Ianko avatar
    1935 posts

    Posted 11 Jul 2017 Link to this post

    Hello Dinesh,

    The questions asked is not related to the topic originally discussed in this thread. It is recommended to keep the forum threads on topic so that they can be helpful to others. Therefore, it is recommended to open new threads when it comes to new questions. 

    However, the described behavior is expected. By overriding the background-color of the DOM element representing the selected color any other selected color is not respected. At least not in the color picker. Thus, I am not quite sure what would be the need to change the decoration of the color selection from white to black, when this value should be dynamically chosen by the user and not some predefined CSS rule.  

    If, however, there is more behind this, I suggest you to open a new thread with more relevant information on the case.

    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top