Skip to content

DOCINFRA-2341_merged_using_automation #172

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Dec 16, 2023
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
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,8 @@ In the following sample, the first tile of the color palette represents the no c
{% previewsample "page.domainurl/code-snippet/colorpicker/no-color/default-cs1" %}
{% endif %}

>If the [`noColor`](../../api/color-picker/#nocolor) property is enabled, make sure to disable the [`modeswitcher`](../../api/color-picker/#modeswitcher) property.

## Custom no color

The following sample show the color palette with custom no color option.
Expand Down Expand Up @@ -87,4 +89,4 @@ The following sample show the color palette with custom no color option.
{% endtabs %}

{% previewsample "page.domainurl/code-snippet/colorpicker/no-color/custom-cs1" %}
{% endif %}
{% endif %}
46 changes: 23 additions & 23 deletions ej2-javascript/diagram/js/data-binding.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,15 @@ domainurl: ##DomainURL##

* Diagram exposes its specific data-related properties allowing you to specify the data source fields from where the node information has to be retrieved from.

* The [`dataManager`](../api/diagram/dataSourceModel#datamanager-datamanager) property is used to define the data source either as a collection of objects or as an instance of `DataManager` that needs to be populated in the diagram.
* The [`dataManager`](../api/diagram/dataSourceModel/#datamanager-datamanager) property is used to define the data source either as a collection of objects or as an instance of `DataManager` that needs to be populated in the diagram.

* The [`ID`](../api/diagram/dataSourceModel#id-string) property is used to define the unique field of each JSON data.
* The [`ID`](../api/diagram/dataSourceModel/#id-string) property is used to define the unique field of each JSON data.

* The [`parentId`](../api/diagram/dataSourceModel#parentid-string) property is used to defines the parent field which builds the relationship between ID and parent field.
* The [`parentId`](../api/diagram/dataSourceModel/#parentid-string) property is used to defines the parent field which builds the relationship between ID and parent field.

* The [`root`](../api/diagram/dataSourceModel#root-string) property is used to define the root node for the diagram populated from the data source.
* The [`root`](../api/diagram/dataSourceModel/#root-string) property is used to define the root node for the diagram populated from the data source.

* To explore those properties, see [`DataSourceSettings`](../api/diagram/dataSourceModel).
* To explore those properties, see [`DataSourceSettings`](../api/diagram/dataSourceModel/).

* Diagram supports two types of data binding. They are:

Expand All @@ -34,7 +34,7 @@ domainurl: ##DomainURL##

Diagram can be populated based on the user defined JSON data (Local Data) by mapping the relevant data source fields.

To map the user defined JSON data with diagram, configure the fields of [`dataSourceSettings`](../api/diagram/dataSourceModel). The following code example illustrates how to bind local data with the diagram.
To map the user defined JSON data with diagram, configure the fields of [`dataSourceSettings`](../api/diagram/dataSourceModel/). The following code example illustrates how to bind local data with the diagram.

{% tabs %}
{% highlight js tabtitle="index.js" %}
Expand All @@ -51,11 +51,11 @@ To map the user defined JSON data with diagram, configure the fields of [`dataSo

You can bind the diagram with remote data by using [`dataManager`].

It uses two different classes: `DataManager` for processing and `Query` for serving data. `DataManager` communicates with data source and `Query` generates data queries that are read by the [`dataManager`](../api/diagram/dataSourceModel).
It uses two different classes: `DataManager` for processing and `Query` for serving data. `DataManager` communicates with data source and `Query` generates data queries that are read by the [`dataManager`](../api/diagram/dataSourceModel/).

To learn more about data manager, refer to [`Data Manager`](../api/diagram/dataSourceModel).
To learn more about data manager, refer to [`Data Manager`](../api/diagram/dataSourceModel/).

To bind remote data to the diagram,configure the fields of [`dataSourceSettings`](../api/diagram/dataSourceModel). The following code illustrates how to bind remote data to the diagram.
To bind remote data to the diagram,configure the fields of [`dataSourceSettings`](../api/diagram/dataSourceModel/). The following code illustrates how to bind remote data to the diagram.

{% tabs %}
{% highlight js tabtitle="index.js" %}
Expand All @@ -76,27 +76,27 @@ This feature allows you to read the data source and perform add or edit or delet

* This feature allows you to define the nodes and connectors collection in the data source and connectionDataSource respectively.

* You can set the data collection in the model’s dataSourceSettings [`dataManager`](../api/diagram/dataSourceModel#dataManager) property. The nodes will be generated based on the data specified in the data source.
* You can set the data collection in the model’s dataSourceSettings [`dataManager`](../api/diagram/dataSourceModel/#dataManager) property. The nodes will be generated based on the data specified in the data source.

* You can set the connector collection in the model’s dataSourceSettings [`connectionDataSource`](../api/diagram/dataSourceModel#connectionDataSource) property.
* You can set the connector collection in the model’s dataSourceSettings [`connectionDataSource`](../api/diagram/dataSourceModel/#connectionDataSource) property.

* The dataSourceSettings connectionDataSource [`dataManager`](../api/diagram/connectionDataSourceModel#dataManager) property is used to set the data source for the connection data source items.
* The dataSourceSettings connectionDataSource [`dataManager`](../api/diagram/connectionDataSourceModel/#dataManager) property is used to set the data source for the connection data source items.

* If you have a data (data will be set in the dataSource property) with parent relationship in the database and also defined the connector in the connectionDataSource simultaneously, then the connectors set in the connectionDataSource will be considered as a priority to render the connector.

* The dataSourceSettings [`crudAction’s`](../api/diagram/dataSourceModel#crudAction) [`read`](../api/diagram/crudActionModel#read) property specifies the method, which is used to read the data source and its populate the nodes in the diagram.
* The dataSourceSettings [`crudAction’s`](../api/diagram/dataSourceModel#crudAction) [`read`](../api/diagram/crudActionModel/#read) property specifies the method, which is used to read the data source and its populate the nodes in the diagram.

* The connectionDataSource crudAction’s [`read`](../api/diagram/crudActionModel#read) specifies the method, which is used to read the data source and its populates the connectors in the diagram.
* The connectionDataSource crudAction’s [`read`](../api/diagram/crudActionModel/#read) specifies the method, which is used to read the data source and its populates the connectors in the diagram.

* The dataSourceSettings’s [`id`](../api/diagram/dataSourceModel#id) and connectionDataSource’s [`id`](../api/diagram/connectionDataSourceModel#id) properties are used to define the unique field of each JSON data.
* The dataSourceSettings’s [`id`](../api/diagram/dataSourceModel#id) and connectionDataSource’s [`id`](../api/diagram/connectionDataSourceModel/#id) properties are used to define the unique field of each JSON data.

* The connectionDataSource’s [`sourceID`](../api/diagram/connectionDataSourceModel#sourceID) and [`targetID`](../api/diagram/connectionDataSourceModel#targetID) properties are used to set the sourceID and targetID for connection data source item.
* The connectionDataSource’s [`sourceID`](../api/diagram/connectionDataSourceModel/#sourceID) and [`targetID`](../api/diagram/connectionDataSourceModel/#targetID) properties are used to set the sourceID and targetID for connection data source item.

* The connectionDataSource’s [`sourcePointX`](../api/diagram/connectionDataSourceModel#sourcePointX), [`sourcePointY`](../api/diagram/connectionDataSourceModel#sourcePointY), [`targetPointX`](../api/diagram/connectionDataSourceModel#targetPointX), and [`targetPointY`](../api/diagram/connectionDataSourceModel#targetPointY) properties are used to define the sourcePoint and targetPoint values for connector from data source.
* The connectionDataSource’s [`sourcePointX`](../api/diagram/connectionDataSourceModel/#sourcePointX), [`sourcePointY`](../api/diagram/connectionDataSourceModel/#sourcePointY), [`targetPointX`](../api/diagram/connectionDataSourceModel/#targetPointX), and [`targetPointY`](../api/diagram/connectionDataSourceModel/#targetPointY) properties are used to define the sourcePoint and targetPoint values for connector from data source.

* The dataSourceSettings crudAction’s [`customFields`](../api/diagram/crudActionModel#customFields) property is used to maintain the additional information for nodes.
* The dataSourceSettings crudAction’s [`customFields`](../api/diagram/crudActionModel/#customFields) property is used to maintain the additional information for nodes.

* Similarly, connectionDataSource’s crudAction’s [`customFields`](../api/diagram/crudActionModel#customFields) is used to maintain the additional information for connectors.
* Similarly, connectionDataSource’s crudAction’s [`customFields`](../api/diagram/crudActionModel/#customFields) is used to maintain the additional information for connectors.

## How to perform Editing at runtime

Expand All @@ -106,9 +106,9 @@ This feature allows you to read the data source and perform add or edit or delet

## InsertData

* The dataSourceSettings crudAction’s [`create`](../api/diagram/crudActionModel#create) property specifies the method, which is used to get the nodes added from the client-side to the server-side.
* The dataSourceSettings crudAction’s [`create`](../api/diagram/crudActionModel/#create) property specifies the method, which is used to get the nodes added from the client-side to the server-side.

* The connectionDataSource crudAction’s [`create`](../api/diagram/crudActionModel#create) specifies the method, which is used to get the connectors added from the client-side to the server-side.
* The connectionDataSource crudAction’s [`create`](../api/diagram/crudActionModel/#create) specifies the method, which is used to get the connectors added from the client-side to the server-side.

* The following code example illustrates how to send the newly added or inserted data from the client to server-side.

Expand Down Expand Up @@ -168,9 +168,9 @@ diagram.updateData();

## DeleteData

* The dataSourceSettings crudAction’s [`destroy`](../api/diagram/crudActionModel#destroy) property specifies the method, which is used to get the deleted nodes from the client-side to the server-side.
* The dataSourceSettings crudAction’s [`destroy`](../api/diagram/crudActionModel/#destroy) property specifies the method, which is used to get the deleted nodes from the client-side to the server-side.

* The connectionDataSource crudAction’s [`destroy`](../api/diagram/crudActionModel#destroy) specifies the method, which is used to get the deleted connectors from the client-side to the server-side.
* The connectionDataSource crudAction’s [`destroy`](../api/diagram/crudActionModel/#destroy) specifies the method, which is used to get the deleted connectors from the client-side to the server-side.

```ts

Expand Down
2 changes: 1 addition & 1 deletion ej2-javascript/pdfviewer/how-to/customization.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ domainurl: ##DomainURL##

The PDF Viewer provides API for user interactions options provided in it's built-in toolbar. Using this we can create our own User Interface for toolbar actions in application level by hiding the default toolbar. The following steps are used to create the custom toolbar for PDF Viewer,

**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/javascript/documentation/pdfviewer/getting-started/) to create simple PDF Viewer sample.
**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/javascript/documentation/pdfviewer/getting-started) to create simple PDF Viewer sample.

**Step 2:** Now, add an HTML div element to render the PDF Viewer with custom toolbar using the following code.

Expand Down