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
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 7 additions & 8 deletions js/Button/Getting-Started.md
Original file line number Diff line number Diff line change
@@ -1,20 +1,19 @@
---
layout: post
title: Getting-Started
description: getting started
platform: js
title: Getting Started with JavaScript Button Control | Syncfusion
description: Learn here all about getting started with Syncfusion Essential JavaScript Button component, it's elements and more details.
control: Button
documentation: ug
api : /api/js/ejbutton
---

# Getting Started
# Getting Started with JavaScript Button Control

This section explains you briefly on how to create a **Button** in your application with **JavaScript**. Essential JavaScript Button helps to display a Button widget within a web page and allows you to Click, Toggle Click, Reset, and Submit. The following example illustrates how to customize Button control in a Media Player and Office Ribbon Application.

The following screenshot illustrates the functionality of a Button control in Media Player and Office Ribbon Application.

![](/js/Button/Getting-Started_images/Getting-Started_img1.png)
![Getting Started with JavaScript Button.](/js/Button/Getting-Started_images/javascript-button-getting-started.png)

## Create Button Widget

Expand Down Expand Up @@ -280,7 +279,7 @@ Add the following function in **<script>** tag.

The following screenshot displays the output.

![](/js/Button/Getting-Started_images/Getting-Started_img2.png)
![JavaScript Button getting started output.](/js/Button/Getting-Started_images/javascript-button-output.png)

## Create Office Ribbon Control

Expand Down Expand Up @@ -384,9 +383,9 @@ Add Function Definition from click event to Button function.

The following screenshot displays Office Ribbon Application.

![](/js/Button/Getting-Started_images/Getting-Started_img3.png)
![JavaScript Button application.](/js/Button/Getting-Started_images/javascript-button-application.png)

The following screenshot displays **Office Ribbon** **Bold** Option.

![](/js/Button/Getting-Started_images/Getting-Started_img4.png)
![JavaScript Button display.](/js/Button/Getting-Started_images/javaScript-button-display.png)

18 changes: 9 additions & 9 deletions js/Grid/Data-Binding.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ api: /api/js/ejgrid
---
# Data binding

The Grid control uses [`ej.DataManager`](https://help.syncfusion.com/js/datamanager/overview# "ej.DataManager") which supports both RESTful JSON data services binding and local JSON array binding. The [`dataSource`](https://help.syncfusion.com/api/js/ejgrid#members:datasource "dataSource") property can be assigned either with the instance of [`ej.DataManger`](https://help.syncfusion.com/api/js/ejdatamanager# "ej.DataManager") or JSON data array collection. It supports different kinds of data binding methods such as.
The Grid control uses [`ej.DataManager`](https://help.syncfusion.com/js/datamanager/overview "ej.DataManager") which supports both RESTful JSON data services binding and local JSON array binding. The [`dataSource`](https://help.syncfusion.com/api/js/ejgrid#members:datasource "dataSource") property can be assigned either with the instance of [`ej.DataManger`](https://help.syncfusion.com/api/js/ejdatamanager "ej.DataManager") or JSON data array collection. It supports different kinds of data binding methods such as.

1. Local data
2. Remote data
Expand Down Expand Up @@ -47,7 +47,7 @@ The following code example describes the above behavior.

{% endhighlight %}

The JSON array to the [`dataSource`](https://help.syncfusion.com/api/js/ejgrid#members:datasource "dataSource") property can also be provided as an instance of the [`ej.DataManager`](https://help.syncfusion.com/api/js/ejdatamanager# "DataManager"). When the JSON array is passed as an instance of [`ej.DataManager`](https://help.syncfusion.com/api/js/ejdatamanager# "DataManager"), the `ej.JsonAdaptor` will be used to manipulate the grid datasource.
The JSON array to the [`dataSource`](https://help.syncfusion.com/api/js/ejgrid#members:datasource "dataSource") property can also be provided as an instance of the [`ej.DataManager`](https://help.syncfusion.com/api/js/ejdatamanager "DataManager"). When the JSON array is passed as an instance of [`ej.DataManager`](https://help.syncfusion.com/api/js/ejdatamanager "DataManager"), the `ej.JsonAdaptor` will be used to manipulate the grid datasource.

The following code example describes the above behavior.

Expand Down Expand Up @@ -79,11 +79,11 @@ N> 3. To update the dataSource after Grid rendered, use [`dataSource`](https://h

## Remote Data

To bind remote data to Grid Control, you can assign a service data as an instance of [`ej.DataManager`](https://help.syncfusion.com/api/js/ejdatamanager# "DataManager") to the [`dataSource`](https://help.syncfusion.com/api/js/ejgrid#members:datasource "dataSource") property.
To bind remote data to Grid Control, you can assign a service data as an instance of [`ej.DataManager`](https://help.syncfusion.com/api/js/ejdatamanager "DataManager") to the [`dataSource`](https://help.syncfusion.com/api/js/ejgrid#members:datasource "dataSource") property.

### OData

OData is a standardized protocol for creating and consuming data. You can provide the [OData service](https://www.odata.org/) URL directly to the [`ej.DataManager`](https://help.syncfusion.com/api/js/ejdatamanager# "DataManager") class and then you can assign it to Grid [`dataSource`](https://help.syncfusion.com/api/js/ejgrid#members:datasource "datasource").
OData is a standardized protocol for creating and consuming data. You can provide the [OData service](https://www.odata.org/) URL directly to the [`ej.DataManager`](https://help.syncfusion.com/api/js/ejdatamanager "DataManager") class and then you can assign it to Grid [`dataSource`](https://help.syncfusion.com/api/js/ejgrid#members:datasource "datasource").

The following code example describes the above behavior.

Expand Down Expand Up @@ -112,7 +112,7 @@ The following output is displayed as a result of the above code example.

#### OData Version 4

For OData Version 4 support, ej.ODataV4Adaptor should be used. By using `url` property of [`ej.DataManager`](https://help.syncfusion.com/api/js/ejdatamanager# "DataManager") you can bind OData Version 4 Service link and specify `adaptor` as `ej.ODataV4Adaptor`.
For OData Version 4 support, ej.ODataV4Adaptor should be used. By using `url` property of [`ej.DataManager`](https://help.syncfusion.com/api/js/ejdatamanager "DataManager") you can bind OData Version 4 Service link and specify `adaptor` as `ej.ODataV4Adaptor`.

I> You can provide adaptor value either as `string` value ("ODataAdaptor") or by creating a new instance (new `ej.ODataV4Adaptor`).

Expand Down Expand Up @@ -208,9 +208,9 @@ The following output is displayed as a result of the above code example.

### Other RESTful web services

The [Custom Adaptor](https://help.syncfusion.com/js/datamanager/data-adaptors#custom-adaptor "CustomAdaptor") concept of [`ej.DataManager`](https://help.syncfusion.com/api/js/ejdatamanager# "DataManager") allows to customize or generate your own adaptor which is used to process the `query` and `result` data.
The [Custom Adaptor](https://help.syncfusion.com/js/datamanager/data-adaptors#custom-adaptor "CustomAdaptor") concept of [`ej.DataManager`](https://help.syncfusion.com/api/js/ejdatamanager "DataManager") allows to customize or generate your own adaptor which is used to process the `query` and `result` data.

When using remote data binding, the adaptor of the [`ej.DataManager`](https://help.syncfusion.com/api/js/ejdatamanager# "DataManager") plays vital role in processing queries to make them suitable to sends along with the data request and also in processing the response data from the server.
When using remote data binding, the adaptor of the [`ej.DataManager`](https://help.syncfusion.com/api/js/ejdatamanager "DataManager") plays vital role in processing queries to make them suitable to sends along with the data request and also in processing the response data from the server.

The following code example describes the above behavior.

Expand Down Expand Up @@ -277,7 +277,7 @@ The following output is displayed as a result of the above code example.

### Load At Once

On remote data binding, by default all the Grid actions will be processed on server-side such as paging, sorting, editing, grouping and filtering etc. To avoid post back to server on every action, you can set the grid to load all the data on initialization time and make the actions client-side. To enable this, you can use `offline` property of the [`ej.DataManager`](https://help.syncfusion.com/api/js/ejdatamanager# "DataManager").
On remote data binding, by default all the Grid actions will be processed on server-side such as paging, sorting, editing, grouping and filtering etc. To avoid post back to server on every action, you can set the grid to load all the data on initialization time and make the actions client-side. To enable this, you can use `offline` property of the [`ej.DataManager`](https://help.syncfusion.com/api/js/ejdatamanager "DataManager").

The following code example describes the above behavior.

Expand Down Expand Up @@ -313,7 +313,7 @@ The following output is displayed as a result of the above code example.

### Data Caching

Date caching will help you prevent the request to server for already visited pages in Grid using the `enableCaching` property of [`ej.DataManager`](https://help.syncfusion.com/api/js/ejdatamanager# "DataManager"). Also using `cachingPageSize` and `timeTillExpiration` properties of [`ej.DataManager`](https://help.syncfusion.com/api/js/ejdatamanager# "DataManager"), you can control the number of pages to be cached and duration it should be cached respectively.
Date caching will help you prevent the request to server for already visited pages in Grid using the `enableCaching` property of [`ej.DataManager`](https://help.syncfusion.com/api/js/ejdatamanager "DataManager"). Also using `cachingPageSize` and `timeTillExpiration` properties of [`ej.DataManager`](https://help.syncfusion.com/api/js/ejdatamanager "DataManager"), you can control the number of pages to be cached and duration it should be cached respectively.

N> The cached data will be stored in browser's HTML5 `localStorage`.

Expand Down
2 changes: 1 addition & 1 deletion js/Spreadsheet/Open-and-Save.md
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ Following file types can be opened in Spreadsheet
* XLSX
* CSV

[`Click`](http://js.syncfusion.com/demos/web/#!/azure/spreadsheet/importexport "Click") here to view online demo sample.
[`Click`](https://ej2.syncfusion.com/home/javascript.html#!/azure/spreadsheet/importexport "Click") here to view online demo sample.

* Using [`getExportProps`](https://help.syncfusion.com/api/js/ejspreadsheet#methods:xlexport-getexportprops "getExportProps") method to get the export properties in the Spreadsheet.
You can open excel documents in following ways,
Expand Down
12 changes: 6 additions & 6 deletions js/ToggleButton/Getting-Started.md
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
---
layout: post
title: Getting-Started
description: getting started
title: Getting Started with JavaScript Toggle Botton Control | Syncfusion
description: Learn here all about getting started with Syncfusion Essential JavaScript Toggle Button component, it's elements and more details.
platform: js
control: Toggle Button
documentation: ug
api: /api/js/ejtogglebutton
---

# Getting Started
# Getting Started with JavaScript Toggle Botton Control

This section explains briefly about how to create a **Toggle Button** in your application with **JavaScript.**

## Control structure

The HTML checkbox element can be easily configured as **Essential JavaScript Toggle Button** control. The basic rendering of **Essential JavaScript Toggle Button** is achieved by using default functionality.

![](/js/ToggleButton/Getting-Started_images/Getting-Started_img1.png)
![JavaScript Toggle Button structure.](/js/ToggleButton/Getting-Started_images/javascript-toggle-button-structure.png)



![](/js/ToggleButton/Getting-Started_images/Getting-Started_img2.png)
![JavaScript Toggle Button getting started.](/js/ToggleButton/Getting-Started_images/javascript-toggle-button-getting-started.png)



Expand Down Expand Up @@ -106,7 +106,7 @@ Output of above steps



![](/js/ToggleButton/Getting-Started_images/Getting-Started_img4.png)
![Label element in JavaScript Toggle Button.](/js/ToggleButton/Getting-Started_images/javascript-toggle-button-label.png)