From a4629e148f683300652f06b3714155f598f1d57f Mon Sep 17 00:00:00 2001 From: SenthilarasuBalu <119287329+SenthilarasuBalu@users.noreply.github.com> Date: Mon, 8 Apr 2024 18:32:43 +0530 Subject: [PATCH 001/145] 866136: outline customization added --- .../styles/custom-outline/fabstyles.cs | 4 ++++ .../styles/custom-outline/razor | 11 +++++++++ .../styles/custom-outline/tagHelper | 11 +++++++++ .../EJ2_ASP.MVC/styles.md | 21 +++++++++++++++++- .../EJ2_ASP.NETCORE/styles.md | 16 +++++++++++++ .../images/FabOutline.png | Bin 0 -> 9015 bytes 6 files changed, 62 insertions(+), 1 deletion(-) create mode 100644 ej2-asp-core-mvc/code-snippet/floating-action-button/styles/custom-outline/fabstyles.cs create mode 100644 ej2-asp-core-mvc/code-snippet/floating-action-button/styles/custom-outline/razor create mode 100644 ej2-asp-core-mvc/code-snippet/floating-action-button/styles/custom-outline/tagHelper create mode 100644 ej2-asp-core-mvc/floating-action-button/images/FabOutline.png diff --git a/ej2-asp-core-mvc/code-snippet/floating-action-button/styles/custom-outline/fabstyles.cs b/ej2-asp-core-mvc/code-snippet/floating-action-button/styles/custom-outline/fabstyles.cs new file mode 100644 index 0000000000..598dfccffe --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/floating-action-button/styles/custom-outline/fabstyles.cs @@ -0,0 +1,4 @@ +public ActionResult FabStyles() +{ + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/floating-action-button/styles/custom-outline/razor b/ej2-asp-core-mvc/code-snippet/floating-action-button/styles/custom-outline/razor new file mode 100644 index 0000000000..8a0706622d --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/floating-action-button/styles/custom-outline/razor @@ -0,0 +1,11 @@ +@using Syncfusion.EJ2.Buttons + +
+ @Html.EJS().Fab("fab").Target("#target").IconCss("e-icons e-people").Content("Contact").CssClass("custom-css").Render() +
+ \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/floating-action-button/styles/custom-outline/tagHelper b/ej2-asp-core-mvc/code-snippet/floating-action-button/styles/custom-outline/tagHelper new file mode 100644 index 0000000000..dac66fd79b --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/floating-action-button/styles/custom-outline/tagHelper @@ -0,0 +1,11 @@ +@using Syncfusion.EJ2.Buttons + +
+ +
+ \ No newline at end of file diff --git a/ej2-asp-core-mvc/floating-action-button/EJ2_ASP.MVC/styles.md b/ej2-asp-core-mvc/floating-action-button/EJ2_ASP.MVC/styles.md index 96fd3c00a5..7613d60ed0 100644 --- a/ej2-asp-core-mvc/floating-action-button/EJ2_ASP.MVC/styles.md +++ b/ej2-asp-core-mvc/floating-action-button/EJ2_ASP.MVC/styles.md @@ -70,4 +70,23 @@ By using [CssClass](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2. {% endif %} -![Asp.Net MVC Floating Action Button control with Hover](images/onhover.png) \ No newline at end of file +![Asp.Net MVC Floating Action Button control with Hover](images/onhover.png) + +## Customized outlines + +By using the [CssClass](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Buttons.Fab.html#Syncfusion_EJ2_Buttons_Fab_CssClass) property, you can customize the outline of the Floating Action Button, providing increased flexibility to adjust its appearance according to your preferences. + +{% if page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/floating-action-button/styles/custom-outline/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Fabstyles.cs" %} +{% include code-snippet/floating-action-button/styles/custom-outline/fabstyles.cs %} +{% endhighlight %} +{% endtabs %} + +{% endif %} + +![Asp.Net MVC Floating Action Button control with Outline](images/FabOutline.png) \ No newline at end of file diff --git a/ej2-asp-core-mvc/floating-action-button/EJ2_ASP.NETCORE/styles.md b/ej2-asp-core-mvc/floating-action-button/EJ2_ASP.NETCORE/styles.md index 8e33b498b1..60e224d95f 100644 --- a/ej2-asp-core-mvc/floating-action-button/EJ2_ASP.NETCORE/styles.md +++ b/ej2-asp-core-mvc/floating-action-button/EJ2_ASP.NETCORE/styles.md @@ -66,3 +66,19 @@ By using [CssClass](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2 {% endif %} ![Asp.Net Core Floating Action Button control with Hover](images/onhover.png) + +## Customized outlines + +By using the [CssClass](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Buttons.Fab.html#Syncfusion_EJ2_Buttons_Fab_CssClass) property, you can customize the outline of the Floating Action Button, providing increased flexibility to adjust its appearance according to your preferences. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/floating-action-button/styles/custom-outline/tagHelper %} +{% endhighlight %} +{% endtabs %} + +{% endif %} + +![Asp.Net Core Floating Action Button control with Outline](images/FabOutline.png) \ No newline at end of file diff --git a/ej2-asp-core-mvc/floating-action-button/images/FabOutline.png b/ej2-asp-core-mvc/floating-action-button/images/FabOutline.png new file mode 100644 index 0000000000000000000000000000000000000000..b2bd15457b52698f4f688ab123e9237f581d4126 GIT binary patch literal 9015 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 Date: Fri, 3 May 2024 10:30:46 +0530 Subject: [PATCH 002/145] 883856: commit --- .../how-to/restricting-zoom-in-mobile-mode.md | 57 ++++++++++++++++ .../how-to/restricting-zoom-in-mobile-mode.md | 65 +++++++++++++++++++ ej2-asp-core-toc.html | 1 + ej2-asp-mvc-toc.html | 1 + 4 files changed, 124 insertions(+) create mode 100644 ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/how-to/restricting-zoom-in-mobile-mode.md create mode 100644 ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/how-to/restricting-zoom-in-mobile-mode.md diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/how-to/restricting-zoom-in-mobile-mode.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/how-to/restricting-zoom-in-mobile-mode.md new file mode 100644 index 0000000000..1d8bdfc1f5 --- /dev/null +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/how-to/restricting-zoom-in-mobile-mode.md @@ -0,0 +1,57 @@ +--- +layout: post +title: Restrict Zoom Percentage in EJ2 ASP.NET MVC PDF Viewer | Syncfusion +description: Learn here all how to restrict zoom percentage in ASP.NET MVC PDF Viewer component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: PDF Viewer +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# How to Restrict Zoom Percentage on Mobile Devices + +In Syncfusion PDF Viewer, you can easily restrict the zoom percentage on mobile devices using the **maxZoom** and **minZoom** property. This feature allows you to set specific limits for zooming, ensuring smoother scrolling performance and efficient document loading, on mobile devices. + +{% tabs %} +{% highlight html tabtitle="Standalone" %} + +
+ @Html.EJS().PdfViewer("pdfviewer").DocumentLoad("documentLoad").DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() +
+ + + +{% endhighlight %} +{% highlight html tabtitle="Server-Backed" %} + +
+ @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentLoad("documentLoad").DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() +
+ + +{% endhighlight %} +{% endtabs %} + +By implementing this, you ensure that the maximum zoom percentage on mobile devices is limited to 200% and the minimum zoom percentage is set to 10%. This prevents performance issues that may arise from excessive zooming on mobile platforms. \ No newline at end of file diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/how-to/restricting-zoom-in-mobile-mode.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/how-to/restricting-zoom-in-mobile-mode.md new file mode 100644 index 0000000000..5f31bc44de --- /dev/null +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/how-to/restricting-zoom-in-mobile-mode.md @@ -0,0 +1,65 @@ +--- +layout: post +title: Restrict Zoom Percentage in ##Platform_Name## PDF Viewer Component| Syncfusion +description: Learn here all about how to restrict zoom percentage in Syncfusion ##Platform_Name## PDF Viewer component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: PDF Viewer +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# How to Restrict Zoom Percentage on Mobile Devices + +In Syncfusion PDF Viewer, you can easily restrict the zoom percentage on mobile devices using the **maxZoom** and **minZoom** property. This feature allows you to set specific limits for zooming, ensuring smoother scrolling performance and efficient document loading, on mobile devices. + +{% tabs %} +{% highlight html tabtitle="Standalone" %} + +
+ + +
+ + + +{% endhighlight %} +{% highlight html tabtitle="Server-Backed" %} + +
+ + +
+ + + +{% endhighlight %} +{% endtabs %} + +By implementing this, you ensure that the maximum zoom percentage on mobile devices is limited to 200% and the minimum zoom percentage is set to 10%. This prevents performance issues that may arise from excessive zooming on mobile platforms. \ No newline at end of file diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html index 2595f7fa70..719a9df5fd 100644 --- a/ej2-asp-core-toc.html +++ b/ej2-asp-core-toc.html @@ -1856,6 +1856,7 @@
  • Load N number of pages on initial loading
  • Retry Timeout
  • Customize toolbar
    • +
  • Restrict Zoom Percentage on Mobile Devices
  • Troubleshooting diff --git a/ej2-asp-mvc-toc.html b/ej2-asp-mvc-toc.html index b48aa68b2c..fe908bb131 100644 --- a/ej2-asp-mvc-toc.html +++ b/ej2-asp-mvc-toc.html @@ -1816,6 +1816,7 @@
  • Load N number of pages on initial loading
  • Retry Timeout
  • Customize toolbar
    • +
  • Restrict Zoom Percentage on Mobile Devices
  • Troubleshooting From c49df9dba34c03c612ebbc793db4532e43caf4e8 Mon Sep 17 00:00:00 2001 From: ArunKumar-SF3979 Date: Mon, 3 Jun 2024 19:05:11 +0530 Subject: [PATCH 003/145] 889191: Drafted a content for csp. --- .../content-security-policy.md | 78 +++++++++++++++++++ .../EJ2_ASP.NETCORE/security-aspects.md | 58 -------------- 2 files changed, 78 insertions(+), 58 deletions(-) create mode 100644 ej2-asp-core-mvc/common/EJ2_ASP.NETCORE/content-security-policy.md diff --git a/ej2-asp-core-mvc/common/EJ2_ASP.NETCORE/content-security-policy.md b/ej2-asp-core-mvc/common/EJ2_ASP.NETCORE/content-security-policy.md new file mode 100644 index 0000000000..3ea4714093 --- /dev/null +++ b/ej2-asp-core-mvc/common/EJ2_ASP.NETCORE/content-security-policy.md @@ -0,0 +1,78 @@ +--- +layout: post +title: Content Security Policy in ##Platform_Name## Common Control | Syncfusion +description: Learn here all about Content Security Policy in Syncfusion ##Platform_Name## Common control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Common +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Content Security Policy + +Content Security Policy (CSP) is a security feature implemented by web browsers to protect against attacks such as cross-site scripting (XSS) and data injection. It limits the sources from which content can be loaded on a web page. To enable strict Content Security Policy (CSP), certain browser features are disabled by default. To use Syncfusion controls with strict CSP mode, it is essential to include the following directives: + +Nonce attribute is used in CSP to validate requests and prevent attackers from injecting JavaScript code into a web application. + + +## Steps to Create and Include the Nonce Attribute in an ASP.NET Core Application + +* Generate the `nonce` attribute value by adding the below code in **Program.cs** file. + +* Syncfusion material and tailwind built-in themes contain a reference to the Roboto’s external font, which is also blocked. To allow them, add the external font reference to the style-src and font-src directives in the above meta tag. + +{% tabs %} +{% highlight c# tabtitle="Program.cs" %} + +using System.Security.Cryptography; + +... +app.Use(async (context, next) => +{ + RNGCryptoServiceProvider rng = new RNGCryptoServiceProvider(); + byte[] nonceBytes = new byte[32]; + rng.GetBytes(nonceBytes); + string nonceValue = Convert.ToBase64String(nonceBytes); + context.Items.Add("ScriptNonce", nonceValue); + context.Response.Headers.Add("Content-Security-Policy", string.Format( + "script-src 'self' 'unsafe-inline' 'nonce-{0}' https://cdn.syncfusion.com;" + + "style-src-elem 'self' 'unsafe-inline' https://cdn.syncfusion.com https://fonts.googleapis.com;" + + "font-src 'self' data: https://fonts.gstatic.com;" + + "object-src 'none';", nonceValue)); + await next(); +}); + + +{% endhighlight %} +{% endtabs %} + +* Open **_Layout.cshtml** file and add `nonce` attribute in the client side resources like below, + +{% tabs %} +{% highlight c# tabtitle="~/_Layout.cshtml" %} + + ... + + + +{% endhighlight %} +{% endtabs %} + +* Set `add-nonce` for `ejs-scripts` while registering the script manager at the end of `` of **_Layout.cshtml** file as follows, + +{% tabs %} +{% highlight c# tabtitle="~/_Layout.cshtml" %} + + ... + + + +{% endhighlight %} +{% endtabs %} + +N> The `unsafe-eval` directive needs to be added in script-src for samples that use the template properties. + +* Run the application then see the DOM, nonce attribute is added in script tag and it's value hidden for security purpose. + + + diff --git a/ej2-asp-core-mvc/common/EJ2_ASP.NETCORE/security-aspects.md b/ej2-asp-core-mvc/common/EJ2_ASP.NETCORE/security-aspects.md index c803ee765a..2748b32205 100644 --- a/ej2-asp-core-mvc/common/EJ2_ASP.NETCORE/security-aspects.md +++ b/ej2-asp-core-mvc/common/EJ2_ASP.NETCORE/security-aspects.md @@ -41,64 +41,6 @@ The following list demonstrates the Syncfusion ASP.NET Core controls that are su * [Tooltip](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Popups.Tooltip.html#Syncfusion_EJ2_Popups_Tooltip_EnableHtmlSanitizer) * [TreeView](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Navigations.TreeView.html#Syncfusion_EJ2_Navigations_TreeView_EnableHtmlSanitizer) -## Adding Nonce to Script tag in ASP.NET Core - -`Nonce` attribute is used in content security policy to find out whether given request is valid or not and it prevents the attackers injecting the javascript code in a web application. - -The following steps demonstrates how to create and include the nonce attribute in ASP.NET Core application. - -* Generate the `nonce` attribute value by adding the below code in **Program.cs** file. - -{% tabs %} -{% highlight c# tabtitle="Program.cs" %} - -using System.Security.Cryptography; - -... -app.Use(async (context, next) => -{ - RNGCryptoServiceProvider rng = new RNGCryptoServiceProvider(); - byte[] nonceBytes = new byte[32]; - rng.GetBytes(nonceBytes); - string nonceValue = Convert.ToBase64String(nonceBytes); - context.Items.Add("ScriptNonce", nonceValue); - context.Response.Headers.Add("Content-Security-Policy", string.Format( - "script-src 'self' 'nonce-{0}' cdn.syncfusion.com;" + - "style-src-elem 'self' cdn.syncfusion.com fonts.googleapis.com;" + - "font-src 'self' data: fonts.gstatic.com;" + - "object-src 'none';", nonceValue)); - await next(); -}); - -{% endhighlight %} -{% endtabs %} - -* Open **_Layout.cshtml** file and add `nonce` attribute in the client side resources like below, - -{% tabs %} -{% highlight c# tabtitle="~/_Layout.cshtml" %} - - ... - - - -{% endhighlight %} -{% endtabs %} - -* Set `add-nonce` for `ejs-scripts` while registering the script manager at the end of `` of **_Layout.cshtml** file as follows, - -{% tabs %} -{% highlight c# tabtitle="~/_Layout.cshtml" %} - - ... - - - -{% endhighlight %} -{% endtabs %} - -* Run the application then see the DOM, nonce attribute is added in script tag and it's value hidden for security purpose. - ## See also * [Develop an ASP.NET Core web application securely](https://www.syncfusion.com/blogs/post/10-practices-secure-asp-net-core-mvc-app.aspx) From dbb03691a24312de945cba6b7b1e32c63ded01c1 Mon Sep 17 00:00:00 2001 From: ArunKumar-SF3979 Date: Mon, 3 Jun 2024 19:09:33 +0530 Subject: [PATCH 004/145] 889191: Drafted a content for csp. --- ej2-asp-core-toc.html | 1 + 1 file changed, 1 insertion(+) diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html index 85ee576761..445c4acb4f 100644 --- a/ej2-asp-core-toc.html +++ b/ej2-asp-core-toc.html @@ -107,6 +107,7 @@
  • Drag and Drop
  • EJ1 and EJ2 Compatibility
    • +
  • Content Security Policy
  • Cross-Site Scripting(XSS)
  • Areas in ASP.NET Core
  • Deployment
    • From da55b8f65a68b828345b8df04f149682eacdaa4e Mon Sep 17 00:00:00 2001 From: ArunKumar-SF3979 Date: Thu, 6 Jun 2024 11:11:37 +0530 Subject: [PATCH 005/145] 889191: Drafted a content for csp. --- .../common/EJ2_ASP.NETCORE/content-security-policy.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/ej2-asp-core-mvc/common/EJ2_ASP.NETCORE/content-security-policy.md b/ej2-asp-core-mvc/common/EJ2_ASP.NETCORE/content-security-policy.md index 3ea4714093..3255a023fa 100644 --- a/ej2-asp-core-mvc/common/EJ2_ASP.NETCORE/content-security-policy.md +++ b/ej2-asp-core-mvc/common/EJ2_ASP.NETCORE/content-security-policy.md @@ -12,14 +12,14 @@ documentation: ug Content Security Policy (CSP) is a security feature implemented by web browsers to protect against attacks such as cross-site scripting (XSS) and data injection. It limits the sources from which content can be loaded on a web page. To enable strict Content Security Policy (CSP), certain browser features are disabled by default. To use Syncfusion controls with strict CSP mode, it is essential to include the following directives: -Nonce attribute is used in CSP to validate requests and prevent attackers from injecting JavaScript code into a web application. +`nonce` attribute is used in CSP to validate requests and prevent attackers from injecting JavaScript code into a web application. ## Steps to Create and Include the Nonce Attribute in an ASP.NET Core Application * Generate the `nonce` attribute value by adding the below code in **Program.cs** file. -* Syncfusion material and tailwind built-in themes contain a reference to the Roboto’s external font, which is also blocked. To allow them, add the external font reference to the style-src and font-src directives in the above meta tag. +* Syncfusion material and tailwind built-in themes contain a reference to the Roboto’s external font, which is also blocked. To allow them, add the external font reference to the `style-src` and `font-src` directives in the above meta tag. {% tabs %} {% highlight c# tabtitle="Program.cs" %} @@ -70,9 +70,9 @@ app.Use(async (context, next) => {% endhighlight %} {% endtabs %} -N> The `unsafe-eval` directive needs to be added in script-src for samples that use the template properties. +N> The `unsafe-eval` directive needs to be added in `script-src` for controls which uses the templates. -* Run the application then see the DOM, nonce attribute is added in script tag and it's value hidden for security purpose. +* Run the application then see the DOM, `nonce` attribute is added in script tag and it's value hidden for security purpose. From b6f45e772aff07bb466de39a170fe4ebbe4b4467 Mon Sep 17 00:00:00 2001 From: DinakarSF4212 <147583019+DinakarSF4212@users.noreply.github.com> Date: Thu, 6 Jun 2024 15:23:42 +0530 Subject: [PATCH 006/145] 889454: Moved print,filter,sort and import export to relevant sections. --- ej2-asp-core-mvc/spreadsheet/filter.md | 29 ++++++++ .../spreadsheet/how-to/get-filtered-rows.md | 38 ----------- ...t-an-excel-document-using-file-uploader.md | 38 ----------- ...mmatically-and-make-it-the-active-sheet.md | 38 ----------- ej2-asp-core-mvc/spreadsheet/how-to/print.md | 37 ----------- ...-open-spreadsheet-data-as-base64-string.md | 40 ----------- .../how-to/sort-a-range-by-custom-list.md | 47 ------------- ...ng => external-reference-dialog-alert.png} | Bin ej2-asp-core-mvc/spreadsheet/open-save.md | 62 +++++++++++++++++- ej2-asp-core-mvc/spreadsheet/sort.md | 29 ++++++++ ej2-asp-core-mvc/spreadsheet/worksheet.md | 56 ++++++++++++++++ ej2-asp-core-toc.html | 6 -- ej2-asp-mvc-toc.html | 6 -- 13 files changed, 175 insertions(+), 251 deletions(-) delete mode 100644 ej2-asp-core-mvc/spreadsheet/how-to/get-filtered-rows.md delete mode 100644 ej2-asp-core-mvc/spreadsheet/how-to/import-an-excel-document-using-file-uploader.md delete mode 100644 ej2-asp-core-mvc/spreadsheet/how-to/insert-sheet-programmatically-and-make-it-the-active-sheet.md delete mode 100644 ej2-asp-core-mvc/spreadsheet/how-to/print.md delete mode 100644 ej2-asp-core-mvc/spreadsheet/how-to/save-and-open-spreadsheet-data-as-base64-string.md delete mode 100644 ej2-asp-core-mvc/spreadsheet/how-to/sort-a-range-by-custom-list.md rename ej2-asp-core-mvc/spreadsheet/images/{external-reference-dialog-alert .png => external-reference-dialog-alert.png} (100%) diff --git a/ej2-asp-core-mvc/spreadsheet/filter.md b/ej2-asp-core-mvc/spreadsheet/filter.md index 4891e78e5f..d761de44b1 100644 --- a/ej2-asp-core-mvc/spreadsheet/filter.md +++ b/ej2-asp-core-mvc/spreadsheet/filter.md @@ -66,6 +66,35 @@ The following code example shows `filter` functionality in the Spreadsheet contr To apply a filter for a cell value, right-click the cell and choose filter -> `Filter By Selected Cell's Value` option from the menu. It applies the filter based on the value of the selected cell in the current sheet. +## Get the filtered rows in ##Platform_Name## Spreadsheet control + +Filtering allows you to view specific rows in a spreadsheet while hiding the others. The [allowFiltering](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.spreadsheet.spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_AllowFiltering) property allows you to enable or disable filtering functionality through the UI. You can also use the [allowFiltering](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.spreadsheet.spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_AllowFiltering) property and `applyFilter` method combination to filter data via code behind. The filtered rows can be identified by iterating through the row collection on the sheet and using the `isFiltered` property available in each row object. + +The following code example shows how to get the filtered rows. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/filter-cs1/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="InsertSheetController.cs" %} +{% include code-snippet/spreadsheet/filter-cs1/filterController.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/filter-cs1/razor %} +{% endhighlight %} +{% highlight c# tabtitle="InsertSheetController.cs" %} +{% include code-snippet/spreadsheet/filter-cs1/filterController.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + ## Clear filter After applying filter to a certain column, you may want to clear it to make all filtered rows visible again. It can be done in the following ways, diff --git a/ej2-asp-core-mvc/spreadsheet/how-to/get-filtered-rows.md b/ej2-asp-core-mvc/spreadsheet/how-to/get-filtered-rows.md deleted file mode 100644 index dfe30d04bc..0000000000 --- a/ej2-asp-core-mvc/spreadsheet/how-to/get-filtered-rows.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -layout: post -title: Get the filtered rows in ##Platform_Name## Spreadsheet control | Syncfusion -description: Learn here all about how to get the filtered rows in Syncfusion ##Platform_Name## Spreadsheet control of Syncfusion Essential JS 2 and more. -platform: ej2-asp-core-mvc -control: Spreadsheet -publishingplatform: ##Platform_Name## -documentation: ug ---- - -## Get the filtered rows in ##Platform_Name## Spreadsheet control - -Filtering allows you to view specific rows in a spreadsheet while hiding the others. The [allowFiltering](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.spreadsheet.spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_AllowFiltering) property allows you to enable or disable filtering functionality through the UI. You can also use the [allowFiltering](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.spreadsheet.spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_AllowFiltering) property and `applyFilter` method combination to filter data via code behind. The filtered rows can be identified by iterating through the row collection on the sheet and using the `isFiltered` property available in each row object. - -The following code example shows how to get the filtered rows. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/spreadsheet/filter-cs1/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="InsertSheetController.cs" %} -{% include code-snippet/spreadsheet/filter-cs1/filterController.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/spreadsheet/filter-cs1/razor %} -{% endhighlight %} -{% highlight c# tabtitle="InsertSheetController.cs" %} -{% include code-snippet/spreadsheet/filter-cs1/filterController.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} diff --git a/ej2-asp-core-mvc/spreadsheet/how-to/import-an-excel-document-using-file-uploader.md b/ej2-asp-core-mvc/spreadsheet/how-to/import-an-excel-document-using-file-uploader.md deleted file mode 100644 index 8187b9b5cd..0000000000 --- a/ej2-asp-core-mvc/spreadsheet/how-to/import-an-excel-document-using-file-uploader.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -layout: post -title: Import an excel document using file uploader in ##Platform_Name## Spreadsheet Control | Syncfusion -description: Learn here all about import an excel document using file uploader in Syncfusion ##Platform_Name## Spreadsheet component of Syncfusion Essential JS 2 and more. -platform: ej2-asp-core-mvc -control: Spreadsheet -publishingplatform: ##Platform_Name## -documentation: ug ---- - -## Import an excel document using file uploader in ##Platform_Name## Spreadsheet control - -If you explore your machine to select and upload an excel document using the file uploader, you will receive the uploaded document as a raw file in the `success` event of the file uploader. In this `success` event, you should pass the received raw file as an argument to the Spreadsheet's `open` method to see the appropriate output. - -The following code example shows how to import an excel document using file uploader in spreadsheet. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/spreadsheet/open-uploader/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Opencontroller.cs" %} -{% include code-snippet/spreadsheet/open-uploader/opencontroller.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/spreadsheet/open-uploader/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Opencontroller.cs" %} -{% include code-snippet/spreadsheet/open-uploader/opencontroller.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} diff --git a/ej2-asp-core-mvc/spreadsheet/how-to/insert-sheet-programmatically-and-make-it-the-active-sheet.md b/ej2-asp-core-mvc/spreadsheet/how-to/insert-sheet-programmatically-and-make-it-the-active-sheet.md deleted file mode 100644 index e09d049178..0000000000 --- a/ej2-asp-core-mvc/spreadsheet/how-to/insert-sheet-programmatically-and-make-it-the-active-sheet.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -layout: post -title: Insert a sheet programmatically and make the inserted sheet as the active sheet in ##Platform_Name## Spreadsheet control | Syncfusion -description: Learn here all about insert a sheet programmatically and make the inserted sheet as the active sheet in Syncfusion ##Platform_Name## Spreadsheet control of Syncfusion Essential JS 2 and more. -platform: ej2-asp-core-mvc -control: Spreadsheet -publishingplatform: ##Platform_Name## -documentation: ug ---- - -## Insert a sheet programmatically and make it the active sheet in ##Platform_Name## Spreadsheet control - -A sheet is a collection of cells organized in the form of rows and columns that allows you to store, format, and manipulate the data. Using `insertSheet` method, you can insert one or more sheets at the desired index. Then, you can make the inserted sheet as active sheet by focusing the start cell of that sheet using the `goTo` method. - -The following code example shows how to insert a sheet programmatically and make it the active sheet. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/spreadsheet/insert-sheet-change-active-sheet/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="InsertSheetController.cs" %} -{% include code-snippet/spreadsheet/insert-sheet-change-active-sheet/insertSheetController.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/spreadsheet/insert-sheet-change-active-sheet/razor %} -{% endhighlight %} -{% highlight c# tabtitle="InsertSheetController.cs" %} -{% include code-snippet/spreadsheet/insert-sheet-change-active-sheet/insertSheetController.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} diff --git a/ej2-asp-core-mvc/spreadsheet/how-to/print.md b/ej2-asp-core-mvc/spreadsheet/how-to/print.md deleted file mode 100644 index 05a9191c8f..0000000000 --- a/ej2-asp-core-mvc/spreadsheet/how-to/print.md +++ /dev/null @@ -1,37 +0,0 @@ ---- -layout: post -title: Print in ##Platform_Name## Spreadsheet Control | Syncfusion -description: Learn here all about Print in Syncfusion ##Platform_Name## Spreadsheet component of Syncfusion Essential JS 2 and more. -platform: ej2-asp-core-mvc -control: Print -publishingplatform: ##Platform_Name## -documentation: ug ---- - -# Print in Spreadsheet Control - -You can use the `print` method by importing from ej2-base package. Here, the `Select` event in the dropdown and the `dataBound` event are used to print the single/multiple sheets of data. To print the single/multiple sheets, use the dropdown button and select the `Print` (or) `Print All` option. In the following sample, you can be able to print the single/multiple sheets. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/spreadsheet/print/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="PrintController.cs" %} -{% include code-snippet/spreadsheet/print/printController.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/spreadsheet/print/razor %} -{% endhighlight %} -{% highlight c# tabtitle="PrintController.cs" %} -{% include code-snippet/spreadsheet/print/printController.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - diff --git a/ej2-asp-core-mvc/spreadsheet/how-to/save-and-open-spreadsheet-data-as-base64-string.md b/ej2-asp-core-mvc/spreadsheet/how-to/save-and-open-spreadsheet-data-as-base64-string.md deleted file mode 100644 index 0751670028..0000000000 --- a/ej2-asp-core-mvc/spreadsheet/how-to/save-and-open-spreadsheet-data-as-base64-string.md +++ /dev/null @@ -1,40 +0,0 @@ ---- -layout: post -title: Save and open Spreadsheet data as a Base64 string in ##Platform_Name## Spreadsheet control | Syncfusion -description: Learn here all about save and open Spreadsheet data as a Base64 string in Syncfusion ##Platform_Name## Spreadsheet control of Syncfusion Essential JS 2 and more. -platform: ej2-asp-core-mvc -control: Spreadsheet -publishingplatform: ##Platform_Name## -documentation: ug ---- - -# Save and open Spreadsheet data as a Base64 string in ##Platform_Name## Spreadsheet control - -In the Spreadsheet control, there is currently no direct option to save and open data as a `Base64` string. You can achieve this by saving the Spreadsheet data as blob data and then converting that saved blob data to a `Base64` string using `FileReader`. - -> You can get the Spreadsheet data as blob in the [saveComplete](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.spreadsheet.spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_SaveComplete) event when you set the `needBlobData` as **true** and `isFullPost` as **false** in the [beforeSave](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.spreadsheet.spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_BeforeSave) event. - -The following code example shows how to save and open the spreadsheet data as base64 string. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/spreadsheet/base-64-string/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="OpenController.cs" %} -{% include code-snippet/spreadsheet/base-64-string/opencontroller.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/spreadsheet/base-64-string/razor %} -{% endhighlight %} -{% highlight c# tabtitle="OpenController.cs" %} -{% include code-snippet/spreadsheet/base-64-string/opencontroller.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} diff --git a/ej2-asp-core-mvc/spreadsheet/how-to/sort-a-range-by-custom-list.md b/ej2-asp-core-mvc/spreadsheet/how-to/sort-a-range-by-custom-list.md deleted file mode 100644 index 8d53e9e773..0000000000 --- a/ej2-asp-core-mvc/spreadsheet/how-to/sort-a-range-by-custom-list.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -layout: post -title: Sort A Range By Custom List in ##Platform_Name## Spreadsheet Component | Syncfusion -description: Learn here all about Sort A Range By Custom List in Syncfusion ##Platform_Name## Spreadsheet component of Syncfusion Essential JS 2 and more. -platform: ej2-asp-core-mvc -control: Sort A Range By Custom List -publishingplatform: ##Platform_Name## -documentation: ug ---- - - -# Sort a range by custom list - -You can also define the sorting of cell values based on your own customized personal list. In this article, custom list is achieved using `custom sort comparer`. - -In the following demo, the `Trustworthiness` column is sorted based on the custom lists `Perfect`, `Sufficient`, and `Insufficient`. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/spreadsheet/custom-sort/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="CustomSortController.cs" %} -{% include code-snippet/spreadsheet/custom-sort/customSortController.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/spreadsheet/custom-sort/razor %} -{% endhighlight %} -{% highlight c# tabtitle="CustomSortController.cs" %} -{% include code-snippet/spreadsheet/custom-sort/customSortController.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - - -## See Also - -* [Filtering](./filter) -* [Sorting](https://ej2.syncfusion.com/aspnetcore/documentation/spreadsheet/sort) -* [Hyperlink](./link) \ No newline at end of file diff --git a/ej2-asp-core-mvc/spreadsheet/images/external-reference-dialog-alert .png b/ej2-asp-core-mvc/spreadsheet/images/external-reference-dialog-alert.png similarity index 100% rename from ej2-asp-core-mvc/spreadsheet/images/external-reference-dialog-alert .png rename to ej2-asp-core-mvc/spreadsheet/images/external-reference-dialog-alert.png diff --git a/ej2-asp-core-mvc/spreadsheet/open-save.md b/ej2-asp-core-mvc/spreadsheet/open-save.md index 7e4105327b..91e3afa7e0 100644 --- a/ej2-asp-core-mvc/spreadsheet/open-save.md +++ b/ej2-asp-core-mvc/spreadsheet/open-save.md @@ -140,6 +140,35 @@ You can open excel file into a read-only mode by using the [`openComplete`](http {% endtabs %} {% endif %} +### Import an excel document using file uploader in ##Platform_Name## Spreadsheet control + +If you explore your machine to select and upload an excel document using the file uploader, you will receive the uploaded document as a raw file in the `success` event of the file uploader. In this `success` event, you should pass the received raw file as an argument to the Spreadsheet's `open` method to see the appropriate output. + +The following code example shows how to import an excel document using file uploader in spreadsheet. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/open-uploader/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Opencontroller.cs" %} +{% include code-snippet/spreadsheet/open-uploader/opencontroller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/open-uploader/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Opencontroller.cs" %} +{% include code-snippet/spreadsheet/open-uploader/opencontroller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + ### External workbook confirmation dialog When you open an excel file that contains external workbook references, you will see a confirmation dialog. This dialog allows you to either continue with the file opening or cancel the operation. This confirmation dialog will appear only if you set the `AllowExternalWorkbook` property value to **false** during the open request, as shown below. This prevents the spreadsheet from displaying inconsistent data. @@ -156,7 +185,7 @@ public IActionResult Open(IFormCollection openRequest) > This feature is only applicable when importing an Excel file and not when loading JSON data or binding cell data. -![External workbook confirmation dialog](./images/external-reference-dialog-alert%20.png) +![External workbook confirmation dialog](./images/external-reference-dialog-alert.png) ## Supported file formats @@ -363,6 +392,37 @@ Open and save helper functions are shipped in the Syncfusion.EJ2.Spreadsheet pac | ASP.NET MVC4 | Syncfusion.EJ2.MVC4
    Syncfusion.EJ2.Spreadsheet.AspNet.MVC4
    Syncfusion.Compression.Base
    Syncfusion.XlsIO.AspNet.Mvc4
    Syncfusion.ExcelToPdfConverter.AspNet.Mvc4
    | [Syncfusion.EJ2.Spreadsheet.AspNet.MVC4](https://www.nuget.org/packages/Syncfusion.EJ2.Spreadsheet.AspNet.MVC4)
    [Syncfusion.ExcelToPdfConverter.AspNet.Mvc4](https://www.nuget.org/packages/Syncfusion.ExcelToPdfConverter.AspNet.Mvc4) | | ASP.NET MVC5 | Syncfusion.EJ2.MVC5
    Syncfusion.EJ2.Spreadsheet.AspNet.MVC5
    Syncfusion.Compression.Base
    Syncfusion.XlsIO.AspNet.Mvc5
    Syncfusion.ExcelToPdfConverter.AspNet.Mvc5
    | [Syncfusion.EJ2.Spreadsheet.AspNet.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.Spreadsheet.AspNet.MVC5)
    [Syncfusion.ExcelToPdfConverter.AspNet.Mvc5](https://www.nuget.org/packages/Syncfusion.ExcelToPdfConverter.AspNet.Mvc5) | +## Save and open Spreadsheet data as a Base64 string in ##Platform_Name## Spreadsheet control + +In the Spreadsheet control, there is currently no direct option to save and open data as a `Base64` string. You can achieve this by saving the Spreadsheet data as blob data and then converting that saved blob data to a `Base64` string using `FileReader`. + +> You can get the Spreadsheet data as blob in the [saveComplete](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.spreadsheet.spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_SaveComplete) event when you set the `needBlobData` as **true** and `isFullPost` as **false** in the [beforeSave](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.spreadsheet.spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_BeforeSave) event. + +The following code example shows how to save and open the spreadsheet data as base64 string. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/base-64-string/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="OpenController.cs" %} +{% include code-snippet/spreadsheet/base-64-string/opencontroller.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/base-64-string/razor %} +{% endhighlight %} +{% highlight c# tabtitle="OpenController.cs" %} +{% include code-snippet/spreadsheet/base-64-string/opencontroller.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + ## See Also * [Filtering](filter) diff --git a/ej2-asp-core-mvc/spreadsheet/sort.md b/ej2-asp-core-mvc/spreadsheet/sort.md index f1d7b0603e..f028efb093 100644 --- a/ej2-asp-core-mvc/spreadsheet/sort.md +++ b/ej2-asp-core-mvc/spreadsheet/sort.md @@ -160,6 +160,35 @@ N> * The `sortComparer` is an optional property of `sortDescriptor`. For custom sort comparer example, refer to the [`Sort a range by custom list`](https://ej2.syncfusion.com/aspnetcore/documentation/spreadsheet/how-to/sort-a-range-by-custom-list) in the `how-to` section. +## Sort a range by custom list + +You can also define the sorting of cell values based on your own customized personal list. In this article, custom list is achieved using `custom sort comparer`. + +In the following demo, the `Trustworthiness` column is sorted based on the custom lists `Perfect`, `Sufficient`, and `Insufficient`. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/custom-sort/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="CustomSortController.cs" %} +{% include code-snippet/spreadsheet/custom-sort/customSortController.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/custom-sort/razor %} +{% endhighlight %} +{% highlight c# tabtitle="CustomSortController.cs" %} +{% include code-snippet/spreadsheet/custom-sort/customSortController.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + ## Known error validations The following errors have been handled for sorting, diff --git a/ej2-asp-core-mvc/spreadsheet/worksheet.md b/ej2-asp-core-mvc/spreadsheet/worksheet.md index 8d04ca80d5..a3ac19f402 100644 --- a/ej2-asp-core-mvc/spreadsheet/worksheet.md +++ b/ej2-asp-core-mvc/spreadsheet/worksheet.md @@ -46,6 +46,34 @@ The following code example shows the insert sheet operation in spreadsheet. {% endtabs %} {% endif %} +### Insert a sheet programmatically and make it the active sheet in ##Platform_Name## Spreadsheet control + +A sheet is a collection of cells organized in the form of rows and columns that allows you to store, format, and manipulate the data. Using `insertSheet` method, you can insert one or more sheets at the desired index. Then, you can make the inserted sheet as active sheet by focusing the start cell of that sheet using the `goTo` method. + +The following code example shows how to insert a sheet programmatically and make it the active sheet. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/insert-sheet-change-active-sheet/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="InsertSheetController.cs" %} +{% include code-snippet/spreadsheet/insert-sheet-change-active-sheet/insertSheetController.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/insert-sheet-change-active-sheet/razor %} +{% endhighlight %} +{% highlight c# tabtitle="InsertSheetController.cs" %} +{% include code-snippet/spreadsheet/insert-sheet-change-active-sheet/insertSheetController.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} ## Delete sheet @@ -61,6 +89,34 @@ You can dynamically rename an existing worksheet in the following way, * Right-click on the sheet tab, and then select `Rename` option from the context menu. +## Print in Spreadsheet Control + +You can use the `print` method by importing from ej2-base package. Here, the `Select` event in the dropdown and the `dataBound` event are used to print the single/multiple sheets of data. To print the single/multiple sheets, use the dropdown button and select the `Print` (or) `Print All` option. In the following sample, you can be able to print the single/multiple sheets. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/print/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="PrintController.cs" %} +{% include code-snippet/spreadsheet/print/printController.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/print/razor %} +{% endhighlight %} +{% highlight c# tabtitle="PrintController.cs" %} +{% include code-snippet/spreadsheet/print/printController.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + ## Headers By default, the row and column headers are visible in worksheets. You can dynamically show or hide worksheet headers by using one of the following ways, diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html index 8ea568b94a..774953fbef 100644 --- a/ej2-asp-core-toc.html +++ b/ej2-asp-core-toc.html @@ -2469,14 +2469,8 @@
  • How To
  • Mobile Responsiveness
    • diff --git a/ej2-asp-mvc-toc.html b/ej2-asp-mvc-toc.html index 4695f2f86a..a33a2a3092 100644 --- a/ej2-asp-mvc-toc.html +++ b/ej2-asp-mvc-toc.html @@ -2432,14 +2432,8 @@
  • How To
  • Mobile Responsiveness
    • From 995a15fbc5c78d8d56050d9d0c86c8f5901d2ab0 Mon Sep 17 00:00:00 2001 From: DinakarSF4212 <147583019+DinakarSF4212@users.noreply.github.com> Date: Thu, 6 Jun 2024 15:47:23 +0530 Subject: [PATCH 007/145] 889454: Resolved File Path Errors. --- ej2-asp-core-toc.html | 3 --- ej2-asp-mvc-toc.html | 3 --- 2 files changed, 6 deletions(-) diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html index 774953fbef..c1e2cc6855 100644 --- a/ej2-asp-core-toc.html +++ b/ej2-asp-core-toc.html @@ -2463,9 +2463,6 @@
  • Templates
  • Globalization
  • Use Cases -
  • How To