ColorPicker has no method refresh().

[Тимур]

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

[Ianko]

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

[Тимур]

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

[Ianko]

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