Skip to content

Commit 8cdcc52

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent f88eb02 commit 8cdcc52

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+1054
-37
lines changed

‎docs/_tools/check-redirects.sh‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ urls="
5555
/kendo-ui/web/progressbar/overview /kendo-ui/controls/interactivity/progressbar/overview
5656
/kendo-ui/web/sortable/overview /kendo-ui/controls/interactivity/sortable/overview
5757
/kendo-ui/mobile/introduction /kendo-ui/controls/hybrid/introduction
58-
/kendo-ui/webforms/asp-net-hello-jquery /kendo-ui/third-party/tutorials/webforms/asp-net-hello-jquery
58+
/kendo-ui/webforms/asp-net-hello-jquery /kendo-ui/third-party/webforms/asp-net-hello-jquery
5959
/kendo-ui/dataviz/drawing/overview /kendo-ui/framework/drawing/overview
6060
/kendo-ui/framework/drawing/how-to/custom-page-layout /kendo-ui/controls/data-management/grid/how-to/pdf-export/custom-page-layout
6161
/kendo-ui/tutorials/accessibility/accessibility-overview /kendo-ui/accessibility/accessibility-overview

‎docs/api/javascript/ui/drawer.md‎

Lines changed: 377 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,377 @@
1+
---
2+
title: Drawer
3+
page_title: Configuration, methods and events of Kendo UI Drawer
4+
description: Set direction of the Kendo UI Drawer container, use methods to show and hide it.
5+
res_type: api
6+
component: drawer
7+
---
8+
9+
# kendo.ui.Drawer
10+
11+
Represents the Kendo UI Drawer widget. Inherits from [Widget](/api/javascript/ui/widget).
12+
13+
## Configuration
14+
15+
### position `String` *(default: 'left')*
16+
17+
The position of the drawer. Can be `left` (default) or `right`.
18+
19+
#### Right positioned drawer
20+
21+
<div id="drawer">
22+
<div>Content area content.</div>
23+
</div>
24+
<script>
25+
$(document).ready(function() {
26+
var drawerInstance = $("#drawer").kendoDrawer({
27+
template: `<ul><li data-role='drawer-item'><span class='k-icon k-i-star-outline'></span><span class='item-text'>item 1</span></li><li data-role='drawer-separator'></li><li data-role='drawer-item'><span class='k-icon k-i-twitter'></span><span class='item-text'>item 2</span></li></ul>`,
28+
position: 'right'
29+
}).data("kendoDrawer");
30+
31+
drawerInstance.show();
32+
});
33+
</script>
34+
35+
### mode `String` *(default: 'overlay')*
36+
37+
Determines how the Kendo UI Drawer will interact with the associated content. The default one (overlay) will simply overlap the associated content with overlay effect. On the other hand "push" mode will show the drawer next to associated cotent. The associated content will shrink its content.
38+
39+
#### Push mode
40+
41+
<div id="drawer">
42+
<div>Content area content.</div>
43+
</div>
44+
<script>
45+
$(document).ready(function() {
46+
var drawerInstance = $("#drawer").kendoDrawer({
47+
mode: "push",
48+
template: `<ul><li data-role='drawer-item'><span class='k-icon k-i-star-outline'></span><span class='item-text'>item 1</span></li><li data-role='drawer-separator'></li><li data-role='drawer-item'><span class='k-icon k-i-twitter'></span><span class='item-text'>item 2</span></li></ul>`,
49+
position: 'left'
50+
}).data("kendoDrawer");
51+
52+
drawerInstance.show();
53+
});
54+
</script>
55+
56+
### template `String`
57+
58+
Specifies the drawer's content.
59+
60+
#### Template example
61+
62+
<div id="drawer">
63+
<div>Content area content.</div>
64+
</div>
65+
<script>
66+
$(document).ready(function() {
67+
var drawerInstance = $("#drawer").kendoDrawer({
68+
mode: "push",
69+
template: `<ul><li data-role='drawer-item'><span class='k-icon k-i-star-outline'></span><span class='item-text'>item 1</span></li><li data-role='drawer-separator'></li><li data-role='drawer-item'><span class='k-icon k-i-twitter'></span><span class='item-text'>item 2</span></li></ul>`,
70+
position: 'left'
71+
}).data("kendoDrawer");
72+
73+
drawerInstance.show();
74+
});
75+
</script>
76+
77+
### minHeight `Number`
78+
79+
Specifies the minimum height for the drawer.
80+
81+
#### Example
82+
83+
<div id="drawer">
84+
<div>Content area content.</div>
85+
</div>
86+
<script>
87+
$(document).ready(function() {
88+
var drawerInstance = $("#drawer").kendoDrawer({
89+
mode: "push",
90+
template: `<ul><li data-role='drawer-item'><span class='k-icon k-i-star-outline'></span><span class='item-text'>item 1</span></li></ul>`,
91+
position: 'left',
92+
minHeight: 200
93+
}).data("kendoDrawer");
94+
95+
drawerInstance.show();
96+
});
97+
</script>
98+
99+
### mini `Boolean | Object`
100+
101+
Enables or configures the mini mode for the Kendo UI Drawer. This is a compact view that is displayed when the Kendo UI Drawer is collapsed. Usually it used to show only the icons when the drawer content contains icon and text for an item. When set to `true` it uses the main template.
102+
103+
#### Mini mode example
104+
105+
<div id="drawer">
106+
<div>Content area content.</div>
107+
</div>
108+
<script>
109+
$(document).ready(function() {
110+
var drawerInstance = $("#drawer").kendoDrawer({
111+
mode: "push",
112+
template: `<ul><li data-role='drawer-item'><span class='k-icon k-i-star-outline'></span><span class='item-text'>item 1</span></li><li data-role='drawer-separator'></li><li data-role='drawer-item'><span class='k-icon k-i-twitter'></span><span class='item-text'>item 2</span></li></ul>`,
113+
position: 'left',
114+
mini: true
115+
}).data("kendoDrawer");
116+
});
117+
</script>
118+
119+
### mini.width `Number`
120+
121+
Defines a specific width for the Kendo UI Drawer when in mini mode.
122+
123+
#### Mini mode width example
124+
125+
<div id="drawer">
126+
<div>Content area content.</div>
127+
</div>
128+
<script>
129+
$(document).ready(function() {
130+
var drawerInstance = $("#drawer").kendoDrawer({
131+
mode: "push",
132+
template: `<ul><li data-role='drawer-item'><span class='k-icon k-i-star-outline'></span><span class='item-text'>item 1</span></li><li data-role='drawer-separator'></li><li data-role='drawer-item'><span class='k-icon k-i-twitter'></span><span class='item-text'>item 2</span></li></ul>`,
133+
position: 'left',
134+
mini: {
135+
width: 45
136+
}
137+
}).data("kendoDrawer");
138+
});
139+
</script>
140+
141+
### mini.template `String`
142+
143+
Defines a specific template for the Kendo UI Drawer when in mini mode.
144+
145+
#### Template example
146+
147+
<div id="drawer">
148+
<div>Content area content.</div>
149+
</div>
150+
<script>
151+
$(document).ready(function() {
152+
var drawerInstance = $("#drawer").kendoDrawer({
153+
mode: "push",
154+
template: `<ul><li data-role='drawer-item'><span class='k-icon k-i-star-outline'></span><span class='item-text'>item 1</span></li><li data-role='drawer-separator'></li><li data-role='drawer-item'><span class='k-icon k-i-twitter'></span><span class='item-text'>item 2</span></li></ul>`,
155+
position: 'left',
156+
mini: {
157+
width: 45,
158+
template: `<ul><li data-role='drawer-item'><span class='k-icon k-i-anchor'></span></li><li data-role='drawer-item'><span class='k-icon k-i-paint'></span></li></ul>`
159+
}
160+
}).data("kendoDrawer");
161+
});
162+
</script>
163+
164+
### swipeToOpen `Boolean` *(default: true)*
165+
166+
If set to `false`, swiping the associated content will not activate the drawer. In this case, the drawer will only be open by calling the show method.
167+
168+
`swipeToOpen` should be disabled for browsers, which use side swiping gestures for back/forward navigation, such as iOS Safari. Otherwise, users should swipe from an inner part of the view, and not from the view edge.
169+
170+
### width `Number`
171+
172+
Defines a specific width for the Kendo UI Drawer when expanded.
173+
174+
#### width example
175+
176+
<div id="drawer">
177+
<div>Content area content.</div>
178+
</div>
179+
<script>
180+
$(document).ready(function() {
181+
var drawerInstance = $("#drawer").kendoDrawer({
182+
mode: "push",
183+
template: `<ul><li data-role='drawer-item'><span class='k-icon k-i-star-outline'></span><span class='item-text'>item 1</span></li><li data-role='drawer-separator'></li><li data-role='drawer-item'><span class='k-icon k-i-twitter'></span><span class='item-text'>item 2</span></li></ul>`,
184+
position: 'left',
185+
width: 200
186+
}).data("kendoDrawer");
187+
});
188+
</script>
189+
190+
## Methods
191+
192+
### destroy
193+
194+
Prepares the **Drawer** for safe removal from DOM. Detaches all event handlers and removes jQuery.data attributes to avoid memory leaks. Calls destroy method of any child Kendo widgets.
195+
196+
> **Important:** This method does not remove the Drawer element from DOM.
197+
198+
#### Example
199+
200+
<button class='destroy'>Destroy</button>
201+
<div id="drawer">
202+
<div>Content area content.</div>
203+
</div>
204+
<script>
205+
$(document).ready(function() {
206+
var drawerInstance = $("#drawer").kendoDrawer({
207+
mode: "push",
208+
template: `<ul><li data-role='drawer-item'><span class='k-icon k-i-star-outline'></span><span class='item-text'>item 1</span></li><li data-role='drawer-separator'></li><li data-role='drawer-item'><span class='k-icon k-i-twitter'></span><span class='item-text'>item 2</span></li></ul>`,
209+
position: 'left'
210+
}).data("kendoDrawer");
211+
212+
$('.destroy').click(function() {
213+
drawerInstance.destroy();
214+
});
215+
});
216+
</script>
217+
218+
### hide
219+
220+
Hide the Drawer
221+
222+
#### Example
223+
224+
<button id='show'>Show</button>
225+
<button id='hide'>Hide</button>
226+
<div id="drawer">
227+
<div>Content area content.</div>
228+
</div>
229+
<script>
230+
$(document).ready(function() {
231+
var drawerInstance = $("#drawer").kendoDrawer({
232+
mode: "push",
233+
template: `<ul><li data-role='drawer-item'><span class='k-icon k-i-star-outline'></span><span class='item-text'>item 1</span></li><li data-role='drawer-separator'></li><li data-role='drawer-item'><span class='k-icon k-i-twitter'></span><span class='item-text'>item 2</span></li></ul>`,
234+
position: 'left'
235+
}).data("kendoDrawer");
236+
237+
$('#show').click(function() {
238+
drawerInstance.show();
239+
});
240+
$('#hide').click(function() {
241+
drawerInstance.hide();
242+
});
243+
});
244+
</script>
245+
246+
### show
247+
248+
Show the Drawer
249+
250+
#### Example
251+
252+
<button id='show'>Show</button>
253+
<button id='hide'>Hide</button>
254+
<div id="drawer">
255+
<div>Content area content.</div>
256+
</div>
257+
<script>
258+
$(document).ready(function() {
259+
var drawerInstance = $("#drawer").kendoDrawer({
260+
mode: "push",
261+
template: `<ul><li data-role='drawer-item'><span class='k-icon k-i-star-outline'></span><span class='item-text'>item 1</span></li><li data-role='drawer-separator'></li><li data-role='drawer-item'><span class='k-icon k-i-twitter'></span><span class='item-text'>item 2</span></li></ul>`,
262+
position: 'left'
263+
}).data("kendoDrawer");
264+
265+
$('#show').click(function() {
266+
drawerInstance.show();
267+
});
268+
$('#hide').click(function() {
269+
drawerInstance.hide();
270+
});
271+
});
272+
</script>
273+
274+
275+
## Events
276+
277+
### hide
278+
279+
Fired when the Kendo UI Drawer is about to be hidden. The event can be prevented by calling the `preventDefault` method of the event parameter.
280+
281+
#### Example
282+
283+
<div id="drawer">
284+
<div>Content area content.</div>
285+
</div>
286+
<script>
287+
$(document).ready(function() {
288+
var drawerInstance = $("#drawer").kendoDrawer({
289+
mode: "push",
290+
template: `<ul><li data-role='drawer-item'><span class='k-icon k-i-star-outline'></span><span class='item-text'>item 1</span></li><li data-role='drawer-separator'></li><li data-role='drawer-item'><span class='k-icon k-i-twitter'></span><span class='item-text'>item 2</span></li></ul>`,
291+
position: 'left',
292+
hide: function(e) {
293+
console.log("Drawer is about to be hidden");
294+
}
295+
296+
}).data("kendoDrawer");
297+
});
298+
</script>
299+
300+
#### Event Data
301+
302+
##### e.sender `kendo.ui.Drawer`
303+
304+
The widget instance which fired the event.
305+
306+
### show
307+
308+
Fires before the Kendo UI Drawer is revealed. The event can be prevented by calling the `preventDefault` method of the event parameter.
309+
310+
#### Example
311+
312+
<div id="drawer">
313+
<div>Content area content.</div>
314+
</div>
315+
<script>
316+
$(document).ready(function() {
317+
var drawerInstance = $("#drawer").kendoDrawer({
318+
mode: "push",
319+
template: `<ul><li data-role='drawer-item'><span class='k-icon k-i-star-outline'></span><span class='item-text'>item 1</span></li><li data-role='drawer-separator'></li><li data-role='drawer-item'><span class='k-icon k-i-twitter'></span><span class='item-text'>item 2</span></li></ul>`,
320+
position: 'left',
321+
show: function(e) {
322+
e.preventDefault();
323+
}
324+
325+
}).data("kendoDrawer");
326+
});
327+
</script>
328+
329+
### itemClick
330+
331+
Fires when user clicks on item from the Kendo UI Drawer.
332+
333+
#### Example
334+
335+
<div id="drawer">
336+
<div>Content area content.</div>
337+
</div>
338+
<script>
339+
$(document).ready(function() {
340+
var drawerInstance = $("#drawer").kendoDrawer({
341+
mode: "push",
342+
template: `<ul><li data-role='drawer-item'><span class='k-icon k-i-star-outline'></span><span class='item-text'>item 1</span></li><li data-role='drawer-separator'></li><li data-role='drawer-item'><span class='k-icon k-i-twitter'></span><span class='item-text'>item 2</span></li></ul>`,
343+
position: 'left',
344+
itemClick: function(e) {
345+
console.log("Clicked on the" + e.item.find(".item-text").text());
346+
}
347+
348+
}).data("kendoDrawer");
349+
});
350+
</script>
351+
352+
## Fields
353+
354+
### visible `Boolean`
355+
356+
Holds information about the current state of the Drawer. If it is currently opened then the visible field will be set to true.
357+
358+
#### Example - get the current Drawer state
359+
360+
<button id='show'>Show</button>
361+
<div id="drawer">
362+
<div>Content area content.</div>
363+
</div>
364+
<script>
365+
$(document).ready(function() {
366+
var drawerInstance = $("#drawer").kendoDrawer({
367+
mode: "push",
368+
template: `<ul><li data-role='drawer-item'><span class='k-icon k-i-star-outline'></span><span class='item-text'>item 1</span></li><li data-role='drawer-separator'></li><li data-role='drawer-item'><span class='k-icon k-i-twitter'></span><span class='item-text'>item 2</span></li></ul>`,
369+
position: 'left'
370+
}).data("kendoDrawer");
371+
372+
$('#show').click(function() {
373+
drawerInstance.show();
374+
console.log(drawerInstance.visible);
375+
});
376+
});
377+
</script>

‎docs/controls/data-management/grid/how-to/AngularJS/adjust-row-heights-for-grid-with-locked-columns.md‎ renamed to ‎docs/knowledge-base/adjust-row-heights-for-grid-with-locked-columns.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
title: Adjust Row Heights When Columns Are Locked
33
page_title: jQuery Grid Documentation | Row Heights of Locked Columns | Kendo UI
44
description: "Get started with the jQuery Grid by Kendo UI and learn how to adjust the height of its rows when columns are locked."
5+
previous_url: /controls/data-management/grid/how-to/AngularJS/adjust-row-heights-for-grid-with-locked-columns
56
slug: howto_adjust_row_heights_template_locked_columns_grid
67
position: 1
78
---

0 commit comments

Comments
 (0)