ColorPicker has no method refresh().

4 posts, 0 answers
  1. Тимур
    Тимур avatar
    2 posts
    Member since:
    Jan 2017

    Posted 13 Jan Link to this post

    Hello.

    For the 'ColorPicker', 'ColorPalette' there is no method 'refresh()'.
    Because of it, I can not change settings ('palette', 'tileSize' and etc) of these components at runtime.
    Is there an alternative way to solve this problem?

    My code:

    01.<div ng-switch-when="ColorPalette" class="demo-item">
    02.    <div kendo-color-palette="$parent.demoColorPalette"
    03.         k-options="dataInputOptions">
    04.    </div>
    05.</div>
    06. 
    07.....................................
    08.....................................
    09. 
    10.<div ng-switch-when="ColorPalette">
    11.    <div class="options-section">
    12.        <div class="options-field">
    13.            <label for="paletteInput">Palette: </label>
    14.            <input id="paletteInput"
    15.                   kendo-drop-down-list="$parent.paletteList"
    16.                   required="required"
    17.                   k-options="paletteOptions" />
    18.        </div>
    19. 
    20.        <div class="options-field">
    21.            <label for="columnsInput">Columns: </label>
    22.            <input id="columnsInput"
    23.                   kendo-numeric-text-box="columnsNumericBox"
    24.                   k-options="columnsOptions"
    25.                   ng-model="$parent.dataInputOptions.columns" />
    26.        </div>
    27. 
    28.        <div class="options-field">
    29.            <label for="tileSizeInput">Tile size: </label>
    30.            <input id="tileSizeInput"
    31.                   kendo-numeric-text-box="tileSizeNumericBox"
    32.                   k-options="tileSizeOptions"
    33.                   ng-model="$parent.dataInputOptions.tileSize" />
    34.        </div>
    35.    </div>
    36.</div>


    01.var vm = $scope;
    02. 
    03.vm.initialize = function () {
    04.    vm[`demo${vm.selection}`].setOptions(vm.dataInputOptions);
    05. 
    06.    if (vm.selection == "AutoComplete" ||
    07.            vm.selection == "ComboBox" ||
    08.            vm.selection == "DropDownList" ||
    09.            vm.selection == "MultiSelect")
    10.    {
    11.        vm[`demo${vm.selection}`].setDataSource(vm.dataInputOptions.dataSource);
    12.    }
    13. 
    14.    vm[`demo${vm.selection}`].refresh();
    15.}
    16. 
    17.vm.columnsOptions = {
    18.    min: 5,
    19.    max: 20
    20.}
    21. 
    22.vm.tileSizeOptions = {
    23.    min: 20,
    24.    max: 50
    25.}
    26. 
    27.vm.paletteOptions = {
    28.    autoBind: false,
    29.    dataTextField: "title",
    30.    select: function(e){
    31.        var selectedItem = e.sender.dataItem(e.item);
    32.        vm.dataInputOptions.palette = selectedItem.palette;
    33.    },
    34.    dataSource: {
    35.        data: [
    36.            {
    37.                title: 'Office',
    38.                palette: [
    39.                   "#ffffff", "#000000", "#eeece1", "#1f497d"
    40.                ]
    41.            },
    42.            {
    43.                title: 'Apex',
    44.                palette: [
    45.                    "#ffffff", "#000000", "#c9c2d1", "#69676d"
    46.                ]
    47.            },
    48.            {
    49.                title: 'Austin',
    50.                palette: [
    51.                    "#ffffff", "#000000", "#caf278", "#3e3d2d"
    52.                ]
    53.            },
    54.            {
    55.                title: 'Clarity',
    56.                palette: [
    57.                    "#ffffff", "#292934", "#f3f2dc", "#d2533c"
    58.                ]
    59.            },
    60.            {
    61.                title: 'SlipStream',
    62.                palette: [
    63.                    "#ffffff", "#000000", "#b4dcfa", "#212745"
    64.                ]
    65.            }
    66.            
    67.        ]
    68.    }
    69.}
  2. Ianko
    Admin
    Ianko avatar
    1720 posts

    Posted 16 Jan Link to this post

    Hello Тимур,

    Kendo ColorPicker and ColorPalette are not implemented with a refresh method. You can suggest this as a feature request here (http://kendoui-feedback.telerik.com/forums/127393) and post some use cases and valid scenarios. 

    However, with AngularJS you can use the k-rebind attribute, which will automatically re-initialize the entire widget with the updates to the scope's variable (http://docs.telerik.com/kendo-ui/AngularJS/introduction#widget-update-upon-option-changes).  Here you are a very basic example for that: http://dojo.telerik.com/Iteqi

    Regards,
    Ianko
    Telerik by Progress
    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.
  3. Тимур
    Тимур avatar
    2 posts
    Member since:
    Jan 2017

    Posted 24 Jan in reply to Ianko Link to this post

    Thank you for your response, k-rebind is what I needed.

    I found another problem.
    The property "palette" is not working correctly with the "k-rebind".
    When I select the palette, which is an array of colors, there is an error "TypeError: colors [i] .equals is not a function".

    This example illustrates my problem : 
    http://dojo.telerik.com/Iteqi/2
  4. Ianko
    Admin
    Ianko avatar
    1720 posts

    Posted 24 Jan Link to this post

    Hello Тимур,

     

    All the DataSource returns are of type ObservableArray, which are not simple array objects to be consumed.

     

    Therefore, in order to consume them in common cases you need to additionally normalize them by using the toJSON() method.

    $scope.dataInputOptions.palette = selectedItem.palette.toJSON();

     

     

    Regards,
    Ianko
    Telerik by Progress
    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