From ddc83d09ab38441fd2e6325a91b621dfb8430c96 Mon Sep 17 00:00:00 2001 From: kendo-bot Date: Fri, 29 Nov 2024 04:19:57 +0000 Subject: [PATCH] Sync with Kendo UI Professional --- .../first-steps-vs-mac.md | 136 ----- .../charts/bar-chart/date-axis.md | 490 ++++++++-------- .../charts/bar-chart/gap-spacing.md | 348 ++++++------ .../html-helpers/charts/no-data-template.md | 4 +- .../grid/export/server-export.md | 526 +++++++++--------- .../editors/captcha/validation.md | 16 +- .../declarative-initialization.md | 4 +- .../navigation/drawer/razor-page.md | 4 +- .../pdf/pdfviewer/dpl-processing.md | 2 + 9 files changed, 698 insertions(+), 832 deletions(-) delete mode 100644 docs-aspnet/getting-started-core/first-steps-vs-mac.md diff --git a/docs-aspnet/getting-started-core/first-steps-vs-mac.md b/docs-aspnet/getting-started-core/first-steps-vs-mac.md deleted file mode 100644 index ec1eb80b5b9..00000000000 --- a/docs-aspnet/getting-started-core/first-steps-vs-mac.md +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: First Steps on Mac -page_title: Getting Started on Visual Studio for Mac -description: "Create a sample project on Visual Studio for Mac with Progress Telerik UI for ASP.NET Core (aka MVC 6 or ASP.NET Core MVC)." -slug: gettingstarted_firststeps_vsmac -position: 2 -permalink: /getting-started/first-steps-vs-mac ---- - -# Telerik UI for ASP.NET Core First Steps with VS for Mac - - - -Welcome to the First Steps on Mac guide on getting started with Progress® Telerik® UI for ASP.NET Core with Visual Studio for Mac! - -The guide creates a use-case scenario which demonstrates how to start working with the suite and implements the Kendo UI DatePicker for ASP.NET Core in your project by using the Telerik UI DatePicker HtmlHelper or TagHelper. For its purposes, the guide uses Visual Studio for Mac 2022. - -To get up and running with the project: - -1. [Download the controls](https://www.telerik.com/download-trial-file/v2/aspnet-core-ui) -1. [Meet the requirements](#meeting-the-requirements) -1. [Create the ASP.NET Core application](#creating-the-application) -1. [Add the UI for ASP.NET Core NuGet package](#adding-the-nuget-package) -1. [Add a license file to your app](#adding-your-license-file) - -## Meeting the Requirements - -* Follow the instructions from the [official .NET Core documentation site](https://docs.microsoft.com/en-us/dotnet/core/macos-prerequisites?tabs=netcore2x). -* Make sure that you have an active trial or commercial license for the product by downloading the installer from the [Telerik UI for ASP.NET Core product page](https://www.telerik.com/aspnet-core-ui). You will need the active trial or commercial license for [making downloads from YourAccount](https://www.telerik.com/account/my-downloads) and for working with your NuGet Feed. - -## Creating the Application - -1. Open Visual Studio for Mac 2022 and select **New**. -1. Select **Web Application(Model-View-Controller) .NET Core** > **App** and click **Next**. -1. Select the target framework of the project and click **Next**. -1. Set a name and location for the project and click **Create**. - -## Adding the NuGet Package - -1. Open the NuGet Package Manager. - - ![{{ site.product_short }} Locating and opening the NuGet package manager menu](../getting-started-core/images/mac-manage-nuget.png) - -2. Add a new [package source](https://docs.microsoft.com/en-us/visualstudio/mac/nuget-walkthrough?toc=%2Fnuget%2Ftoc.json&view=vsmac-2019#adding-package-sources). - - ![{{ site.product_short }} Adding the new NuGet source dialog](../getting-started-core/images/mac-add-nuget-source.png) - -3. In the **Add Package Source** popup, add a **Telerik Source** with the `https://nuget.telerik.com/v3/index.json` **Location** URL, enter your credentials (telerik.com email and password), and click **OK**. - - ![{{ site.product_short }} Adding the credentials and authenticating for NuGet](../getting-started-core/images/mac-nuget-authenticate.png) - -4. From the drop-down list with sources, select the **Telerik Source**. Search for and select `Telerik.UI.for.AspNet.Core`. Click **Add Package** to install it. As a result, a line similar to `` is added to your `.csproj` file. - - > If the package for Telerik UI for ASP.NET Core is not visible in your NuGet feed, then either you do not have an active trial or commercial license for the product, or your current trial or commercial license has expired. Download it from the [Telerik UI for ASP.NET Core product page](https://www.telerik.com/aspnet-core-ui). - - ![{{ site.product_short }} Selecting and installing the NuGet package](../getting-started-core/images/mac-nuget-install.png) - -5. Open the `Startup.cs` file and register the Kendo UI services in the `ConfigureServices` method. - - public void ConfigureServices(IServiceCollection services) - { - // Add Kendo UI services to the services container. - services.AddKendo(); - } - -6. Import the `Kendo.Mvc.UI` namespace in `~/Views/_ViewImports.cshtml` through `@using Kendo.Mvc.UI`. If you intend to use the Telerik UI ASP.NET Core Tag Helpers, add them with `@addTagHelper *, Kendo.Mvc`. - - @using MyASPNETCoreProject - @using MyASPNETCoreProject.Models - @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers - @addTagHelper *, Kendo.Mvc - @using Kendo.Mvc.UI - - -7. Include the [client-side resources]({% slug copyclientresources_aspnetmvc6_aspnetmvc %}) in `~\Views\Shared\_Layout.cshtml`. - - > * The CDN links and/or package versions have to point to the same UI for ASP.NET Core version which your project references. - > * The Kendo UI scripts have to be placed after `jQuery`. - > * As of R3 2023 the Kendo UI bundles do not include the jQuery library in their `js` directories and you can use any available jQuery source you prefer (https://jquery.com/download/). - - 7.1 Since the Microsoft template project uses Bootstrap, you can use the [Telerik UI Bootstrap theme]({% slug sassbasedthemes_overview%}#built-in-themes) to match it. - - 7.2 The Microsoft template comes with a jQuery script reference in the body. Find it and move it to the head. - - 7.3 After `jQuery`, copy and paste the scripts from this snippet. Make sure that the versions match the installed `Kendo.Mvc.dll`. - - - - - -If you prefer to include the client-side resources from a local source instead of CDNs, consider the following article: - -[Local Client-side Resources](https://docs.telerik.com/aspnet-core/installation/getting-started-copy-client-resources#including-client-side-resources) - -8. Use a Kendo UI widget by adding the snippet from the following example to `~/Views/Home/Index.cshtml`. - - ```tab-HtmlHelper -
-

Kendo UI DatePicker

- @(Html.Kendo().DatePicker() - .Name("datepicker") - ) -
- ``` - ```tab-TagHelper -
-

Kendo UI DatePicker

- -
- ``` - - As a result, the following sample page is created. - - ![{{ site.product_short }} The created sample page](../getting-started-core/images/mac-sample-page.png) - -@[template](/_contentTemplates/core/json-serialization-note.md#json-serialization-note) - -## Adding Your License File - -Using any client-side assets from the [Kendo UI CDN]({% slug cdnservices_core %}) or the [@progress/kendo-ui NPM package](https://www.npmjs.com/package/@progress/kendo-ui) requires you to add a Kendo UI for jQuery license file to your application. A missing license file triggers [a banner, a watermark, and causes a warning message](https://docs.telerik.com/kendo-ui/knowledge-base/invalid-license) in the browser's console. - -To generate your license file and add it to your application, follow the instructions in the [Adding a License File]({% slug using_license_code %}) article. - -## Next Steps - -* [Use data-bound widgets]({% slug jsonserialization_core %}) -* [Ways to download and install UI for ASP.NET Core (overview)]({% slug downloadinstall_aspnetcore %}) -* [Create your own custom bundles]({% slug custombundles_core %}) -* [Explore the helper script dependencies]({% slug script_filesfor_barcodes_widgets %}) -* [How to update UI for ASP.NET Core to a new version]({% slug upgrade_aspnetcore %}#upgrading-to-new-versions) -* [Switch from Trial to Commercial License]({% slug upgrade_aspnetcore %}#switching-to-a-developer-license) - -## See Also - -* [Installing UI for ASP.NET Core by Using the CDN Services]({% slug cdnservices_core %}) -* [Installing UI for ASP.NET Core with NuGet]({% slug nuget_install_aspnetmvc6_aspnetmvc %}) diff --git a/docs-aspnet/html-helpers/charts/bar-chart/date-axis.md b/docs-aspnet/html-helpers/charts/bar-chart/date-axis.md index 37135205ac4..478e42020c5 100644 --- a/docs-aspnet/html-helpers/charts/bar-chart/date-axis.md +++ b/docs-aspnet/html-helpers/charts/bar-chart/date-axis.md @@ -1,245 +1,245 @@ ---- -title: Date Axis -page_title: Date Axis -description: "Learn how to set the Date Axis of Telerik UI Bar Charts component for {{ site.framework }}." -slug: barcharts_date_axis ---- - -# Date Axis - -You can scale the date axis of your ASP.NET Core Bar Chart to get a better visualization of the seasonal data in your app. This can be done by modifying: - -* The base date unit of the x-axis through the CategoryAxis.BaseUnit method, which takes seconds, minutes, hours, days, week, months and years. -* The default aggregates of the series through the Series.Aggregate property, which takes max, min, sum, avg and count. - -This implementation provides the opportunity to represent the data for the Bar Chart in by different categories and aggregates. Choose the best visualization for the needs of your application, set the category and/or aggregations and observe the result. - -The following implementation demonstrates the code needed for setting the Date Axis for Bar Chart: - -```HtmlHelper - @model IEnumerable - -
-
Configurator
-
-

Base date unit

-
    -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
-
-
-

Aggregate function

-
    -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
-
-
- -
- @(Html.Kendo().Chart(Model) - .Name("chart") - .Series(series => - { - series - .Column(model => model.Value, categoryExpression: model => model.Date) - .Aggregate(ChartSeriesAggregate.Avg); - }) - .CategoryAxis(axis => axis - .Date() - .BaseUnit(ChartAxisBaseUnit.Weeks) - .MajorGridLines(lines => lines.Visible(false)) - ) - .ValueAxis(axis => axis - .Numeric() - .Line(line => line.Visible(false)) - ) - ) -
- - -``` -{% if site.core %} -```TagHelper - @addTagHelper *, Kendo.Mvc - @model IEnumerable - @{ - var data = Model.ToArray(); - } -
-
Configurator
-
-

Base date unit

-
    -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
-
-
-

Aggregate function

-
    -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
-
-
- -
- - - - - - - - - - - - - - - - -
- - - - -``` -{% endif %} - -* [Demo page of the Date Axis for Bar Chart](https://demos.telerik.com/{{ site.platform }}/bar-charts/date-axis) - -## See Also -* [Basic Usage of Bar Charts for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/bar-charts) -* [Stacked and Grouped Charts for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/bar-charts/grouped-stacked-bar) +--- +title: Date Axis +page_title: Date Axis +description: "Learn how to set the Date Axis of Telerik UI Bar Charts component for {{ site.framework }}." +slug: barcharts_date_axis +--- + +# Date Axis + +You can scale the date axis of your ASP.NET Core Bar Chart to get a better visualization of the seasonal data in your app. This can be done by modifying: + +* The base date unit of the x-axis through the CategoryAxis.BaseUnit method, which takes seconds, minutes, hours, days, week, months and years. +* The default aggregates of the series through the Series.Aggregate property, which takes max, min, sum, avg and count. + +This implementation provides the opportunity to represent the data for the Bar Chart in by different categories and aggregates. Choose the best visualization for the needs of your application, set the category and/or aggregations and observe the result. + +The following implementation demonstrates the code needed for setting the Date Axis for Bar Chart: + +```HtmlHelper + @model IEnumerable + +
+
Configurator
+
+

Base date unit

+
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+
+
+

Aggregate function

+
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+
+
+ +
+ @(Html.Kendo().Chart(Model) + .Name("chart") + .Series(series => + { + series + .Column(model => model.Value, categoryExpression: model => model.Date) + .Aggregate(ChartSeriesAggregate.Avg); + }) + .CategoryAxis(axis => axis + .Date() + .BaseUnit(ChartAxisBaseUnit.Weeks) + .MajorGridLines(lines => lines.Visible(false)) + ) + .ValueAxis(axis => axis + .Numeric() + .Line(line => line.Visible(false)) + ) + ) +
+ + +``` +{% if site.core %} +```TagHelper + @addTagHelper *, Kendo.Mvc + @model IEnumerable + @{ + var data = Model.ToArray(); + } +
+
Configurator
+
+

Base date unit

+
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+
+
+

Aggregate function

+
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+
+
+ +
+ + + + + + + + + + + + + + + + +
+ + + + +``` +{% endif %} + +* [Demo page of the Date Axis for Bar Chart](https://demos.telerik.com/{{ site.platform }}/bar-charts/date-axis) + +## See Also +* [Basic Usage of Bar Charts for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/bar-charts) +* [Stacked and Grouped Charts for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/bar-charts/grouped-stacked-bar) diff --git a/docs-aspnet/html-helpers/charts/bar-chart/gap-spacing.md b/docs-aspnet/html-helpers/charts/bar-chart/gap-spacing.md index afdfac353fb..b7644610b23 100644 --- a/docs-aspnet/html-helpers/charts/bar-chart/gap-spacing.md +++ b/docs-aspnet/html-helpers/charts/bar-chart/gap-spacing.md @@ -1,174 +1,174 @@ ---- -title: Gap and Spacing -page_title: Gap and Spacing -description: "Learn how to set Gap and Spacing of Telerik UI Bar Charts component for {{ site.framework }}." -slug: barcharts_gap_and_spacing ---- - -# Gap and Spacing - -The Bar Chart component allows you to control the distance between its categories as well as between series points within a category. This can be done through the series.gap and series.spacing client-side settings of the Chart. - -The following implementation demonstrates the code needed for setting Gap and Spacing for Bar Chart: - -```HtmlHelper -
-
Configurator
-
-

Gap

-
    -
  • - - -
    • -
-
-
-

Spacing

-
    -
  • - - -
    • -
-
-
- -
- @(Html.Kendo().Chart() - .Name("chart") - .Title("Internet Users") - .Legend(legend => legend.Position(ChartLegendPosition.Bottom)) - .Series(series => - { - series.Column(new double[] { 67.96, 61.93, 75, 71, 78 }).Name("United States"); - series.Column(new double[] { 15.7, 11, 20, 25, 36.6 }).Name("World"); - }) - .CategoryAxis(axis => axis - .Categories("2005", "2006", "2007", "2008", "2009") - ) - .ValueAxis(axis => axis - .Numeric().Labels(labels => labels.Format("{0}%")) - ) - .Tooltip(tooltip => tooltip - .Visible(true) - .Format("{0}%") - ) - ) -
- - -``` -{% if site.core %} -```TagHelper - @addTagHelper *,Kendo.Mvc - @{ - var dataUS = new double[] { 67.96, 61.93, 75, 71, 78 }; - var dataWorld = new double[] { 15.7, 11, 20, 25, 36.6 }; - var categories = new string[] { "2005", "2006", "2007", "2008", "2009" }; - } -
-
Configurator
-
-

Gap

-
    -
  • - - -
    • -
-
-
-

Spacing

-
    -
  • - - -
    • -
-
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -``` -{% endif %} - -Overview of Gap and Spacing implementation for Bar Chart: - -![{{ site.product_short }} Chart Gap and Spacing](images/gapAndSpacing.png) - -* [Demo page of the Gap and Spacing for Bar Chart](https://demos.telerik.com/{{ site.platform }}/bar-charts/gap-spacing) - -## See Also -* [Basic Usage of Bar Charts for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/bar-charts) -* [Stacked and Grouped Charts for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/bar-charts/grouped-stacked-bar) +--- +title: Gap and Spacing +page_title: Gap and Spacing +description: "Learn how to set Gap and Spacing of Telerik UI Bar Charts component for {{ site.framework }}." +slug: barcharts_gap_and_spacing +--- + +# Gap and Spacing + +The Bar Chart component allows you to control the distance between its categories as well as between series points within a category. This can be done through the series.gap and series.spacing client-side settings of the Chart. + +The following implementation demonstrates the code needed for setting Gap and Spacing for Bar Chart: + +```HtmlHelper +
+
Configurator
+
+

Gap

+
    +
  • + + +
    • +
+
+
+

Spacing

+
    +
  • + + +
    • +
+
+
+ +
+ @(Html.Kendo().Chart() + .Name("chart") + .Title("Internet Users") + .Legend(legend => legend.Position(ChartLegendPosition.Bottom)) + .Series(series => + { + series.Column(new double[] { 67.96, 61.93, 75, 71, 78 }).Name("United States"); + series.Column(new double[] { 15.7, 11, 20, 25, 36.6 }).Name("World"); + }) + .CategoryAxis(axis => axis + .Categories("2005", "2006", "2007", "2008", "2009") + ) + .ValueAxis(axis => axis + .Numeric().Labels(labels => labels.Format("{0}%")) + ) + .Tooltip(tooltip => tooltip + .Visible(true) + .Format("{0}%") + ) + ) +
+ + +``` +{% if site.core %} +```TagHelper + @addTagHelper *,Kendo.Mvc + @{ + var dataUS = new double[] { 67.96, 61.93, 75, 71, 78 }; + var dataWorld = new double[] { 15.7, 11, 20, 25, 36.6 }; + var categories = new string[] { "2005", "2006", "2007", "2008", "2009" }; + } +
+
Configurator
+
+

Gap

+
    +
  • + + +
    • +
+
+
+

Spacing

+
    +
  • + + +
    • +
+
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + +``` +{% endif %} + +Overview of Gap and Spacing implementation for Bar Chart: + +![{{ site.product_short }} Chart Gap and Spacing](images/gapAndSpacing.png) + +* [Demo page of the Gap and Spacing for Bar Chart](https://demos.telerik.com/{{ site.platform }}/bar-charts/gap-spacing) + +## See Also +* [Basic Usage of Bar Charts for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/bar-charts) +* [Stacked and Grouped Charts for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/bar-charts/grouped-stacked-bar) diff --git a/docs-aspnet/html-helpers/charts/no-data-template.md b/docs-aspnet/html-helpers/charts/no-data-template.md index 6d0155bc3cc..da34db36622 100644 --- a/docs-aspnet/html-helpers/charts/no-data-template.md +++ b/docs-aspnet/html-helpers/charts/no-data-template.md @@ -81,7 +81,7 @@ The Telerik UI Chart component for {{ site.framework }} allows to display a mess - {% else %} - - {% endif %} - ``` -1. Create the File on the server-side and push it to the client: - ``` - {% if site.core %} - public FileStreamResult ExportServer(string model, string data) - { - var columnsData = JsonConvert.DeserializeObject>(HttpUtility.UrlDecode(model)); - dynamic options = JsonConvert.DeserializeObject(HttpUtility.UrlDecode(data)); - SpreadDocumentFormat exportFormat = options.format.ToString() == "csv" ? exportFormat = SpreadDocumentFormat.Csv : exportFormat = SpreadDocumentFormat.Xlsx; - Action cellStyle = new Action(ChangeCellStyle); - Action rowStyle = new Action(ChangeRowStyle); - Action columnStyle = new Action(ChangeColumnStyle); - - string fileName = string.Format("{0}.{1}", options.title, options.format); - string mimeType = Helpers.GetMimeType(exportFormat); - - Stream exportStream = exportFormat == SpreadDocumentFormat.Xlsx ? - productService.Read().ToXlsxStream(columnsData, (string)options.title.ToString(), cellStyleAction: cellStyle, rowStyleAction: rowStyle, columnStyleAction: columnStyle) : - productService.Read().ToCsvStream(columnsData); - - var fileStreamResult = new FileStreamResult(exportStream, mimeType); - fileStreamResult.FileDownloadName = fileName; - fileStreamResult.FileStream.Seek(0, SeekOrigin.Begin); - - return fileStreamResult; - } - - private void ChangeCellStyle(ExportCellStyle e) - { - bool isHeader = e.Row == 0; - SpreadCellFormat format = new SpreadCellFormat - { - ForeColor = isHeader ? SpreadThemableColor.FromRgb(50, 54, 58) : SpreadThemableColor.FromRgb(214, 214, 217), - IsItalic = true, - VerticalAlignment = SpreadVerticalAlignment.Center, - WrapText = true, - Fill = SpreadPatternFill.CreateSolidFill(isHeader ? new SpreadColor(93, 227, 0) : new SpreadColor(50, 54, 58)) - }; - e.Cell.SetFormat(format); - } - - private void ChangeRowStyle(ExportRowStyle e) - { - e.Row.SetHeightInPixels(e.Index == 0 ? 80 : 30); - } - - private void ChangeColumnStyle(ExportColumnStyle e) - { - double width = e.Name == "Product name" || e.Name == "Category Name" ? 250 : 100; - e.Column.SetWidthInPixels(width); - } - {% else %} - public FileStreamResult ExportServer(string model, string data) - { - var columnsData = JsonConvert.DeserializeObject>(HttpUtility.UrlDecode(model)); - dynamic options = JsonConvert.DeserializeObject(HttpUtility.UrlDecode(data)); - SpreadDocumentFormat exportFormat = options.format.ToString() == "csv" ? exportFormat = SpreadDocumentFormat.Csv : exportFormat = SpreadDocumentFormat.Xlsx; - Action cellStyle = new Action(ChangeCellStyle); - Action rowStyle = new Action(ChangeRowStyle); - Action columnStyle = new Action(ChangeColumnStyle); - - string fileName = string.Format("{0}.{1}", options.title, options.format); - string mimeType = Helpers.GetMimeType(exportFormat); - - Stream exportStream = exportFormat == SpreadDocumentFormat.Xlsx ? - productService.Read().ToXlsxStream(columnsData, (string)options.title.ToString(), cellStyleAction: cellStyle, rowStyleAction: rowStyle, columnStyleAction: columnStyle) : - productService.Read().ToCsvStream(columnsData); - - var fileStreamResult = new FileStreamResult(exportStream, mimeType); - fileStreamResult.FileDownloadName = fileName; - fileStreamResult.FileStream.Seek(0, SeekOrigin.Begin); - - return fileStreamResult; - } - - private void ChangeCellStyle(ExportCellStyle e) - { - bool isHeader = e.Row == 0; - SpreadCellFormat format = new SpreadCellFormat - { - ForeColor = isHeader ? SpreadThemableColor.FromRgb(50, 54, 58) : SpreadThemableColor.FromRgb(214, 214, 217), - IsItalic = true, - VerticalAlignment = SpreadVerticalAlignment.Center, - WrapText = true, - Fill = SpreadPatternFill.CreateSolidFill(isHeader ? new SpreadColor(93, 227, 0) : new SpreadColor(50, 54, 58)) - }; - e.Cell.SetFormat(format); - } - - private void ChangeRowStyle(ExportRowStyle e) - { - e.Row.SetHeightInPixels(e.Index == 0 ? 80 : 30); - } - - private void ChangeColumnStyle(ExportColumnStyle e) - { - double width = e.Name == "Product name" || e.Name == "Category Name" ? 250 : 100; - e.Column.SetWidthInPixels(width); - } - {% endif %} - ``` -1. Add the following references in the Controller file: - - {% if site.core %} - ``` - using Kendo.Mvc.Export; - using Telerik.Documents.SpreadsheetStreaming; - using Microsoft.AspNetCore.Mvc; - ``` - {% else %} - ``` - using Kendo.Mvc.Export; - using Telerik.Documents.SpreadsheetStreaming; - ``` - {% endif%} - -{% if site.core %} -## Exporting Selected Data Only - -By default, the Telerik UI Grid for {{ site.framework }} exports all rows. However, in order to export only the selected rows, make the grid selectable. - -```HtmlHelper -.Selectable() -``` -```TagHelper - -``` - - -Or, add a checkbox column for selection: - -```HtmlHelper -.Columns(columns => { - columns.Select().Width(80); -}) -``` -```TagHelper - -``` - {% endif%} - -## See Also - -* [Excel Export by the Grid HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/grid/server-export) -* [Server-Side API](/api/grid) - +--- +title: Server Export +page_title: Server Export +description: "Export the Telerik UI Grid for {{ site.framework }} on the Server." +slug: serverexport_gridhelper_aspnetcore +position: 5 +--- + +# Server Export + +The Telerik UI Grid for {{ site.framework }} exposes the functionality to export its data to XLSX (Excel) and CSV on the Server. This approach is recommended when the data is large and resource demanding. It escapes the need to serialize the whole dataset and to create the file on the Client. When Server-side export it used, the file is created on the Server and is pushed to the Client as a `File` object. + +For a runnable example, refer to the [demo on Server export by the Grid](https://demos.telerik.com/{{ site.platform }}/grid/server-export). + +## Getting Started + +To enable the Server export option of the grid: + +1. Include a reference to the {% if site.core %} Telerik.Core.Export.nupkg from the private Telerik NuGet feed{% else %}`Kendo.Mvc.Export.dll` and `Telerik.Documents.SpreadsheetStreaming.dll` dlls available in the product's installation folder - `~installationFolder\export\binaries\net`{% endif %}. +1. Include a form HTML element that would post to an ActionMethod on the server-side. + ``` + {% if site.core %} +
+ + +
+ {% else %} +
+ + + + +
+ {% endif %} + ``` +1. Attach the click event handler to the buttons in the form and include the data and the settings of the columns: + ``` + {% if site.core %} + + {% else %} + + {% endif %} + ``` +1. Create the File on the server-side and push it to the client: + ``` + {% if site.core %} + public FileStreamResult ExportServer(string model, string data) + { + var columnsData = JsonConvert.DeserializeObject>(HttpUtility.UrlDecode(model)); + dynamic options = JsonConvert.DeserializeObject(HttpUtility.UrlDecode(data)); + SpreadDocumentFormat exportFormat = options.format.ToString() == "csv" ? exportFormat = SpreadDocumentFormat.Csv : exportFormat = SpreadDocumentFormat.Xlsx; + Action cellStyle = new Action(ChangeCellStyle); + Action rowStyle = new Action(ChangeRowStyle); + Action columnStyle = new Action(ChangeColumnStyle); + + string fileName = string.Format("{0}.{1}", options.title, options.format); + string mimeType = Helpers.GetMimeType(exportFormat); + + Stream exportStream = exportFormat == SpreadDocumentFormat.Xlsx ? + productService.Read().ToXlsxStream(columnsData, (string)options.title.ToString(), cellStyleAction: cellStyle, rowStyleAction: rowStyle, columnStyleAction: columnStyle) : + productService.Read().ToCsvStream(columnsData); + + var fileStreamResult = new FileStreamResult(exportStream, mimeType); + fileStreamResult.FileDownloadName = fileName; + fileStreamResult.FileStream.Seek(0, SeekOrigin.Begin); + + return fileStreamResult; + } + + private void ChangeCellStyle(ExportCellStyle e) + { + bool isHeader = e.Row == 0; + SpreadCellFormat format = new SpreadCellFormat + { + ForeColor = isHeader ? SpreadThemableColor.FromRgb(50, 54, 58) : SpreadThemableColor.FromRgb(214, 214, 217), + IsItalic = true, + VerticalAlignment = SpreadVerticalAlignment.Center, + WrapText = true, + Fill = SpreadPatternFill.CreateSolidFill(isHeader ? new SpreadColor(93, 227, 0) : new SpreadColor(50, 54, 58)) + }; + e.Cell.SetFormat(format); + } + + private void ChangeRowStyle(ExportRowStyle e) + { + e.Row.SetHeightInPixels(e.Index == 0 ? 80 : 30); + } + + private void ChangeColumnStyle(ExportColumnStyle e) + { + double width = e.Name == "Product name" || e.Name == "Category Name" ? 250 : 100; + e.Column.SetWidthInPixels(width); + } + {% else %} + public FileStreamResult ExportServer(string model, string data) + { + var columnsData = JsonConvert.DeserializeObject>(HttpUtility.UrlDecode(model)); + dynamic options = JsonConvert.DeserializeObject(HttpUtility.UrlDecode(data)); + SpreadDocumentFormat exportFormat = options.format.ToString() == "csv" ? exportFormat = SpreadDocumentFormat.Csv : exportFormat = SpreadDocumentFormat.Xlsx; + Action cellStyle = new Action(ChangeCellStyle); + Action rowStyle = new Action(ChangeRowStyle); + Action columnStyle = new Action(ChangeColumnStyle); + + string fileName = string.Format("{0}.{1}", options.title, options.format); + string mimeType = Helpers.GetMimeType(exportFormat); + + Stream exportStream = exportFormat == SpreadDocumentFormat.Xlsx ? + productService.Read().ToXlsxStream(columnsData, (string)options.title.ToString(), cellStyleAction: cellStyle, rowStyleAction: rowStyle, columnStyleAction: columnStyle) : + productService.Read().ToCsvStream(columnsData); + + var fileStreamResult = new FileStreamResult(exportStream, mimeType); + fileStreamResult.FileDownloadName = fileName; + fileStreamResult.FileStream.Seek(0, SeekOrigin.Begin); + + return fileStreamResult; + } + + private void ChangeCellStyle(ExportCellStyle e) + { + bool isHeader = e.Row == 0; + SpreadCellFormat format = new SpreadCellFormat + { + ForeColor = isHeader ? SpreadThemableColor.FromRgb(50, 54, 58) : SpreadThemableColor.FromRgb(214, 214, 217), + IsItalic = true, + VerticalAlignment = SpreadVerticalAlignment.Center, + WrapText = true, + Fill = SpreadPatternFill.CreateSolidFill(isHeader ? new SpreadColor(93, 227, 0) : new SpreadColor(50, 54, 58)) + }; + e.Cell.SetFormat(format); + } + + private void ChangeRowStyle(ExportRowStyle e) + { + e.Row.SetHeightInPixels(e.Index == 0 ? 80 : 30); + } + + private void ChangeColumnStyle(ExportColumnStyle e) + { + double width = e.Name == "Product name" || e.Name == "Category Name" ? 250 : 100; + e.Column.SetWidthInPixels(width); + } + {% endif %} + ``` +1. Add the following references in the Controller file: + + {% if site.core %} + ``` + using Kendo.Mvc.Export; + using Telerik.Documents.SpreadsheetStreaming; + using Microsoft.AspNetCore.Mvc; + ``` + {% else %} + ``` + using Kendo.Mvc.Export; + using Telerik.Documents.SpreadsheetStreaming; + ``` + {% endif%} + +{% if site.core %} +## Exporting Selected Data Only + +By default, the Telerik UI Grid for {{ site.framework }} exports all rows. However, in order to export only the selected rows, make the grid selectable. + +```HtmlHelper +.Selectable() +``` +```TagHelper + +``` + + +Or, add a checkbox column for selection: + +```HtmlHelper +.Columns(columns => { + columns.Select().Width(80); +}) +``` +```TagHelper + +``` + {% endif%} + +## See Also + +* [Excel Export by the Grid HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/grid/server-export) +* [Server-Side API](/api/grid) + diff --git a/docs-aspnet/html-helpers/editors/captcha/validation.md b/docs-aspnet/html-helpers/editors/captcha/validation.md index e14d74569d9..89878251be9 100644 --- a/docs-aspnet/html-helpers/editors/captcha/validation.md +++ b/docs-aspnet/html-helpers/editors/captcha/validation.md @@ -8,7 +8,7 @@ position: 3 # Captcha Validation Setup -This article explains how to use your application's backend to verify the user's response to the Telerik UI Captcha. +This article explains how to use your application's backend to verify the user's response to the Telerik UI Captcha. Always generate the CAPTCHA and apply the validation on the server-side of your application. This approach guarantees that no programs or bots can access the values of the CAPTCHA on the client-side via JavaScript and then bypass the validation. @@ -176,7 +176,7 @@ To generate CAPTCHAs and validate the user's input, the Telerik UI Captcha depen ``` {% if site.core %} ```TagHelper - - $(document).on("kendoReady", function () { + $(document).on("ready", function () { $("#form").kendoValidator(); }); function audioHandler(args) { @@ -346,7 +346,7 @@ The Telerik UI Captcha for {{ site.framework }} prevents automated programs from {% else %} ``` diff --git a/docs-aspnet/html-helpers/navigation/drawer/razor-page.md b/docs-aspnet/html-helpers/navigation/drawer/razor-page.md index f5d698879e3..49ed75fbf15 100644 --- a/docs-aspnet/html-helpers/navigation/drawer/razor-page.md +++ b/docs-aspnet/html-helpers/navigation/drawer/razor-page.md @@ -8,7 +8,7 @@ position: 5 # Drawer Razor Pages -Razor Pages is an alternative to the MVC pattern that makes page-focused coding easier and more productive. This approach consists of a `cshtml` file and a `cshtml.cs` file (by design, the two files have the same name). +Razor Pages is an alternative to the MVC pattern that makes page-focused coding easier and more productive. This approach consists of a `cshtml` file and a `cshtml.cs` file (by design, the two files have the same name). You can seamlessly integrate the Telerik UI Drawer for {{ site.framework }} in Razor Pages applications. @@ -237,7 +237,7 @@ For the complete project, refer to the [Drawer in Razor Pages example](https://g @section scripts {