Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
116 changes: 2 additions & 114 deletions Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/data-binding.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ documentation: ug
---


# Data Binding in Spreadsheet Control
# Data Binding in ASP.NET Core Spreadsheet Control

The Spreadsheet uses `DataManager`, which supports both RESTful JSON data services and local JavaScript object array binding to a range. The `dataSource` property can be assigned either with the instance of `DataManager` or JavaScript object array collection.

Expand All @@ -20,8 +20,6 @@ To bind local data to the Spreadsheet, you can assign a JavaScript object array

Refer to the following code example for local data binding.

{% if page.publishingplatform == "aspnet-core" %}

{% tabs %}
{% highlight cshtml tabtitle="CSHTML" %}
{% include code-snippet/excel/spreadsheet/asp-net-core/local-data-binding/tagHelper %}
Expand All @@ -31,19 +29,6 @@ Refer to the following code example for local data binding.
{% endhighlight %}
{% endtabs %}

{% elsif page.publishingplatform == "aspnet-mvc" %}

{% tabs %}
{% highlight razor tabtitle="CSHTML" %}
{% include code-snippet/excel/spreadsheet/asp-net-core/local-data-binding/razor %}
{% endhighlight %}
{% highlight c# tabtitle="LocalDataController.cs" %}
{% include code-snippet/excel/spreadsheet/asp-net-core/local-data-binding/MVC/localDataController.cs %}
{% endhighlight %}
{% endtabs %}
{% endif %}




N> The local data source can also be provided as an instance of the `DataManager`. By default, `DataManager` uses `JsonAdaptor` for local data-binding.
Expand All @@ -56,8 +41,6 @@ By default, when a data source is bound to a sheet, columns are auto-assigned fr

The following code example demonstrates how to customize the mapping of column data:

{% if page.publishingplatform == "aspnet-core" %}

{% tabs %}
{% highlight cshtml tabtitle="CSHTML" %}
{% include code-snippet/excel/spreadsheet/asp-net-core/field-mapping/tagHelper %}
Expand All @@ -67,26 +50,13 @@ The following code example demonstrates how to customize the mapping of column d
{% endhighlight %}
{% endtabs %}

{% elsif page.publishingplatform == "aspnet-mvc" %}

{% tabs %}
{% highlight razor tabtitle="CSHTML" %}
{% include code-snippet/excel/spreadsheet/asp-net-core/field-mapping/razor %}
{% endhighlight %}
{% highlight c# tabtitle="FieldMappingController.cs" %}
{% include code-snippet/excel/spreadsheet/asp-net-core/field-mapping/MVC/fieldMappingController.cs %}
{% endhighlight %}
{% endtabs %}
{% endif %}

## Remote data

To bind remote data to the Spreadsheet control, assign service data as an instance of `DataManager` to the `dataSource` property. To interact with remote data source, provide the service endpoint `url`.

Refer to the following code example for remote data binding.

{% if page.publishingplatform == "aspnet-core" %}

{% tabs %}
{% highlight cshtml tabtitle="CSHTML" %}
{% include code-snippet/excel/spreadsheet/asp-net-core/remote-data-binding/tagHelper %}
Expand All @@ -96,18 +66,6 @@ Refer to the following code example for remote data binding.
{% endhighlight %}
{% endtabs %}

{% elsif page.publishingplatform == "aspnet-mvc" %}

{% tabs %}
{% highlight razor tabtitle="CSHTML" %}
{% include code-snippet/excel/spreadsheet/asp-net-core/remote-data-binding/razor %}
{% endhighlight %}
{% highlight c# tabtitle="RemoteDataController.cs" %}
{% include code-snippet/excel/spreadsheet/asp-net-core/remote-data-binding/MVC/remoteDataController.cs %}
{% endhighlight %}
{% endtabs %}
{% endif %}



N> By default, `DataManager` uses **ODataAdaptor** for remote data-binding.
Expand All @@ -116,8 +74,6 @@ N> By default, `DataManager` uses **ODataAdaptor** for remote data-binding.

`OData` is a standardized protocol for creating and consuming data. You can retrieve data from OData service using the DataManager. Refer to the following code example for remote Data binding using OData service.

{% if page.publishingplatform == "aspnet-core" %}

{% tabs %}
{% highlight cshtml tabtitle="CSHTML" %}
{% include code-snippet/excel/spreadsheet/asp-net-core/odata-adaptor/tagHelper %}
Expand All @@ -127,26 +83,12 @@ N> By default, `DataManager` uses **ODataAdaptor** for remote data-binding.
{% endhighlight %}
{% endtabs %}

{% elsif page.publishingplatform == "aspnet-mvc" %}

{% tabs %}
{% highlight razor tabtitle="CSHTML" %}
{% include code-snippet/excel/spreadsheet/asp-net-core/odata-adaptor/razor %}
{% endhighlight %}
{% highlight c# tabtitle="ODataController.cs" %}
{% include code-snippet/excel/spreadsheet/asp-net-core/odata-adaptor/MVC/oDataController.cs %}
{% endhighlight %}
{% endtabs %}
{% endif %}



### Web API

You can use WebApiAdaptor to bind spreadsheet with Web API created using OData endpoint.

{% if page.publishingplatform == "aspnet-core" %}

{% tabs %}
{% highlight cshtml tabtitle="CSHTML" %}
{% include code-snippet/excel/spreadsheet/asp-net-core/webapi-adaptor/tagHelper %}
Expand All @@ -156,28 +98,14 @@ You can use WebApiAdaptor to bind spreadsheet with Web API created using OData e
{% endhighlight %}
{% endtabs %}

{% elsif page.publishingplatform == "aspnet-mvc" %}

{% tabs %}
{% highlight razor tabtitle="CSHTML" %}
{% include code-snippet/excel/spreadsheet/asp-net-core/webapi-adaptor/razor %}
{% endhighlight %}
{% highlight c# tabtitle="WebApiController.cs" %}
{% include code-snippet/excel/spreadsheet/asp-net-core/webapi-adaptor/MVC/webApiController.cs %}
{% endhighlight %}
{% endtabs %}
{% endif %}



## Cell data binding

The Spreadsheet control can bind the data to individual cell in a sheet . To achive this you can use the `value` property.
The Spreadsheet control can bind the data to individual cell in a sheet . To achieve this you can use the `value` property.

Refer to the following code example for cell data binding.

{% if page.publishingplatform == "aspnet-core" %}

{% tabs %}
{% highlight cshtml tabtitle="CSHTML" %}
{% include code-snippet/excel/spreadsheet/asp-net-core/cell-data-binding/tagHelper %}
Expand All @@ -187,18 +115,6 @@ Refer to the following code example for cell data binding.
{% endhighlight %}
{% endtabs %}

{% elsif page.publishingplatform == "aspnet-mvc" %}

{% tabs %}
{% highlight razor tabtitle="CSHTML" %}
{% include code-snippet/excel/spreadsheet/asp-net-core/cell-data-binding/razor %}
{% endhighlight %}
{% highlight c# tabtitle="CellDataController.cs" %}
{% include code-snippet/excel/spreadsheet/asp-net-core/cell-data-binding/MVC/cellDataController.cs %}
{% endhighlight %}
{% endtabs %}
{% endif %}



N> The cell data binding also supports formula, style, number format, and more.
Expand All @@ -219,8 +135,6 @@ The following table defines the arguments of the `dataSourceChanged` event.
N> For `add` action, the value for all the fields will be `null` in the data. In the case that you do not want the primary key field to be null which needs to be updated in the backend service, you can use `edit` action after updating the primary key field to update in the backend service. <br><br>
<br/> For inserting a row at the end of the datasource range, you should insert a row below at the end of the range to trigger the `dataSourceChanged` event with action `add`.

{% if page.publishingplatform == "aspnet-core" %}

{% tabs %}
{% highlight cshtml tabtitle="CSHTML" %}
{% include code-snippet/excel/spreadsheet/asp-net-core/dynamic-data-binding/tagHelper %}
Expand All @@ -230,18 +144,6 @@ N> For `add` action, the value for all the fields will be `null` in the data. In
{% endhighlight %}
{% endtabs %}

{% elsif page.publishingplatform == "aspnet-mvc" %}

{% tabs %}
{% highlight razor tabtitle="CSHTML" %}
{% include code-snippet/excel/spreadsheet/asp-net-core/dynamic-data-binding/razor %}
{% endhighlight %}
{% highlight c# tabtitle="DynamicDataController.cs" %}
{% include code-snippet/excel/spreadsheet/asp-net-core/dynamic-data-binding/MVC/dynamicDataController.cs %}
{% endhighlight %}
{% endtabs %}
{% endif %}

## Dynamic data binding using updateRange method

The `updateRange` method allows you to dynamically update the `dataSource` in a spreadsheet without manually iterating through each cell. This method is especially useful for efficiently applying bulk updates to a specific range within the spreadsheet.
Expand All @@ -250,8 +152,6 @@ To use the `updateRange` method, provide the new `dataSource` and specify the st

The following code example demonstrates how to dynamically update data using the `updateRange` method.

{% if page.publishingplatform == "aspnet-core" %}

{% tabs %}
{% highlight cshtml tabtitle="CSHTML" %}
{% include code-snippet/excel/spreadsheet/asp-net-core/dynamic-data-binding-cs2/tagHelper %}
Expand All @@ -261,18 +161,6 @@ The following code example demonstrates how to dynamically update data using the
{% endhighlight %}
{% endtabs %}

{% elsif page.publishingplatform == "aspnet-mvc" %}

{% tabs %}
{% highlight razor tabtitle="CSHTML" %}
{% include code-snippet/excel/spreadsheet/asp-net-core/dynamic-data-binding-cs2/razor %}
{% endhighlight %}
{% highlight c# tabtitle="UpdateRangeController.cs" %}
{% include code-snippet/excel/spreadsheet/asp-net-core/dynamic-data-binding-cs2/MVC/updateRangeController.cs %}
{% endhighlight %}
{% endtabs %}
{% endif %}

## See Also

* [Filtering](filter)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ control: Global Local
documentation: ug
---

# Globalization in ASP.NET MVC Spreadsheet control
# Globalization in ASP.NET Core Spreadsheet control

## Localization

Expand Down Expand Up @@ -425,12 +425,4 @@ RTL provides an option to switch the text direction and layout of the Spreadshee

## See Also

{% if page.publishingplatform == "aspnet-core" %}

* [Localization](https://ej2.syncfusion.com/aspnetcore/documentation/common/localization)

{% elsif page.publishingplatform == "aspnet-mvc" %}

* [Localization](https://ej2.syncfusion.com/aspnetmvc/documentation/common/localization/)

{% endif %}
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ documentation: ug
---


# Protection in Spreadsheet Control
# Protection in ASP.NET Core Spreadsheet Control

Sheet protection helps you to prevent the users from modifying the data in the spreadsheet.

Expand Down Expand Up @@ -65,7 +65,7 @@ Unprotect sheet is used to enable all the functionalities that are already disab

**User Interface**:

In the active Spreadsheet, the sheet Unprotection can be done by any of the following ways:
In the active Spreadsheet, the sheet can be unprotected by any of the following ways:

* Select the `Unprotect Sheet` item in the Ribbon toolbar under the Data Tab.
* Right-click the sheet tab, select the `Unprotect Sheet` item in the context menu.
Expand Down Expand Up @@ -168,7 +168,7 @@ Unprotect Workbook is used to enable the insert, delete, rename, move, copy, hid

**User Interface**:

In the active Spreadsheet, the workbook Unprotection can be done in any of the following ways:
In the active Spreadsheet, the workbook can be unprotected in any of the following ways:

* Select the `Unprotect Workbook` item in the Ribbon toolbar under the Data Tab and provide the valid password in the dialog box.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ documentation: ug
---


# Data Binding in Spreadsheet Control
# Data Binding in ASP.NET MVC Spreadsheet Control

The Spreadsheet uses `DataManager`, which supports both RESTful JSON data services and local JavaScript object array binding to a range. The `dataSource` property can be assigned either with the instance of `DataManager` or JavaScript object array collection.

Expand Down Expand Up @@ -102,7 +102,7 @@ You can use WebApiAdaptor to bind spreadsheet with Web API created using OData e

## Cell data binding

The Spreadsheet control can bind the data to individual cell in a sheet . To achive this you can use the `value` property.
The Spreadsheet control can bind the data to individual cell in a sheet . To achieve this you can use the `value` property.

Refer to the following code example for cell data binding.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ documentation: ug
---


# Protection in Spreadsheet Control
# Protection in ASP.NET MVC Spreadsheet Control

Sheet protection helps you to prevent the users from modifying the data in the spreadsheet.

Expand Down Expand Up @@ -52,7 +52,6 @@ The following example shows `Protect Sheet` functionality with password in the S
{% include code-snippet/excel/spreadsheet/asp-net-mvc/protect-sheet/protectSheetController.cs %}
{% endhighlight %}
{% endtabs %}
{% endif %}



Expand All @@ -66,7 +65,7 @@ Unprotect sheet is used to enable all the functionalities that are already disab

**User Interface**:

In the active Spreadsheet, the sheet Unprotection can be done by any of the following ways:
In the active Spreadsheet, the sheet can be unprotected by any of the following ways:

* Select the `Unprotect Sheet` item in the Ribbon toolbar under the Data Tab.
* Right-click the sheet tab, select the `Unprotect Sheet` item in the context menu.
Expand Down Expand Up @@ -169,7 +168,7 @@ Unprotect Workbook is used to enable the insert, delete, rename, move, copy, hid

**User Interface**:

In the active Spreadsheet, the workbook Unprotection can be done in any of the following ways:
In the active Spreadsheet, the workbook can be unprotected in any of the following ways:

* Select the `Unprotect Workbook` item in the Ribbon toolbar under the Data Tab and provide the valid password in the dialog box.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -150,9 +150,9 @@ This article describes the API migration process of the Spreadsheet component fr
|--------- | ----------- | ----------- |
| Enables or disables the import feature | **Property:** *allowImport* <br><br>`<ej-spreadsheet [allowImport]="true">`<br>`</ej-spreadsheet>`| **Property:** *allowOpen* <br><br>`<ejs-spreadsheet [allowOpen]="true">`<br>`</ejs-spreadsheet>`|
| Enables or disables the exporting feature | **Property:** *exportSettings.allowExporting* <br><br>`<ej-spreadsheet [exportSettings]="exportSettings">`<br>`</ej-spreadsheet>`<br>**Ts**<br>`this.exportSettings = { allowExporting: true }`| **Property:** *allowSave* <br><br>`<ejs-spreadsheet [allowSave]="true">`<br>`</ejs-spreadsheet>`|
| Defines the excelUrl to export to the excel format | **Property:** *exportSettings.excelUrl* <br><br>`<ej-spreadsheet [exportSettings]="exportSettings">`<br>`</ej-spreadsheet>`<br>**Ts**<br>`this.exportSettings = { excelUrl: "http://js.syncfusion.com/demos/ejservices/api/Spreadsheet/ExcelExport" }`| **Property:** *saveUrl* <br><br>`<ejs-spreadsheet saveUrl='https://services.syncfusion.com/angular/production/api/spreadsheet/save'>`<br>`</ejs-spreadsheet>`|
| Defines the csvUrl to export to the csv format | **Property:** *exportSettings.csvUrl* <br><br>`<ej-spreadsheet [exportSettings]="exportSettings">`<br>`</ej-spreadsheet>`<br>**Ts**<br>`this.exportSettings = { csvUrl: "http://js.syncfusion.com/demos/ejservices/api/Spreadsheet/CsvExport" }`| **Property:** *saveUrl* <br><br>You can use the same service url and specify saveType as Csv in the beforeSave event`<ejs-spreadsheet saveUrl='https://services.syncfusion.com/angular/production/api/spreadsheet/save' (beforeSave)='beforeSave($event)'>`<br>`</ejs-spreadsheet>`<br>**Ts**<br>`beforeSave(args: BeforeSaveEventArgs) { args.saveType = 'Csv' }`|
| Import mapper to perform the import feature | **Property:** *importSettings.importMapper* <br><br>`<ej-spreadsheet [importSettings]='importSettings'>`<br>`</ej-spreadsheet>`<br>**Ts**<br>`this.importSettings= { importMapper: "http://js.syncfusion.com/demos/ejservices/api/Spreadsheet/Import" };`| **Property:** *openUrl* <br><br>`<ejs-spreadsheet openUrl='https://services.syncfusion.com/angular/production/api/spreadsheet/open'>`<br>`</ejs-spreadsheet>`|
| Defines the excelUrl to export to the excel format | **Property:** *exportSettings.excelUrl* <br><br>`<ej-spreadsheet [exportSettings]="exportSettings">`<br>`</ej-spreadsheet>`<br>**Ts**<br>`this.exportSettings = { excelUrl: "http://js.syncfusion.com/demos/ejservices/api/Spreadsheet/ExcelExport" }`| **Property:** *saveUrl* <br><br>`<ejs-spreadsheet saveUrl='https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save'>`<br>`</ejs-spreadsheet>`|
| Defines the csvUrl to export to the csv format | **Property:** *exportSettings.csvUrl* <br><br>`<ej-spreadsheet [exportSettings]="exportSettings">`<br>`</ej-spreadsheet>`<br>**Ts**<br>`this.exportSettings = { csvUrl: "http://js.syncfusion.com/demos/ejservices/api/Spreadsheet/CsvExport" }`| **Property:** *saveUrl* <br><br>You can use the same service url and specify saveType as Csv in the beforeSave event`<ejs-spreadsheet saveUrl='https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save' (beforeSave)='beforeSave($event)'>`<br>`</ejs-spreadsheet>`<br>**Ts**<br>`beforeSave(args: BeforeSaveEventArgs) { args.saveType = 'Csv' }`|
| Import mapper to perform the import feature | **Property:** *importSettings.importMapper* <br><br>`<ej-spreadsheet [importSettings]='importSettings'>`<br>`</ej-spreadsheet>`<br>**Ts**<br>`this.importSettings= { importMapper: "http://js.syncfusion.com/demos/ejservices/api/Spreadsheet/Import" };`| **Property:** *openUrl* <br><br>`<ejs-spreadsheet openUrl='https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open'>`<br>`</ejs-spreadsheet>`|
| Import excel file | **Method:** *import* <br><br>`<ej-spreadsheet id="spreadsheet">`<br>`</ej-spreadsheet>`<br>**TS**<br>`ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); xlObj.import({ file: file }); }`| **Method:** *open* <br><br>`<ejs-spreadsheet #default>`<br>`</ejs-spreadsheet>`<br>**TS**<br>`@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;`<br>`this.spreadsheetObj.open({ file: file });`|
| Load JSON data of the Spreadsheet | **Method:** *loadFromJSON* <br><br>`<ej-spreadsheet id="spreadsheet">`<br>`</ej-spreadsheet>`<br>**TS**<br>`ngAfterViewInit(){ let xlObj = $("#spreadsheet").data("ejSpreadsheet"); let response = xlObj.saveAsJSON(); xlObj.loadFromJSON(response); }`| **Method:** *openFromJson* <br><br>`<ejs-spreadsheet #default>`<br>`</ejs-spreadsheet>`<br>**TS**<br>`@ViewChild('default') public spreadsheetObj: SpreadsheetComponent;`<br>`this.spreadsheetObj.saveAsJson().then(response => (this.spreadsheetObj.openFromJson({ file: response.jsonObject })));`|
| Triggers when a file is imported | **Event:** *onImport* <br><br>`<ej-spreadsheet id="spreadsheet" (onImport)="onImport($event)">`<br>`</ej-spreadsheet>`<br>**TS**<br>`onImport(args){ }`| **Event:** *openComplete* <br><br>`<ejs-spreadsheet (openComplete)="onOpenComplete($event)">`<br>`</ejs-spreadsheet>`<br>**TS**<br>`onOpenComplete(args){ }`|
Expand Down Expand Up @@ -260,7 +260,7 @@ The following table compares Excel functionality with the availability of EJ1 an
| Scrolling | Partially | Yes | - |
| Selection | Yes | Yes | - |
| Editing | Yes | Yes | - |
| Formulae | Yes | Partially | EJ2 supports limited number of [`most used formulas`](https://ej2.syncfusion.com/documentation/spreadsheet/formulas/#supported-formulas) |
| Formulae | Yes | Partially | EJ2 supports limited number of [`most used formulas`](https://ej2.syncfusion.com/documentation/spreadsheet/formulas#supported-formulas) |
| Named range | Yes | Partially | EJ2 Spreadsheet Named range supports only in workbook scope |
| Data Binding | Yes | Yes | - |
| Formatting | Yes | Yes | - |
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -134,8 +134,8 @@ export class AppComponent {
}
@ViewChild('default')
public spreadsheetObj: SpreadsheetComponent;
public openUrl = 'https://services.syncfusion.com/angular/production/api/spreadsheet/open';
public saveUrl = 'https://services.syncfusion.com/angular/production/api/spreadsheet/save';
public openUrl = 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open';
public saveUrl = 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save';

beforeSave(args: BeforeSaveEventArgs) {
args.isFullPost = false;
Expand Down
Loading