Skip to content

Commit

Permalink
Sync with Kendo UI Professional
Browse files Browse the repository at this point in the history
  • Loading branch information
@kendo-bot
kendo-bot committed Jan 7, 2025
1 parent 048bd88 commit 5b139fc
Show file tree
Hide file tree
Showing 15 changed files with 404 additions and 278 deletions.
8 changes: 2 additions & 6 deletions docs-aspnet/_config.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ start-docs.sh,
watch.sh,
getting-started-mvc/*,
html-helpers/helper-basics/build-team-efficiency-dashboard/*,
how-to/*,
tutorials/*,
troubleshoot/troubleshooting.md,
troubleshoot/troubleshooting-validation.md,
Expand Down Expand Up @@ -66,17 +65,14 @@ html-helpers/editors/autocomplete/how-to/*,
html-helpers/editors/colorpicker/how-to/*,
html-helpers/editors/datepicker/how-to/*,
html-helpers/editors/dropdownlist/how-to/*,
html-helpers/editors/multiselect/how-to/*,
html-helpers/interactivity/progressbar/how-to/*,
html-helpers/layout/window/how-to/*,
html-helpers/navigation/menu/how-to/*,
html-helpers/navigation/panelbar/how-to/*,
html-helpers/navigation/treeview/how-to/*,
html-helpers/scheduling/scheduler/how-to/*,
tag-helpers/*,
knowledge-base/switch-change-messages-inside-grid.md,
knowledge-base/upload-files-to-database.md,
knowledge-base/treeview-expand-node-async]
knowledge-base/treeview-expand-node-async,
knowledge-base/mvc-with-requirejs.md]

exclude_navigation: ["knowledge-base/*",
api/kendo.mvc/*,
Expand Down
18 changes: 0 additions & 18 deletions docs-aspnet/how-to/define-custom-helper-methods-for-mvc.md
View file

This file was deleted.

19 changes: 0 additions & 19 deletions docs-aspnet/how-to/refer-from-cdn-local-script-fallback-mvc.md
View file

This file was deleted.

18 changes: 0 additions & 18 deletions docs-aspnet/how-to/use-with-aspnet-bundles.md
View file

This file was deleted.

19 changes: 0 additions & 19 deletions docs-aspnet/how-to/use-with-requirejs-mvc.md
View file

This file was deleted.

159 changes: 98 additions & 61 deletions docs-aspnet/html-helpers/data-management/grid/toolbar.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ You can configure the Toolbar and include any of the built-in commands:

## Custom Commands

The {{site.product}} Grid supports adding custom commands to it's Toolbar.
The Toolbar of the Grid component supports custom commands.

The following example demonstrates how to add a custom command to the Toolbar:
```HtmlHelper
Expand All @@ -68,10 +68,9 @@ The following example demonstrates how to add a custom command to the Toolbar:
<script>
$(document).ready(function(){
$("#customCommand").click(function (e) {
e.preventDefault();
alert('click')
//add custom command logic here
$("#customCommand").on("click", function(event) {
alert('Custom command is clicked.');
// Add the custom command logic here.
});
})
</script>
Expand All @@ -84,10 +83,9 @@ The following example demonstrates how to add a custom command to the Toolbar:
<script>
$(document).ready(function(){
$(".k-grid-customCommand").click(function (e) {
e.preventDefault();
alert('click')
//add custom command logic here
$(".k-grid-customCommand").on("click", function(event) {
alert('Custom command is clicked.');
// Add the custom command logic here.
});
})
</script>
Expand All @@ -97,27 +95,61 @@ The following example demonstrates how to add a custom command to the Toolbar:

## Toolbar Template

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.
{% endif %}
The Grid also supports using a template for the Toolbar. {% if site.core %}You can define the template as a string or an [external Kendo UI template](https://docs.telerik.com/kendo-ui/framework/templates/get-started-external), load it through a partial view, or return its content using a JavaScript function.{% else %}You can define the template as a string or return its content using a JavaScript function.{% endif %} For more information on the available template options, refer to the [`ToolBar()`](/api/kendo.mvc.ui.fluent/gridtoolbarcommandfactory) API.

{% if site.core %}
The following example shows how to create a template for the Toolbar using an [external Kendo UI template](https://docs.telerik.com/kendo-ui/framework/templates/get-started-external).

```HtmlHelper
.ToolBar(toolbar => {
toolbar.ClientTemplateId("GridToolbarTemplate");
})
```
{% if site.core %}
```TagHelper
<toolbar client-template-id="GridToolbarTemplate">
</toolbar>
```
{% endif %}
```GridToolbarTemplate
<script id="GridToolbarTemplate" type="text/x-kendo-template">
<button class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base">Custom command</button>
</script>
```
{% else %}
The following example shows how to create a template for the Toolbar using the `ClientTemplateHandler()` option, which returns an [external Kendo UI template](https://docs.telerik.com/kendo-ui/framework/templates/get-started-external).

```HtmlHelper
.ToolBar(toolbar => {
toolbar.ClientTemplateHandler("getToolbarTemplate");
})
```
```JS
<script id="GridToolbarTemplate" type="text/x-kendo-template">
<button class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base">Custom command</button>
</script>

<script>
function getToolbarTemplate(data) {
var template = $("#GridToolbarTemplate").html();
return template;
}
</script>
```
{% endif %}

### Built-In and Custom Commands in the Toolbar Template

When you use a Toolbar Template, and you also want to use a built-in command, then add the markup for the desired command. The following example demonstrates how to add the `Pdf` and `Search` commands to the Toolbar Template.
To use the built-in commands in the Toolbar template, add the `HTML` markup of the respective command.

The following example demonstrates how to add the built-in `Pdf` and `Search` commands together with custom commands to the Toolbar template.

```HtmlHelper
<script id="GridToolbarTemplate" type="text/x-kendo-template">
<div class="refreshBtnContainer">
<a href="\\#" class="k-pager-refresh k-link k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-icon" title="Refresh"><span class="k-icon k-i-reload"></span></a>
@(Html.Kendo().Button()
.Name("refresh")
.Icon("arrow-rotate-cw")
.ToClientTemplate()
)
</div>
<a role="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-icontext k-grid-pdf" href="\\#"><span class="k-icon k-i-file-pdf"></span>Export to PDF</a>
Expand Down Expand Up @@ -150,20 +182,20 @@ When you use a Toolbar Template, and you also want to use a built-in command, th
```TagHelper
<script id="GridToolbarTemplate" type="text/html">
<div class="refreshBtnContainer">
<a href="\\#" class="k-pager-refresh k-link k-button k-button-solid-base k-button-solid k-button-rectangle k-button-md k-rounded-md k-button-icon" title="Refresh"><span class="k-icon k-i-reload"></span></a>
<kendo-button name="refresh" icon="arrow-rotate-cw" is-in-client-template="true">
</kendo-button>
</div>
<a role="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-icontext k-grid-pdf" href="\\#"><span class="k-icon k-i-file-pdf"></span>Export to PDF</a>
<div class="toolbar">
<label class="category-label" for="category">Show products by category:</label>
<kendo-dropdownlist name="categories" style="width:150px"
datatextfield="CategoryName"
datavaluefield="CategoryId"
option-label="All"
auto-bind="false"
on-change="categoriesChange"
is-in-client-template="true">
<kendo-dropdownlist name="categories" style="width:150px" is-in-client-template="true"
datatextfield="CategoryName"
datavaluefield="CategoryId"
option-label="All"
auto-bind="false"
on-change="categoriesChange">
<datasource type="DataSourceTagHelperType.Custom">
<transport>
<read url="@Url.Action("ToolbarTemplate_Categories", "Grid")" />
Expand All @@ -180,9 +212,9 @@ When you use a Toolbar Template, and you also want to use a built-in command, th
```
{% endif %}

As of {{site.product}} `R3 2023 SP1` release you can use the [Template component]({% slug htmlhelpers_overview_template %}) to define custom ToolBar commands, alongside the default ToolBar commands.
Starting with version R3 2023 SP1, you can use the [Template component]({% slug htmlhelpers_overview_template %}) to define custom Toolbar commands alongside the default ones.

The following example demonstrates how you can add a Button and DropDownList components to the Grid's Toolbar, along with a default `Excel` command demonstrated in the [{{site.product}} Grid Toolbar Template Demo](https://demos.telerik.com/{{site.platform}}/grid/toolbar-template).
The following example demonstrates how you can add [Button]({% slug htmlhelpers_button_aspnetcore %}) and [DropDownList]({% slug htmlhelpers_dropdownlist_aspnetcore %}) components to the Grid's Toolbar, along with the default `Excel` command. For a live example, visit the [Toolbar Template Demo of the Grid](https://demos.telerik.com/{{site.platform}}/grid/toolbar-template).

```HtmlHelper
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
Expand Down Expand Up @@ -225,7 +257,7 @@ The following example demonstrates how you can add a Button and DropDownList com
<toolbar>
<toolbar-button>
<toolbar-command-template>
<kendo-button name="iconButton" icon="arrow-rotate-cw" on-click="refresh">
<kendo-button name="refresh" icon="arrow-rotate-cw" on-click="refresh">
</kendo-button>
</toolbar-command-template>
</toolbar-button>
Expand All @@ -234,11 +266,11 @@ The following example demonstrates how you can add a Button and DropDownList com
<toolbar-command-template>
<label class="category-label" for="category">Show products by category:</label>
<kendo-dropdownlist name="categories" style="width:150px"
datatextfield="CategoryName"
datavaluefield="CategoryID"
option-label="All"
auto-bind="false"
on-change="categoriesChange">
datatextfield="CategoryName"
datavaluefield="CategoryID"
option-label="All"
auto-bind="false"
on-change="categoriesChange">
<datasource type="DataSourceTagHelperType.Custom">
<transport>
<read url="@Url.Action("ToolbarTemplate_Categories", "Grid")" />
Expand Down Expand Up @@ -273,54 +305,57 @@ The following example demonstrates how you can add a Button and DropDownList com
```

{% if site.mvc %}
### Server-side rendering of the ToolBar Template
### Server-Side Rendering of the Toolbar Template

Rendering of the Toolbar on the server is supported by using the [`Template()`](/api/kendo.mvc.ui.fluent/gridtoolbarcommandfactory#templatesystemaction) configuration option.

Rendering of the Toolbar on the server is supported by using the [`.Template()`](/api/kendo.mvc.ui.fluent/gridtoolbarcommandfactory#templatesystemaction) configuration. The following example demonstrates how to define a server-side ToolBar Template.
The following example demonstrates how to define a server-side Toolbar template.

```HtmlHelper
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
.Name("grid")
.ToolBar(toolbar =>
{
toolbar.Template(@<text>
<div class="refreshBtnContainer">
<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>
</div>
<div class="toolbar">
<label class="category-label" for="category">Show products by category:</label>
@(Html.Kendo().DropDownList()
.Name("categories")
.OptionLabel("All")
.DataTextField("CategoryName")
.DataValueField("CategoryID")
.AutoBind(false)
.Events(e => e.Change("categoriesChange"))
.HtmlAttributes(new { style = "width: 150px;" })
.DataSource(ds =>
{
ds.Read("ToolbarTemplate_Categories", "Grid");
})
)
</div>
<div class="refreshBtnContainer">
<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>
</div>
<div class="toolbar">
<label class="category-label" for="category">Show products by category:</label>
@(Html.Kendo().DropDownList()
.Name("categories")
.OptionLabel("All")
.DataTextField("CategoryName")
.DataValueField("CategoryID")
.AutoBind(false)
.Events(e => e.Change("categoriesChange"))
.HtmlAttributes(new { style = "width: 150px;" })
.DataSource(ds =>
{
ds.Read("ToolbarTemplate_Categories", "Grid");
})
)
</div>
</text>);
})
... // Additional configuration.
)
```
```JavaScript
<script>
$(document).ready( function () {
$(document).ready(function() {
var grid = $("#grid");
grid.find(".k-grid-toolbar").on("click", ".k-pager-refresh", function (e) {
e.preventDefault();
grid.data("kendoGrid").dataSource.read();
});

});

function categoriesChange() {
var value = this.value(),
grid = $("#grid").data("kendoGrid");
grid = $("#grid").data("kendoGrid");

if (value) {
if(value) {
grid.dataSource.filter({ field: "CategoryID", operator: "eq", value: parseInt(value) });
} else {
grid.dataSource.filter({});
Expand Down Expand Up @@ -352,11 +387,13 @@ Rendering of the Toolbar on the server is supported by using the [`.Template()`]
}
</style>
```

{% endif %}

## See Also
* [Batch Editing of the Grid HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/grid/editing)
* [PopUp Editing of the Grid HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/grid/editing-popup)
* [Excel Export of the Grid HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/grid/excel-export)
* [PDF Export of the Grid HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/grid/pdf-export)

* [Toolbar Template of the Grid HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/grid/toolbar-template)
* [Toolbar Columns Menu of the Grid HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/grid/toolbar-columns-menu)
* [Server-Side API of the Grid HtmlHelper](/api/grid)
{% if site.core %}
* [Server-Side API of the Grid TagHelper](/api/taghelpers/grid)
{% endif %}
Loading

0 comments on commit 5b139fc

Please sign in to comment.