Skip to content

Commit 5d31630

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent a403415 commit 5d31630

15 files changed

+1114
-126
lines changed

‎docs-aspnet/html-helpers/editors/colorpicker/events.md‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
---
2+
title: Events
3+
page_title: Events
4+
description: "Learn how to handle the events of the Telerik UI ColorPicker component for {{ site.framework }}."
5+
slug: events_colorpicker
6+
position: 6
7+
---
8+
9+
# Events
10+
11+
The ColorPicker for {{ site.framework }} exposes the [`Change()`](https://docs.telerik.com/{{ site.platform }}/api/kendo.mvc.ui.fluent/colorpickereventbuilder#changesystemstring), [`Select()`](https://docs.telerik.com/{{ site.platform }}api/kendo.mvc.ui.fluent/colorpickereventbuilder#selectsystemstring), [`Open()`](https://docs.telerik.com/{{ site.platform }}/api/kendo.mvc.ui.fluent/colorpickereventbuilder#opensystemstring), and the [`Close()`](https://docs.telerik.com/{{ site.platform }}/api/kendo.mvc.ui.fluent/colorpickereventbuilder#closesystemstring) events that you can use to further manipulate the component or other HTML elements as per your requirements.
12+
13+
For a complete example on ColorPicker events, refer to the [demo on using the events of the ColorPicker](https://demos.telerik.com/{{ site.platform }}/colorpicker/events).
14+
15+
### Handling by Handler Name
16+
17+
The following example demonstrates how to subscribe to events by a handler name.
18+
19+
```HtmlHelper
20+
@(Html.Kendo().ColorPicker()
21+
.Name("colorpicker")
22+
.Events(e => e
23+
.Open("colorpicker_open")
24+
.Close("colorpicker_close")
25+
.Select("colorpicker_select")
26+
.Change("colorpicker_change")
27+
)
28+
)
29+
<script>
30+
// The ColorPicker instance is available as an e.sender or this.
31+
function colorpicker_open(e) {
32+
// Handle the open event.
33+
}
34+
35+
function colorpicker_close(e) {
36+
// Handle the close event.
37+
}
38+
39+
function colorpicker_select(e) {
40+
// Handle the select event.
41+
}
42+
43+
function colorpicker_change(e) {
44+
// Handle the change event.
45+
}
46+
</script>
47+
```
48+
{% if site.core %}
49+
```TagHelper
50+
<kendo-colorpicker name="colorpicker" on-select="colorpicker_select" on-change="colorpicker_change" on-open="colorpicker_open" on-close="colorpicker_close">
51+
</kendo-colorpicker>
52+
53+
<script>
54+
// The ColorPicker instance is available as an e.sender or this.
55+
function colorpicker_open(e) {
56+
// Handle the open event.
57+
}
58+
59+
function colorpicker_close(e) {
60+
// Handle the close event.
61+
}
62+
63+
function colorpicker_select(e) {
64+
// Handle the select event.
65+
}
66+
67+
function colorpicker_change(e) {
68+
// Handle the change event.
69+
}
70+
</script>
71+
```
72+
{% endif %}
73+
74+
### Handling by Template Delegate
75+
76+
The following example demonstrates how to subscribe to events by a template delegate.
77+
78+
```HtmlHelper
79+
@(Html.Kendo().ColorPicker()
80+
.Name("colorpicker")
81+
.Events(e => e
82+
.Open(@<text>
83+
function(e) {
84+
//Handle the open event inline.
85+
}
86+
</text>)
87+
.Close(@<text>
88+
function(e) {
89+
//Handle the close event inline.
90+
}
91+
</text>)
92+
.Select(@<text>
93+
function(e) {
94+
//Handle the select event inline.
95+
}
96+
</text>)
97+
.Change(@<text>
98+
function(e) {
99+
//Handle the change event inline.
100+
}
101+
</text>)
102+
)
103+
)
104+
```
105+
{% if site.core %}
106+
```TagHelper
107+
<kendo-colorpicker name="colorpicker"
108+
on-select="function(){
109+
// Handle the select event.
110+
}"
111+
on-change="function(){
112+
// Handle the change event.
113+
}"
114+
on-open="function(){
115+
// Handle the open event.
116+
}"
117+
on-close="function(){
118+
// Handle the close event.
119+
}">
120+
</kendo-colorpicker>
121+
```
122+
{% endif %}
123+
124+
## Next Steps
125+
126+
* [Using the ColorPicker Events (Demo)](https://demos.telerik.com/{{ site.platform }}/colorpicker/events)
127+
128+
## See Also
129+
130+
* [Using the API of the ColorPicker for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/colorpicker/api)
131+
* [ColorPicker Server-Side API for {{ site.framework}}](/api/colorpicker)
132+
* [ColorPicker Client-Side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/colorpicker)
133+

‎docs-aspnet/html-helpers/editors/colorpicker/getting-started.md‎

Lines changed: 253 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,253 @@
1+
---
2+
title: Getting Started
3+
page_title: Getting Started
4+
description: "Make your first steps with the Telerik UI for {{ site.framework }} ColorPicker component by following a complete step-by-step tutorial."
5+
slug: aspnetcore_colorpicker_getting_started
6+
position: 1
7+
---
8+
9+
# Getting Started with the ColorPicker
10+
11+
This tutorial explains how to set up a basic Telerik UI for {{ site.framework }} ColorPicker and highlights the major steps in the configuration of the component.
12+
13+
You will initialize a ColorPicker component with predefined `gradient` and `palette` view types, and then change its appearance. Finally, you will learn how to handle the events of the ColorPicker in order to color an arbitrary container.
14+
15+
![Sample Telerik UI for {{ site.framework }} ColorPicker](./images/colorpicker-getting-started.png)
16+
17+
@[template](/_contentTemplates/core/getting-started-prerequisites.md#repl-component-gs-prerequisites)
18+
19+
## 1. Prepare the CSHTML File
20+
21+
@[template](/_contentTemplates/core/getting-started-directives.md#gs-adding-directives)
22+
23+
Optionally, you can structure the document by adding the desired HTML elements like headings, divs, and paragraphs.
24+
25+
```HtmlHelper
26+
@using Kendo.Mvc.UI
27+
<h4>ColorPicker with a placeholder</h4>
28+
<div>
29+
30+
</div>
31+
```
32+
{% if site.core %}
33+
```TagHelper
34+
@addTagHelper *, Kendo.Mvc
35+
<h4>ColorPicker with a placeholder</h4>
36+
<div>
37+
38+
</div>
39+
```
40+
{% endif %}
41+
42+
43+
## 2. Initialize the ColorPicker
44+
45+
Use the ColorPicker HtmlHelper {% if site.core %}or TagHelper{% endif %} to add the component to a page.
46+
47+
The `Name()` configuration method is mandatory as its value is used for the `id` and the `name` attributes of the ColorPicker element.
48+
49+
```HtmlHelper
50+
@(Html.Kendo().ColorPicker()
51+
.Name("colorPicker")
52+
)
53+
```
54+
{% if site.core %}
55+
```TagHelper
56+
<kendo-colorpicker name="colorPicker">
57+
</kendo-colorpicker>
58+
```
59+
{% endif %}
60+
61+
62+
## 3. Configure the Views
63+
64+
The next step is to explicitly declare the Views configuration. The following example will configure the `gradient` and `palette` view types whilst providing a default view as the primary source of coloring.
65+
66+
67+
```HtmlHelper
68+
@(Html.Kendo().ColorPicker()
69+
.Name("colorPicker")
70+
.View(ColorPickerView.Palette)
71+
.Views(new string[] { "palette", "gradient"})
72+
)
73+
```
74+
75+
{% if site.core %}
76+
```TagHelper
77+
@{
78+
string[] views = new string[] { "gradient", "palette" };
79+
}
80+
81+
<kendo-colorpicker name="colorPicker"
82+
view="ColorPickerView.Palette"
83+
views="views">
84+
</kendo-colorpicker>
85+
```
86+
{% endif %}
87+
88+
## 4. Specify the Formats
89+
90+
The ColorPicker supports both RGB and HEX formats. The following example will configure the RGB and HEX formats, as well as a default format.
91+
92+
```HtmlHelper
93+
@(Html.Kendo().ColorPicker()
94+
.Name("colorPicker")
95+
.View(ColorPickerView.Palette)
96+
.Views(new string[] { "palette", "gradient"})
97+
.Format(ColorPickerFormat.Hex)
98+
.Formats(new string[] { "rgb", "hex" })
99+
)
100+
```
101+
102+
{% if site.core %}
103+
```TagHelper
104+
@{
105+
string[] views = new string[] { "gradient", "palette" };
106+
string[] formats = new string[] { "rgb", "hex" };
107+
}
108+
109+
<kendo-colorpicker name="colorPicker"
110+
view="ColorPickerView.Palette"
111+
views="views"
112+
format="ColorPickerFormat.Hex"
113+
formats="formats">
114+
</kendo-colorpicker>
115+
```
116+
{% endif %}
117+
118+
119+
## 5. Customize the Appearance of ColorPicker
120+
121+
To change the [appearance]({% slug appearance_colorpicker_aspnetcore %}) of the ColorPicker, use any of its built-in styling options, for example, `Size()`, `Rounded()`, and `FillMode()`.
122+
123+
```HtmlHelper
124+
@(Html.Kendo().ColorPicker()
125+
.Name("colorPicker")
126+
.View(ColorPickerView.Palette)
127+
.Views(new string[] { "palette", "gradient"})
128+
.Format(ColorPickerFormat.Hex)
129+
.Formats(new string[] { "rgb", "hex" })
130+
.Size(ComponentSize.Medium)
131+
.Rounded(Rounded.Medium)
132+
.FillMode(FillMode.Solid)
133+
)
134+
```
135+
136+
{% if site.core %}
137+
```TagHelper
138+
@{
139+
string[] views = new string[] { "gradient", "palette" };
140+
string[] formats = new string[] { "rgb", "hex" };
141+
}
142+
143+
<kendo-colorpicker name="colorPicker"
144+
view="ColorPickerView.Palette"
145+
views="views"
146+
format="ColorPickerFormat.Hex"
147+
formats="formats"
148+
size="ComponentSize.Medium"
149+
rounded="Rounded.Medium"
150+
fillmode="FillMode.Solid">
151+
</kendo-colorpicker>
152+
```
153+
{% endif %}
154+
155+
## 6. Handle the ColorPicker Events
156+
157+
The ColorPicker component exposes various [events](https://docs.telerik.com/{{ site.platform }}/api/kendo.mvc.ui.fluent/colorpickerbuilder#eventssystemaction) that you can handle and further customize the functionality of the component or other proprietary HTML elements. In this tutorial, you will use the `Change` event to change the color of another container.
158+
159+
```HtmlHelper
160+
@(Html.Kendo().ColorPicker()
161+
.Name("colorPicker")
162+
.View(ColorPickerView.Palette)
163+
.Views(new string[] { "palette", "gradient"})
164+
.Format(ColorPickerFormat.Hex)
165+
.Formats(new string[] { "rgb", "hex" })
166+
.Size(ComponentSize.Medium)
167+
.Rounded(Rounded.Medium)
168+
.FillMode(FillMode.Solid)
169+
.Events(events => events.Change("onChange"))
170+
)
171+
172+
<script>
173+
function onChange(e) {
174+
$("#background").css("background-color", e.value);
175+
}
176+
</script>
177+
```
178+
{% if site.core %}
179+
```TagHelper
180+
@{
181+
string[] views = new string[] { "gradient", "palette" };
182+
string[] formats = new string[] { "rgb", "hex" };
183+
}
184+
185+
<kendo-colorpicker name="colorPicker"
186+
view="ColorPickerView.Palette"
187+
views="views"
188+
format="ColorPickerFormat.Hex"
189+
formats="formats"
190+
size="ComponentSize.Medium"
191+
rounded="Rounded.Medium"
192+
fillmode="FillMode.Solid"
193+
on-change="onChange">
194+
</kendo-colorpicker>
195+
196+
<script>
197+
function onChange(e) {
198+
$("#background").css("background-color", e.value);
199+
}
200+
</script>
201+
```
202+
{% endif %}
203+
204+
## 7. (Optional) Reference Existing ColorPicker Instances
205+
206+
You can reference the ColorPicker instances that you have created and build on top of their existing configuration:
207+
208+
1. Use the `.Name()` (`id` attribute) of the component instance to get a reference.
209+
210+
```script
211+
<script>
212+
$(document).ready(function() {
213+
var colorPickerReference = $("#colorPicker").data("kendoColorPicker"); // colorPickerReference is a reference to the existing ColorPicker instance of the helper.
214+
})
215+
</script>
216+
```
217+
1. Toggle the popup of the component by using the [`toggle()`](https://docs.telerik.com/kendo-ui/api/javascript/ui/colorpicker/methods/toggle) client-side method.
218+
219+
```script
220+
<script>
221+
$(document).ready(function() {
222+
var colorPickerReference = $("#colorPicker").data("kendoColorPicker"); // colorPickerReference is a reference to the existing ColorPicker instance of the helper.
223+
colorPickerReference.toggle(); // Toggle the popup of the component.
224+
})
225+
</script>
226+
```
227+
228+
229+
{% if site.core %}
230+
231+
## Explore this Tutorial in REPL
232+
233+
You can continue experimenting with the code sample above by running it in the Telerik REPL server playground:
234+
235+
* [Sample code with the ColorPicker HtmlHelper](https://netcorerepl.telerik.com/cnEVwpYA19Js36bT53)
236+
* [Sample code with the ColorPicker TagHelper](https://netcorerepl.telerik.com/cdkhwJEq22Pa8xDN26)
237+
238+
{% endif %}
239+
240+
241+
## Next Steps
242+
243+
{% if site.core %}
244+
* [Configuring the Contrast Tool]({% slug htmlhelpers_contrast_tool_colorpickerhelper_aspnetcore %})
245+
{% endif %}
246+
* [Customizing the Appearance of the ColorPicker]({% slug appearance_colorpicker_aspnetcore %})
247+
248+
## See Also
249+
250+
* [Using the API of the ColorPicker for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/colorpicker/api)
251+
* [Client-Side API of the ColorPicker](https://docs.telerik.com/kendo-ui/api/javascript/ui/colorpicker)
252+
* [Server-Side API of the ColorPicker for {{ site.framework }}](/api/colorpicker)
253+
* [Knowledge Base Section](/knowledge-base)

‎docs-aspnet/html-helpers/editors/colorpicker/images/colorpicker-getting-started.png‎

5.44 KB
Loading

0 commit comments

Comments
 (0)