Skip to content

Commit 3eadd8c

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 50dc432 commit 3eadd8c

Some content is hidden

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

47 files changed

+203
-40809
lines changed

‎.eslintignore

-2
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@
55
src/module.js
66

77
# dependencies to ignore
8-
src/angular.js
9-
src/angular.min.js
108
src/jquery.js
119
src/jquery.min.js
1210
src/jszip.js

‎build/gulp/tasks/karma.js

-2
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,6 @@ if (browserOption) {
3434

3535
TESTS.beforeTestFiles.push(jquery);
3636
TESTS.beforeTestFiles.push('tests/jquery.mockjax.js');
37-
TESTS.beforeTestFiles.push('src/angular.js');
38-
TESTS.beforeTestFiles.push('tests/angular-route.js');
3937
TESTS.beforeTestFiles.push('tests/jasmine.js');
4038
TESTS.beforeTestFiles.push('tests/jasmine-boot.js');
4139
TESTS.beforeTestFiles.push('node_modules/axe-core/axe.js');

‎docs-aspnet/html-helpers/data-management/grid/toolbar.md

+181
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ You can configure the Toolbar and include any of the built-in commands:
2121
toolbar.Pdf();
2222
toolbar.Excel();
2323
toolbar.Search();
24+
toolbar.Spacer();
25+
toolbar.Separator();
2426
})
2527
```
2628
{% if site.core %}
@@ -31,6 +33,8 @@ You can configure the Toolbar and include any of the built-in commands:
3133
<toolbar-button name="pdf"></toolbar-button>
3234
<toolbar-button name="excel"></toolbar-button>
3335
<toolbar-button name="search"></toolbar-button>
36+
<toolbar-button name="spacer" type="spacer"></toolbar-button>
37+
<toolbar-button name="separator" type="separator"></toolbar-button>
3438
</toolbar>
3539
```
3640
{% endif %}
@@ -43,6 +47,8 @@ You can configure the Toolbar and include any of the built-in commands:
4347
| Pdf | Exports the grid data in PDF format.| [PDF Export documentation]({% slug pdfexport_gridhelper_aspnetcore %})|
4448
| Excel | Exports the grid data in MS Excel format.| [Excel Export documentation]({% slug excelexport_gridhelper_aspnetcore %})|
4549
| Search | Adds the built-in search panel for the Grid.| [Search Panel documentation]({% slug htmlhelpers_grid_aspnetcore_searchpanel %})|
50+
| Spacer | Moves the tools that are declared after it to the right side of the ToolBar.| |
51+
| Separator | Acts as a delimiter between the ToolBar commands.| |
4652

4753
## Custom Commands
4854

@@ -82,6 +88,98 @@ The following example demonstrates how to add a custom command to the Toolbar:
8288
```
8389
{% endif %}
8490

91+
As of {{site.product}} R3 2023 SP1 you can use the [Template component]({% slug htmlhelpers_overview_template %}) to define custom ToolBar commands, alongside the default ToolBar commands.
92+
93+
The following example demonstrates how you can add a Button and DropDownList components to the Grid's Toolbar, along with a default `Excel` command:
94+
95+
```HtmlHelper
96+
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
97+
.Name("grid")
98+
.ToolBar(toolbar=> {
99+
toolbar.Custom().ClientTemplate(
100+
Html.Kendo().Template().AddComponent(c=>c
101+
.Button()
102+
.Name("refresh")
103+
.Icon("arrow-rotate-cw")
104+
.HtmlAttributes(new {title="Refresh"})
105+
.Events(ev=>ev.Click("refresh"))
106+
));
107+
toolbar.Spacer();
108+
toolbar.Custom().ClientTemplate(
109+
Html.Kendo().Template()
110+
.AddHtml("<label class=\"category-label\" for=\"category\">Show products by category:</label>")
111+
.AddComponent(c => c
112+
.DropDownList()
113+
.Name("categories")
114+
.OptionLabel("All")
115+
.DataTextField("CategoryName")
116+
.DataValueField("CategoryID")
117+
.AutoBind(false)
118+
.Events(e => e.Change("categoriesChange"))
119+
.HtmlAttributes(new { style = "width: 150px;" })
120+
.DataSource(ds =>
121+
{
122+
ds.Read("ToolbarTemplate_Categories", "Grid");
123+
})
124+
));
125+
toolbar.Separator();
126+
toolbar.Excel();
127+
})
128+
)
129+
```
130+
{% if site.core %}
131+
```TagHelper
132+
<kendo-grid name="grid" height="500">
133+
<toolbar>
134+
<toolbar-button>
135+
<toolbar-command-template>
136+
<kendo-button name="iconButton" icon="arrow-rotate-cw" on-click="refresh">
137+
</kendo-button>
138+
</toolbar-command-template>
139+
</toolbar-button>
140+
<toolbar-button name="spacer" type="spacer" />
141+
<toolbar-button>
142+
<toolbar-command-template>
143+
<label class="category-label" for="category">Show products by category:</label>
144+
<kendo-dropdownlist name="categories" style="width:150px"
145+
datatextfield="CategoryName"
146+
datavaluefield="CategoryID"
147+
option-label="All"
148+
auto-bind="false"
149+
on-change="categoriesChange">
150+
<datasource type="DataSourceTagHelperType.Custom">
151+
<transport>
152+
<read url="@Url.Action("ToolbarTemplate_Categories", "Grid")" />
153+
</transport>
154+
</datasource>
155+
</kendo-dropdownlist>
156+
</toolbar-command-template>
157+
</toolbar-button>
158+
<toolbar-button name="separator" type="separator" />
159+
<toolbar-button name="excel" />
160+
</toolbar>
161+
</kendo-grid>
162+
```
163+
{% endif %}
164+
```JavaScript
165+
<script>
166+
function refresh() {
167+
var grid = $("#grid").data("kendoGrid");
168+
grid.dataSource.read();
169+
}
170+
function categoriesChange() {
171+
var value = this.value(),
172+
grid = $("#grid").data("kendoGrid");
173+
174+
if (value) {
175+
grid.dataSource.filter({ field: "CategoryID", operator: "eq", value: parseInt(value) });
176+
} else {
177+
grid.dataSource.filter({});
178+
}
179+
}
180+
</script>
181+
```
182+
85183
## Toolbar Template
86184

87185
The {{site.product}} Grid also supports using a template for the Toolbar. You can define a template by using the [`ClientTemplate()`](/api/kendo.mvc.ui.fluent/gridtoolbarcommandfactory#clienttemplatesystemstring) or the [`ClientTemplateid()`](/api/kendo.mvc.ui.fluent/gridtoolbarcommandfactory#clienttemplateidsystemstring) configuration options.{% if site.core %} For TagHelper Grid configuration use the `client-template` or `client-template-id` properties.
@@ -167,6 +265,89 @@ When you use a Toolbar Template, and you also want to use a built-in command, th
167265
```
168266
{% endif %}
169267

268+
{% if site.mvc %}
269+
### Server-side rendering of the ToolBar Template
270+
271+
Rendering of the Toolbar on the server is supported via the [`.Template()`](/api/kendo.mvc.ui.fluent/gridtoolbarcommandfactory#templatesystemaction) configuration. The following example demonstrates how to define a server-side ToolBar Template:
272+
273+
```HtmlHelper
274+
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
275+
.Name("grid")
276+
.ToolBar(toolbar =>
277+
{
278+
toolbar.Template(@<text>
279+
<div class="refreshBtnContainer">
280+
<a href="\\#" class="k-pager-refresh k-link k-button k-button-solid-base k-button-solid k-button-md k-rounded-md" title="Refresh"><span class="k-button-icon k-icon k-i-reload"></span></a>
281+
</div>
282+
<div class="toolbar">
283+
<label class="category-label" for="category">Show products by category:</label>
284+
@(Html.Kendo().DropDownList()
285+
.Name("categories")
286+
.OptionLabel("All")
287+
.DataTextField("CategoryName")
288+
.DataValueField("CategoryID")
289+
.AutoBind(false)
290+
.Events(e => e.Change("categoriesChange"))
291+
.HtmlAttributes(new { style = "width: 150px;" })
292+
.DataSource(ds =>
293+
{
294+
ds.Read("ToolbarTemplate_Categories", "Grid");
295+
})
296+
)
297+
</div>
298+
</text>);
299+
})
300+
```
301+
```JavaScript
302+
<script>
303+
$(document).ready( function () {
304+
var grid = $("#grid");
305+
grid.find(".k-grid-toolbar").on("click", ".k-pager-refresh", function (e) {
306+
e.preventDefault();
307+
grid.data("kendoGrid").dataSource.read();
308+
});
309+
310+
});
311+
312+
function categoriesChange() {
313+
var value = this.value(),
314+
grid = $("#grid").data("kendoGrid");
315+
316+
if (value) {
317+
grid.dataSource.filter({ field: "CategoryID", operator: "eq", value: parseInt(value) });
318+
} else {
319+
grid.dataSource.filter({});
320+
}
321+
}
322+
</script>
323+
```
324+
```CSS
325+
<style>
326+
#grid .k-grid-toolbar
327+
{
328+
padding: .6em 1.3em .6em .4em;
329+
}
330+
.category-label
331+
{
332+
vertical-align: middle;
333+
padding-right: .5em;
334+
}
335+
#category
336+
{
337+
vertical-align: middle;
338+
}
339+
.refreshBtnContainer {
340+
display: inline-block;
341+
}
342+
.k-grid .toolbar {
343+
margin-left: auto;
344+
margin-right: 0;
345+
}
346+
</style>
347+
```
348+
349+
{% endif %}
350+
170351
## See Also
171352
* [Batch Editing of the Grid HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/grid/editing)
172353
* [PopUp Editing of the Grid HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/grid/editing-popup)

‎docs/knowledge-base/grid-remove-filter-row-operators.md

+6-12
Original file line numberDiff line numberDiff line change
@@ -28,15 +28,13 @@ How can I remove or hide the drop-down with the filter operators when the row fi
2828

2929
## Solution
3030

31-
The Grid provides no built-in functionality for disabling the button with the filter operators for all cells in row filtering mode. However, you can use a workaround to hide the button by applying the following CSS rules:
31+
The Grid provides no built-in functionality for disabling the button with the filter operators for all cells in row filtering mode. However, you can use a workaround to hide the button by applying the following jQuery logic:
3232

33-
```css
34-
th [role="listbox"]{
35-
visibility: hidden;
36-
}
33+
```
34+
$('td span.k-dropdown-operator').remove();
3735
```
3836

39-
The following example demonstrates the complete implementation of the suggested approach.
37+
The following example demonstrates the complete implementation of the above approach.
4038

4139
```dojo
4240
<div id="grid"></div>
@@ -103,12 +101,8 @@ The following example demonstrates the complete implementation of the suggested
103101
format: "{0:MM/dd/yyyy}"
104102
}]
105103
});
104+
105+
$('td span.k-dropdown-operator').remove();
106106
});
107107
</script>
108-
109-
<style>
110-
th [role="listbox"]{
111-
visibility: hidden;
112-
}
113-
</style>
114108
```

‎docs/knowledge-base/set-caret-position-using-javascript.md

+13-9
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,9 @@ The exact implementation in other scenarios varies, depending on the business lo
4444
The following example demonstrates how to use a position index&mdash;that is, it sets a caret position inside the Editor to a specified index.
4545

4646
```dojo
47-
<div id="example" style="margin: 2em;">
48-
<p><button id="setPosition" class="k-button">Click</button></p>
49-
<div id="editor">Some text to focus and edit.</div>
47+
<div id="example">
48+
<p><button id="setPosition" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md">Click</button></p>
49+
<textarea id="editor">Some text to focus and edit.</textarea>
5050
</div>
5151
5252
<script>
@@ -75,26 +75,30 @@ The following example demonstrates how to use a position index&mdash;that is, it
7575
The following example demonstrates how to search for a string&mdash;that is, it sets the a caret position to the start of a string.
7676

7777
```dojo
78-
<div id="example" style="margin: 2em;">
79-
<p><input id="stringToFocus" class="k-textbox" type="text" value="focus" /> <button id="setPosition" class="k-button">Click</button></p>
80-
<div id="editor" style="margin: 5em 0 0">
78+
<div id="example">
79+
<p>
80+
<input id="stringToFocus" class="k-textbox" type="text" value="focus" style="width: 20%" />
81+
<button id="setPosition" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md">Click</button>
82+
</p>
83+
<textarea id="editor" style="margin: 5em 0 0">
8184
<p>Random paragraph 1.</p>
8285
<p>Some text to focus and edit.</p>
83-
</div>
86+
</textarea>
8487
</div>
8588
8689
<script>
8790
$(document).ready(function() {
8891
$("#editor").kendoEditor();
92+
$("#stringToFocus").kendoTextBox();
8993
9094
9195
function findNodeOfString(container, str) {
9296
var nodeIterator = document.createNodeIterator(
9397
container,
9498
NodeFilter.SHOW_TEXT,
9599
function(node) {
96-
return node.nodeValue.indexOf(str) >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
97-
});
100+
return node.nodeValue.indexOf(str) >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
101+
});
98102
99103
return nodeIterator.nextNode();
100104
}

‎gulpfile.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ function uglifyScripts(stream) {
7070
}
7171

7272
function distThirdParty() {
73-
return gulp.src('src/{jquery,angular,pako,jszip}*.*')
73+
return gulp.src('src/{jquery,pako,jszip}*.*')
7474
.pipe(gulp.dest('dist/js'));
7575
}
7676

‎rollup.dev.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import path from 'path';
44
import { baseOptions, root } from './rollup.config';
55

66
const files = glob.sync('**/kendo.*.js', { cwd: root })
7-
.filter((file) => !['angular.js', 'angular.min.js', 'jquery.js', 'jquery.min.js', 'jszip.js', 'jszip.min.js'].includes(file));
7+
.filter((file) => !['jquery.js', 'jquery.min.js', 'jszip.js', 'jszip.min.js'].includes(file));
88

99
const resolvedFiles = files.map(f => path.resolve(root, f));
1010

0 commit comments

Comments
 (0)