Skip to content

Commit f47316d

Browse files
Manikandan-LakshmananManikandan-Lakshmanan
committed
957953: Need to Resplve conflicts in Vue
2 parents b6090fa + d19a5b0 commit f47316d

25 files changed

+540
-241
lines changed

‎ej2-vue-toc.html

+89-87
Large diffs are not rendered by default.

‎ej2-vue/data/applying-middleware-logic.md

+139
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
---
2+
layout: post
3+
title: Applying Middleware logic in Vue DataManager | Syncfusion
4+
description: Learn here all about applying Middleware logic in Syncfusion Vue Data component of Syncfusion Essential JS 2 and more details.
5+
platform: ej2-vue
6+
control: Applying Middleware logic
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Applying Middleware logic in Vue Data control
12+
13+
The Syncfusion<sup style="font-size:70%">&reg;</sup> DataManager allows you to implement middleware logic in your application. It enables you to modify requests and responses before they are sent to the server or processed by the client. This is useful for tasks such as authentication, validation, logging, and response transformation. You can apply middleware using two methods: `applyPreRequestMiddlewares` and `applyPostRequestMiddlewares`. The following sections provide a detailed explanation of these methods.
14+
15+
**Pre-Request Middleware**
16+
17+
The `applyPreRequestMiddlewares` method runs before a request is sent to the back end. It allows you to modify request headers, query parameters, or payloads. This is commonly used for adding authentication tokens, restructuring requests, or validating data before it is sent. The following code snippet demonstrates how to add an authorization token:
18+
19+
```ts
20+
21+
dataManager.applyPreRequestMiddlewares([
22+
async (context) => {
23+
context.request.headers['Authorization'] = 'Bearer your-access-token';
24+
}
25+
]);
26+
27+
```
28+
29+
**Post-Request Middleware**
30+
31+
The `applyPostRequestMiddlewares` method runs after a response is received from the server but before binding the data to a component. It allows you to modify, filter, or restructure response data as needed. The following code snippet demonstrates how to format response data:
32+
33+
```ts
34+
35+
dataManager.applyPostRequestMiddlewares([
36+
async (context) => {
37+
context.response.result = context.response.result.map(item => ({
38+
id: item.Id,
39+
name: item.Name.toUpperCase(),
40+
date: new Date(item.Timestamp).toLocaleDateString()
41+
}));
42+
}
43+
]);
44+
45+
```
46+
47+
**Supported Data Adaptors**
48+
49+
Middleware functions work with various DataManager adaptors, including [WebApiAdaptor](https://ej2.syncfusion.com/vue/documentation/grid/connecting-to-adaptors/web-api-adaptor), [ODataAdaptor](https://ej2.syncfusion.com/vue/documentation/grid/connecting-to-adaptors/odatav4-adaptor), and `CustomAdaptor`. They can be used for both local and remote data processing. By using middleware, you can enhance the flexibility, security, and efficiency of data handling in your applications.
50+
51+
The following code example demonstrates how to use Syncfusion's<sup style="font-size:70%">&reg;</sup> [UrlAdaptor](https://ej2.syncfusion.com/vue/documentation/grid/connecting-to-adaptors/url-adaptor) while applying middleware logic to modify requests and responses. Before sending a request to the back end, the `applyPreRequestMiddlewares` method retrieves an authentication token from an external middleware server and adds it to the request headers. If the middleware server fails to return a valid token, the DataManager failure event is triggered to handle the error.
52+
53+
Similarly, the `applyPostRequestMiddlewares` method processes the response before updating the component. This ensures that any necessary modifications, such as data transformation or filtering, are applied before binding the response to the UI. These middleware methods enhance request handling, improve security, and provide better control over data processing in the applications.
54+
55+
{% tabs %}
56+
{% highlight ts tabtitle="App.Vue" %}
57+
{% raw %}
58+
<template>
59+
<div id="app">
60+
<table class='e-table'>
61+
<tr><th>Order ID</th><th>Customer ID</th><th>Employee ID</th><th>Ship Country</th></tr>
62+
<tr v-for="(item, index) in items" :key="index">
63+
<td>{{ item.OrderID }}</td>
64+
<td>{{ item.CustomerID }}</td>
65+
<td>{{ item.EmployeeID }}</td>
66+
<td>{{ item.ShipCountry }}</td>
67+
</tr>
68+
</table>
69+
</div>
70+
</template>
71+
72+
<script>
73+
import { DataManager, Query, UrlAdaptor} from '@syncfusion/ej2-data';
74+
75+
export default {
76+
data() {
77+
return {
78+
items: []
79+
};
80+
},
81+
mounted() {
82+
let SERVICE_URI = "https://services.syncfusion.com/vue/production/api/UrlDataSource";
83+
let dataManager = new DataManager({
84+
url: SERVICE_URI,
85+
adaptor: new UrlAdaptor()
86+
}).executeQuery(new Query().take(12)).then((e) => {
87+
this.items = e.result;
88+
});
89+
90+
// Method to apply middleware before sending a request to the server.
91+
dataManager.applyPreRequestMiddlewares = async (request) => {
92+
const response = await fetch("https://example.com/api/token", { // Replace with your actual endpoint. This URL is just for example purposes.
93+
method: "POST",
94+
headers: {
95+
"Content-Type": "application/json",
96+
},
97+
});
98+
if (!response.ok) {
99+
throw new Error(`HTTP error! Status: ${response.status}`);
100+
}
101+
return { token: "your_token_value" };
102+
};
103+
104+
dataManager.dataManagerFailure = (e) => {
105+
//Handle DataManager failure event.
106+
};
107+
108+
// Method to apply middleware after receiving a response from the server
109+
dataManager.executeQuery(new Query().take(8)).then((e) => {
110+
this.setState({ items: e.result });
111+
});
112+
}
113+
}
114+
</script>
115+
<style>
116+
.e-table {
117+
border: solid 1px #e0e0e0;
118+
border-collapse: collapse;
119+
font-family: Roboto;
120+
}
121+
122+
.e-table td, .e-table th {
123+
border-style: solid;
124+
border-width: 1px 0 0;
125+
border-color: #e0e0e0;
126+
display: table-cell;
127+
font-size: 14px;
128+
line-height: 20px;
129+
overflow: hidden;
130+
padding: 8px 21px;
131+
vertical-align: middle;
132+
white-space: nowrap;
133+
width: auto;
134+
}
135+
</style>
136+
137+
{% endraw %}
138+
{% endhighlight %}
139+
{% endtabs %}

‎ej2-vue/data/cache.md

+115
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
---
2+
layout: post
3+
title: Cache in Vue DataManager | Syncfusion
4+
description: Learn here all about Cache in Syncfusion Vue Data component of Syncfusion Essential JS 2 and more details.
5+
platform: ej2-vue
6+
control: Cache
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Enable Cache in Vue Data component
12+
13+
The Syncfusion<sup style="font-size:70%">&reg;</sup> DataManager provides the `enableCache` property, which enhances performance by reducing redundant HTTP requests for previously visited pages. When caching is enabled, the [DataManager](https://ej2.syncfusion.com/documentation/api/data/dataManager/) retrieves data from the cache instead of sending a new request, minimizing server load and improving user experience.
14+
15+
**How it works**
16+
17+
* When `enableCache` is set to true, the DataManager generates a unique ID at initialization and uses it to store previously loaded page data in cache memory. This enables efficient data retrieval without redundant server requests.
18+
* The cache is automatically cleared when data actions such as sorting, filtering, grouping, searching, or CRUD operations (Create, Read, Update, Delete) are performed.
19+
* This feature is supported by all adaptors in Syncfusion<sup style="font-size:70%">&reg;</sup> DataManager, ensuring consistent caching behavior across different data sources.
20+
21+
The following example demonstrates how to enable caching using the `enableCache` property in the Syncfusion<sup style="font-size:70%">&reg;</sup> Vue DataManager:
22+
23+
{% tabs %}
24+
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
25+
{% raw %}
26+
27+
<template>
28+
<div id="app">
29+
<ejs-grid :dataSource="data">
30+
<e-columns>
31+
<e-column field='OrderID' headerText='Order ID' width='100' textAlign='Right'></e-column>
32+
<e-column field='CustomerID' headerText='Customer ID' width='100'></e-column>
33+
<e-column field='EmployeeID' headerText='Employee ID' width='100' textAlign='Right'></e-column>
34+
<e-column field="OrderDate" headerText="Order Date" format="yMd" textAlign="Right" width="120"></e-column>
35+
</e-columns>
36+
</ejs-grid>
37+
</div>
38+
</template>
39+
<script setup>
40+
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
41+
import { GridComponent as EjsGrid, ColumnsDirective as EColumns, ColumnDirective as EColumn } from '@syncfusion/ej2-vue-grids';
42+
43+
const data = new DataManager({
44+
url: "https://services.syncfusion.com/vue/production/api/Orders",
45+
adaptor: new WebApiAdaptor(),
46+
crossDomain: true,
47+
enableCache: true // Enables caching to prevent repeated HTTP requests.
48+
});
49+
</script>
50+
<style>
51+
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
52+
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
53+
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
54+
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
55+
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
56+
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
57+
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
58+
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
59+
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
60+
</style>
61+
62+
{% endraw %}
63+
{% endhighlight %}
64+
{% highlight html tabtitle="Options API (~/src/App.vue)" %}
65+
{% raw %}
66+
67+
<template>
68+
<div id="app">
69+
<ejs-grid :dataSource="data">
70+
<e-columns>
71+
<e-column field='OrderID' headerText='Order ID' width='100' textAlign='Right'></e-column>
72+
<e-column field='CustomerID' headerText='Customer ID' width='100'></e-column>
73+
<e-column field='EmployeeID' headerText='Employee ID' width='100' textAlign='Right'></e-column>
74+
<e-column field="OrderDate" headerText="Order Date" format="yMd" textAlign="Right" width="120"></e-column>
75+
</e-columns>
76+
</ejs-grid>
77+
</div>
78+
</template>
79+
<script>
80+
import { GridComponent, ColumnDirective, ColumnsDirective } from "@syncfusion/ej2-vue-grids";
81+
import { DataManager, WebApiAdaptor } from "@syncfusion/ej2-data";
82+
83+
export default {
84+
components: {
85+
'ejs-grid': GridComponent,
86+
'e-column': ColumnDirective,
87+
'e-columns': ColumnsDirective
88+
},
89+
data: () => {
90+
return {
91+
data: new DataManager({
92+
url: "https://services.syncfusion.com/vue/production/api/Orders",
93+
adaptor: new WebApiAdaptor(),
94+
crossDomain: true,
95+
enableCache: true // Enables caching to prevent repeated HTTP requests.
96+
})
97+
};
98+
}
99+
}
100+
</script>
101+
<style>
102+
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
103+
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
104+
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
105+
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
106+
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
107+
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
108+
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
109+
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
110+
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
111+
</style>
112+
113+
{% endraw %}
114+
{% endhighlight %}
115+
{% endtabs %}

‎ej2-vue/getting-started/vue-3-vue-cli-scss.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -174,4 +174,4 @@ Refer the following sample, [vue3-grid-getting-started](https://github.com/Syncf
174174

175175
## See also
176176

177-
* [Getting started with Vue 3 application](https://ej2.syncfusion.com/vue/documentation/getting-started/vue-3-js-composition)
177+
* [Getting started with Vue 3 application](https://ej2.syncfusion.com/vue/documentation/getting-started/vue-3-js-composition)

‎ej2-vue/introduction.md

+7-7
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@ documentation: ug
88
domainurl: ##DomainURL##
99
---
1010

11-
# Syncfusion<sup style="font-size:70%">&reg;</sup> Vue UI Components (Essential<sup style="font-size:70%">&reg;</sup> JS 2)
11+
# Syncfusion Vue UI Components (Essential JS 2)
1212

13-
Syncfusion<sup style="font-size:70%">&reg;</sup> Vue is a modern UI Components library that has been built from the ground up to be lightweight, responsive, modular and touch friendly. It also includes complete support for Angular, React, ASP.NET MVC and ASP.NET Core frameworks.
13+
Syncfusion Vue is a modern UI Components library that has been built from the ground up to be lightweight, responsive, modular and touch friendly. It also includes complete support for Angular, React, ASP.NET MVC and ASP.NET Core frameworks.
1414

1515
## Components list
1616

17-
The Syncfusion<sup style="font-size:70%">&reg;</sup> Vue UI components are listed below.
17+
The Syncfusion Vue UI components are listed below.
1818

1919
<style>
2020

@@ -140,7 +140,7 @@ letter-spacing: 0.7px;
140140
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/vue/documentation/signature/getting-started/">Signature</a></div>
141141
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/vue/documentation/rating/getting-started/">Rating</a></div>
142142
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/vue/documentation/otp-input/getting-started">OTP Input</a></div>
143-
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/vue/documentation/speech-to-text/getting-started">Speech To Text</a></div>
143+
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/vue/documentation/speech-to-text/getting-started">Speech To Text</a></div>
144144
<div><p class="control-category">FORMS</p></div>
145145
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/vue/documentation/query-builder/getting-started/">Query Builder</a></div>
146146
</td>
@@ -192,12 +192,12 @@ letter-spacing: 0.7px;
192192

193193
If you are still not able to find the information that you are looking for at the self-help resources mentioned above then please contact us by creating a support ticket in our support site, or ask your query in StackOverflow with tag `syncfusion-ej2`.
194194

195-
>Note: Syncfusion<sup style="font-size:70%">&reg;</sup> does not collect any kind of information when our components are used in customer applications.
195+
>Note: Syncfusion does not collect any kind of information when our components are used in customer applications.
196196
197197
## See also
198198

199199
* [Product Development Life Cycle](https://www.syncfusion.com/support/product-lifecycle/)
200200

201-
* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Vue UI Components](https://ej2.syncfusion.com/vue/documentation/getting-started/tutorial/)
201+
* [Getting Started with Syncfusion Vue UI Components](https://ej2.syncfusion.com/vue/documentation/getting-started/tutorial/)
202202

203-
* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Vue UI Components in Vue 3](https://ej2.syncfusion.com/vue/documentation/getting-started/vue3-tutorial/)
203+
* [Getting Started with Syncfusion Vue UI Components in Vue 3](https://ej2.syncfusion.com/vue/documentation/getting-started/vue3-tutorial/)

‎ej2-vue/rich-text-editor/accessibility.md

+7-7
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ documentation: ug
88
domainurl: ##DomainURL##
99
---
1010

11-
# Accessibility in Vue Rich text editor component
11+
# Accessibility in Vue Rich Text Editor Component
1212

1313
The Rich Text Editor component is designed with accessibility in mind, adhering to WAI-ARIA specifications and implementing ARIA roles, states, and properties. This ensures full accessibility support, making it user-friendly for people who rely on assistive technologies (AT) or keyboard navigation.
1414

@@ -39,15 +39,15 @@ The accessibility compliance for the Rich Text Editor component is outlined belo
3939

4040
<div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="No"> - The component does not meet the requirement.</div>
4141

42-
## ARIA Attributes
42+
## ARIA attributes
4343

4444
The toolbar in the Rich Text Editor is assigned the role of 'Toolbar' and includes the following attributes.
4545

4646
| **Property** | **Functionalities** |
4747
| --- | --- |
4848
| role="toolbar" | This attribute added to the ToolBar element describes the actual role of the element. |
4949
| aria-orientation | Indicates the ToolBar orientation. Default value is `horizontal`. |
50-
| aria-haspopup | Indicates the popup mode of the Toolbar. Default value is false. When popup mode is enabled, attribute value has to be changed to `true`. |
50+
| aria-haspopup | Indicates the popup mode of the Toolbar. Default value is false. When popup mode is enabled, attribute value has to be changed to `true`. |
5151
| aria-disabled | Indicates the disabled state of the toolbar. |
5252
| aria-owns | Identifies an element to define a visual, functional, or contextual parent/child relationship between DOM elements when the DOM hierarchy cannot represent the relationship. In the Rich Text Editor, the attribute contains the ID of the Rich Text Editor to indicate the popup as a child element. |
5353

@@ -71,13 +71,13 @@ For more details on Toolbar ARIA attributes, refer to the [`Accessibility of Too
7171

7272
{% previewsample "page.domainurl/code-snippet/rich-text-editor/getting-started-cs1" %}
7373

74-
## Keyboard Navigation
74+
## Keyboard navigation
7575

7676
The Rich Text Editor component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Rich Text Editor component.
7777

7878
For more details on keyboard navigation, refer to the [Keyboard support](https://ej2.syncfusion.com/vue/documentation/rich-text-editor/keyboard-support) documentation.
7979

80-
### Customizing Shortcut Keys
80+
### Customizing shortcut keys
8181

8282
You can customize shortcut keys using the [formatter](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/#formatter) property.This allows you to configure custom key combinations for various actions in the Rich Text Editor. For example, you can set `ctrl+q` to open the `Insert Hyperlink` dialog.
8383

@@ -94,14 +94,14 @@ You can customize shortcut keys using the [formatter](https://ej2.syncfusion.com
9494

9595
> We need to import `IHtmlFormatterModel` and `HTMLFormatter` to configure the shortcut key.
9696
97-
## Implementing Accessibility Best Practices
97+
## Implementing accessibility best practices
9898

9999
The Rich Text Editor component's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing.
100100

101101
The accessibility compliance of the Rich Text Editor component is shown in the following sample. Open the [sample](https://ej2.syncfusion.com/accessibility/rich-text-editor.html) in a new window to evaluate the accessibility of the Rich Text Editor component with accessibility tools.
102102

103103
{% previewsample "https://ej2.syncfusion.com/accessibility/rich-text-editor.html" %}
104104

105-
## See Also
105+
## See also
106106

107107
* [General Accessibility Guidelines](../common/accessibility)

0 commit comments

Comments
 (0)