This is a migrated thread and some comments may be shown as answers.

ColorPicker has no method refresh().

3 Answers 124 Views
ColorPicker
This is a migrated thread and some comments may be shown as answers.
Тимур
Top achievements
Rank 1
Тимур asked on 13 Jan 2017, 01:58 PM

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

3 Answers, 1 is accepted

Sort by
0
Ianko
Telerik team
answered on 16 Jan 2017, 12:08 PM

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.
0
Тимур
Top achievements
Rank 1
answered on 24 Jan 2017, 10:53 AM
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
0
Ianko
Telerik team
answered on 24 Jan 2017, 11:11 AM

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.
Tags
ColorPicker
Asked by
Тимур
Top achievements
Rank 1
Answers by
Ianko
Telerik team
Тимур
Top achievements
Rank 1
Share this question
or