Skip to content

Commit eea407c

Browse files
NithyaSivaprakasamNithyaSivaprakasam
committed
Added readme files for all samples
1 parent 4f48ce5 commit eea407c

File tree

9 files changed

+255
-21
lines changed

9 files changed

+255
-21
lines changed

‎GraphQLAdaptor/README.md‎

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,45 @@
1-
# Performing-data-and-CRUD-operations-in-ej2-typescript-grid-using-GraphQLAdaptor
1+
# Connecting GraphQL Service with Typescript Grid Control
22

3-
Discover seamless data integration with Syncfusion's EJ2 TypeScript Grid using GraphQLAdaptor in this sample repository. Explore efficient techniques for handling filtering, sorting, paging operations, and CRUD operations within your TypeScript applications, empowering you to manage and display data effectively.
3+
GraphQL is a powerful query language for APIs, designed to provide a more efficient alternative to traditional REST APIs. It allows you to precisely fetch the data you need, reducing over-fetching and under-fetching of data. GraphQL provides a flexible and expressive syntax for querying, enabling clients to request only the specific data they require.
44

5-
## Add Syncfusion Grid control in your application
5+
Syncfusion’s Grid component seamlessly integrates with GraphQL servers using the GraphQLAdaptor in the DataManager. This specialized adaptor simplifies the interaction between the Syncfusion Grid and GraphQL servers, allowing efficient data retrieval with support for various operations like CRUD (Create, Read, Update, Delete), paging, sorting, and filtering.
66

7-
Refer the following UG documenation for adding Syncfusion TypeScript control in your application
8-
* [Getting Started of Syncfusion TypeScript Grid control](https://ej2.syncfusion.com/typescript/documentation/grid/getting-started)
7+
## Add Syncfusion Grid component in your application
8+
9+
Refer the following UG documenation for adding Syncfusion Grid component in your application
10+
* [Getting Started of Syncfusion TypeScript Grid component](https://ej2.syncfusion.com/documentation/grid/getting-started)
911

1012
## GraphQL Server setup
1113

1214
You can setup GraphQL server by using `graphpack` npm package. Find the following link for getting more details for your reference.
13-
[`https://www.npmjs.com/package/graphpack`](https://www.npmjs.com/package/graphpack)
15+
16+
* [graphpack npm package](https://www.npmjs.com/package/graphpack)
1417

1518
## Run the GraphQL Server
16-
To run the server, you need to install the required pacakges using the below command
19+
20+
To run the server, install the required packages using the following command:
21+
1722
```bash
1823
npm install
1924
```
20-
and run using
25+
Then, start the server with:
2126
```bash
2227
npm run dev
2328
```
2429
## Run the client Grid application
25-
To run the client, you need to install the required pacakges using the below command
26-
```
27-
npm install
28-
```
29-
and run using
30-
```
30+
31+
To run the client-side Syncfusion Grid application, use the following command:
32+
33+
```bash
3134
npm start
3235
```
33-
Now the Grid will be launched in the browser `http://localhost:xxxx/`.
36+
37+
![GraphQLAdaptor](../assets/images/adaptor-crud-operation.gif)
3438

3539
## Resources
3640

37-
You can also refer the below resources to know more details about Syncfusion TypeScript Grid control.
38-
* [Demo](https://ej2.syncfusion.com/typescript/demos/#/material3/grid/over-view)
39-
* [Documentation](https://ej2.syncfusion.com/typescript/documentation/grid/getting-started)
40-
* [GraphQL with Syncfusion DataManager](https://ej2.syncfusion.com/typescript/documentation/grid/connecting-to-adaptors/graphql-adaptor)
41+
You can also refer the below resources to know more details about Syncfusion Typescript Grid Control.
42+
43+
* [Demo](https://ej2.syncfusion.com/demos/#/bootstrap/grid/over-view)
44+
* [Documentation](https://ej2.syncfusion.com/documentation/grid/getting-started)
45+
* [GraphQL with Syncfusion DataManager](https://ej2.syncfusion.com/documentation/grid/connecting-to-adaptors/graphql-adaptor)

‎ODataV4Adaptor/README.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# ODataV4Adaptor in Syncfusion Grid Component
2+
3+
The ODataV4Adaptor in the Syncfusion Grid Component allows seamless integration of the Grid with OData v4 services, enabling efficient data fetching and manipulation. This guide provides detailed instructions on binding data and performing CRUD (Create, Read, Update, Delete) actions using the ODataV4Adaptor in your Syncfusion Grid Component.
4+
5+
## Getting Started
6+
7+
**1. Clone the Repository:**
8+
9+
Use `git clone` to fetch the repository from GitHub.
10+
11+
```bash
12+
https://github.com/SyncfusionExamples/Binding-data-from-remote-service-to-typescript-data-grid.git
13+
```
14+
15+
**2. Open and Build the Project:**
16+
17+
* Open the project in Visual Studio.
18+
* Build the project to restore dependencies and compile it.
19+
* Run the project
20+
21+
**3. Explore the Code:**
22+
23+
* Navigate to TypeScript files (typically in src or scripts).
24+
* Debug and interact with the code as needed.
25+
26+
![Adaptors](../assets/images/adaptor-crud-operation.gif)
27+
28+
## Resources
29+
30+
You can also refer the below resources to know more details about Syncfusion Typescript Grid components.
31+
32+
* [Demo](https://ej2.syncfusion.com/demos/#/bootstrap/grid/over-view)
33+
* [Documentation](https://ej2.syncfusion.com/documentation/grid/getting-started)
34+
* [GraphQL with Syncfusion DataManager](https://ej2.syncfusion.com/documentation/grid/connecting-to-adaptors/odatav4-adaptor)

‎README.md‎

Lines changed: 60 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,60 @@
1-
# Binding-data-from-remote-service-to-typescript-data-grid
2-
Discover seamless remote data integration with Syncfusion EJ2 Typescript Grid in this sample repository. Explore efficient techniques for handling filtering, sorting, paging operations, and CRUD operations within your Typescript applications, empowering you to manage and display data effectively.
1+
# Binding data from remote service to TypeScript data grid
2+
3+
## Overview
4+
5+
This repository demonstrates how to bind data from various remote services to a Syncfusion Essential JS 2 (EJ2) TypeScript Data Grid. It provides examples for integrating data using different adaptors and showcases techniques for handling filtering, sorting, paging, and CRUD operations within TypeScript applications. By exploring this repository, you will learn how to efficiently manage and display data in your applications.
6+
7+
## Features
8+
9+
**Remote Data Integration:** Seamlessly bind data from various remote services to the Syncfusion EJ2 TypeScript Grid.
10+
11+
**Data Operations:** Handle filtering, sorting, and paging operations with ease.
12+
13+
**CRUD Operations:** Implement Create, Read, Update, and Delete operations.
14+
15+
**Adaptors:** Examples of different adaptors to integrate remote data:
16+
* UrlAdaptor
17+
* WebApiAdaptor
18+
* WebMethodAdaptor
19+
* ODataV4Adaptor
20+
* GraphQLAdaptor
21+
* RemoteSaveAdaptor
22+
23+
## Prerequisites
24+
25+
Before you begin, ensure you have met the following requirements:
26+
27+
* Node.js and npm installed
28+
29+
* Basic knowledge of TypeScript and web development
30+
31+
## Getting Started
32+
33+
**1. Clone the Repository:**
34+
35+
Use `git clone` to fetch the repository from GitHub.
36+
37+
```bash
38+
https://github.com/SyncfusionExamples/Binding-data-from-remote-service-to-typescript-data-grid.git
39+
```
40+
41+
**2. Open and Build the Project:**
42+
43+
* Open the project in Visual Studio.
44+
* Build the project to restore dependencies and compile it.
45+
* Run the project
46+
47+
**3. Explore the Code:**
48+
49+
* Navigate to TypeScript files (typically in src or scripts).
50+
* Debug and interact with the code as needed.
51+
52+
![Adaptors](./assets/images/adaptor-crud-operation.gif)
53+
54+
## Resources
55+
56+
You can also refer the below resources to know more details about Syncfusion Typescript Grid components.
57+
58+
* [Demo](https://ej2.syncfusion.com/demos/#/bootstrap/grid/over-view)
59+
* [Documentation](https://ej2.syncfusion.com/documentation/grid/getting-started)
60+
* [GraphQL with Syncfusion DataManager](https://ej2.syncfusion.com/documentation/grid/connecting-to-adaptors)

‎RemoteSaveAdaptor/README.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# Binding and perform CRUD operation using RemoteSaveAdaptor
2+
3+
The RemoteSaveAdaptor in Syncfusion Grid Component allows you to perform grid actions such as sorting, filtering, searching and paging primarily on the client-side while handling CRUD operations, such as updating, inserting, and removing data, on the server-side for data persistence. This approach optimizes your experience by minimizing unnecessary server interactions.
4+
5+
6+
**1. Clone the Repository:**
7+
8+
Use `git clone` to fetch the repository from GitHub.
9+
10+
```bash
11+
https://github.com/SyncfusionExamples/Binding-data-from-remote-service-to-typescript-data-grid.git
12+
```
13+
14+
**2. Open and Build the Project:**
15+
16+
* Open the project in Visual Studio.
17+
* Build the project to restore dependencies and compile it.
18+
* Run the project
19+
20+
**3. Explore the Code:**
21+
22+
* Navigate to TypeScript files (typically in src or scripts).
23+
* Debug and interact with the code as needed.
24+
25+
![Adaptors](../assets/images/adaptor-crud-operation.gif)
26+
27+
## Resources
28+
29+
You can also refer the below resources to know more details about Syncfusion Typescript Grid components.
30+
31+
* [Demo](https://ej2.syncfusion.com/demos/#/bootstrap/grid/over-view)
32+
* [Documentation](https://ej2.syncfusion.com/documentation/grid/getting-started)
33+
* [GraphQL with Syncfusion DataManager](https://ej2.syncfusion.com/documentation/grid/connecting-to-adaptors/remote-save-adaptor)

‎UrlAdaptor/README.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# UrlAdaptor in Syncfusion Grid Component
2+
3+
The UrlAdaptor serves as the base adaptor for facilitating communication between remote data services and an UI component. It enables seamless data binding and interaction with custom API services or any remote service through URLs. The UrlAdaptor is particularly useful for the scenarios where a custom API service with unique logic for handling data and CRUD operations is in place. This approach allows for custom handling of data and CRUD operations, and the resultant data returned in the result and count format for display in the Syncfusion Grid component.
4+
5+
## Getting Started
6+
7+
**1. Clone the Repository:**
8+
9+
Use `git clone` to fetch the repository from GitHub.
10+
11+
```bash
12+
https://github.com/SyncfusionExamples/Binding-data-from-remote-service-to-typescript-data-grid.git
13+
```
14+
15+
**2. Open and Build the Project:**
16+
17+
* Open the project in Visual Studio.
18+
* Build the project to restore dependencies and compile it.
19+
* Run the project
20+
21+
**3. Explore the Code:**
22+
23+
* Navigate to TypeScript files (typically in src or scripts).
24+
* Debug and interact with the code as needed.
25+
26+
![Adaptors](../assets/images/adaptor-crud-operation.gif)
27+
28+
## Resources
29+
30+
You can also refer the below resources to know more details about Syncfusion Typescript Grid components.
31+
32+
* [Demo](https://ej2.syncfusion.com/demos/#/bootstrap/grid/over-view)
33+
* [Documentation](https://ej2.syncfusion.com/documentation/grid/getting-started)
34+
* [GraphQL with Syncfusion DataManager](https://ej2.syncfusion.com/documentation/grid/connecting-to-adaptors/url-adaptor)

‎WebApiAdaptor/README.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# WebApiAdaptor in Syncfusion Grid Component
2+
3+
The WebApiAdaptor is an extension of the ODataAdaptor, designed to interact with Web APIs created with OData endpoints. This adaptor ensures seamless communication between Syncfusion Grid and OData-endpoint based Web APIs, enabling efficient data retrieval and manipulation. For successful integration, the endpoint must be capable of understanding OData-formatted queries sent along with the request.
4+
5+
## Getting Started
6+
7+
**1. Clone the Repository:**
8+
9+
Use `git clone` to fetch the repository from GitHub.
10+
11+
```bash
12+
https://github.com/SyncfusionExamples/Binding-data-from-remote-service-to-typescript-data-grid.git
13+
```
14+
15+
**2. Open and Build the Project:**
16+
17+
* Open the project in Visual Studio.
18+
* Build the project to restore dependencies and compile it.
19+
* Run the project
20+
21+
**3. Explore the Code:**
22+
23+
* Navigate to TypeScript files (typically in src or scripts).
24+
* Debug and interact with the code as needed.
25+
26+
![Adaptors](../assets/images/adaptor-crud-operation.gif)
27+
28+
## Resources
29+
30+
You can also refer the below resources to know more details about Syncfusion Typescript Grid components.
31+
32+
* [Demo](https://ej2.syncfusion.com/demos/#/bootstrap/grid/over-view)
33+
* [Documentation](https://ej2.syncfusion.com/documentation/grid/getting-started)
34+
* [GraphQL with Syncfusion DataManager](https://ej2.syncfusion.com/documentation/grid/connecting-to-adaptors/web-api-adaptor)

‎WebMethodAdaptor/README.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# WebMethodAdaptor in Syncfusion Grid Component
2+
3+
The WebMethodAdaptor in Syncfusion Grid facilitates data binding from remote services using web methods. This powerful feature enables efficient communication between the client-side application and the server. The WebMethodAdaptor, like the URL adaptor, sends query parameters encapsulated within an object named value. Within this value object, various datamanager properties such as requiresCounts, skip, take, sorted, and where queries are included.
4+
5+
[WebMethodAdaptor](../assets/images/web-method-adaptor-value.png)
6+
7+
## Getting Started
8+
9+
**1. Clone the Repository:**
10+
11+
Use `git clone` to fetch the repository from GitHub.
12+
13+
```bash
14+
https://github.com/SyncfusionExamples/Binding-data-from-remote-service-to-typescript-data-grid.git
15+
```
16+
17+
**2. Open and Build the Project:**
18+
19+
* Open the project in Visual Studio.
20+
* Build the project to restore dependencies and compile it.
21+
* Run the project
22+
23+
**3. Explore the Code:**
24+
25+
* Navigate to TypeScript files (typically in src or scripts).
26+
* Debug and interact with the code as needed.
27+
28+
![Adaptors](../assets/images/adaptor-crud-operation.gif)
29+
30+
## Resources
31+
32+
You can also refer the below resources to know more details about Syncfusion Typescript Grid components.
33+
34+
* [Demo](https://ej2.syncfusion.com/demos/#/bootstrap/grid/over-view)
35+
* [Documentation](https://ej2.syncfusion.com/documentation/grid/getting-started)
36+
* [GraphQL with Syncfusion DataManager](https://ej2.syncfusion.com/documentation/grid/connecting-to-adaptors/web-method-adaptor)

‎assets/images/adaptor-crud-operation.gif‎

439 KB
Loading

‎assets/images/web-method-adaptor-value.png‎

39.8 KB
Loading

0 commit comments

Comments
 (0)