{"id":23061420,"url":"https://github.com/syncfusionexamples/binding-data-from-remote-service-to-angular-data-grid","last_synced_at":"2026-05-10T06:51:25.252Z","repository":{"id":238826377,"uuid":"787918885","full_name":"SyncfusionExamples/Binding-data-from-remote-service-to-angular-data-grid","owner":"SyncfusionExamples","description":"Discover seamless remote data integration with Syncfusion's EJ2 Angular Grid in this sample repository. Explore efficient techniques for handling filtering, sorting, paging operations, and CRUD operations within your Angular applications, empowering you to manage and display data effectively.","archived":false,"fork":false,"pushed_at":"2024-06-03T10:21:56.000Z","size":82,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-08T20:48:09.754Z","etag":null,"topics":["adaptors","angular","customadaptor","datagrid","ej2","graphql","graphqladaptor","grid","odata","odataadaptor","odatav4","odatav4adaptor","remotedata","remotesaveadaptor","syncfusion","urladaptor","webapi","webapiadaptor","webmethodadaptor"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SyncfusionExamples.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-17T12:37:48.000Z","updated_at":"2024-06-03T09:54:40.000Z","dependencies_parsed_at":"2024-05-08T11:28:46.390Z","dependency_job_id":"d81f7de9-cab7-485c-9352-bdb624185544","html_url":"https://github.com/SyncfusionExamples/Binding-data-from-remote-service-to-angular-data-grid","commit_stats":null,"previous_names":["syncfusionexamples/binding-data-from-remote-service-to-angular-data-grid"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2FBinding-data-from-remote-service-to-angular-data-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2FBinding-data-from-remote-service-to-angular-data-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2FBinding-data-from-remote-service-to-angular-data-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2FBinding-data-from-remote-service-to-angular-data-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SyncfusionExamples","download_url":"https://codeload.github.com/SyncfusionExamples/Binding-data-from-remote-service-to-angular-data-grid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246952281,"owners_count":20859813,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["adaptors","angular","customadaptor","datagrid","ej2","graphql","graphqladaptor","grid","odata","odataadaptor","odatav4","odatav4adaptor","remotedata","remotesaveadaptor","syncfusion","urladaptor","webapi","webapiadaptor","webmethodadaptor"],"created_at":"2024-12-16T03:17:27.294Z","updated_at":"2026-05-10T06:51:25.184Z","avatar_url":"https://github.com/SyncfusionExamples.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Binding Data from Remote Services to Angular DataGrid\n\n## Repository Description\n\nThis repository contains a collection of Angular DataGrid samples that demonstrate how to bind data from various remote services using Syncfusion’s EJ2 Angular Grid. Each sample focuses on a specific adaptor or communication pattern commonly used in real-world enterprise applications.\n\nThe repository is designed as a **multi-sample workspace**, where each folder represents an independent client–server setup. These samples should be run individually by navigating to the appropriate server and client projects.\n\n## Project Overview\n\nThe Syncfusion EJ2 Angular Grid supports powerful data operations such as paging, sorting, filtering, and CRUD actions when working with remote data. This repository demonstrates how these operations are handled using different adaptors and backend technologies.\n\nEach sample includes:\n\n- A **server project** that exposes data using a specific protocol or API pattern\n- An **Angular client application** that consumes the remote data using the corresponding Syncfusion DataManager adaptor\n\nThe goal is to provide clear, isolated references for implementing remote data binding in Angular applications without mixing multiple approaches in a single setup.\n\n## Included Samples\n\nThe repository includes the following adaptor-based samples:\n\n- **UrlAdaptor** – Basic HTTP-based data operations using custom endpoints\n- **WebApiAdaptor** – ASP.NET Core Web API integration with standard REST patterns\n- **WebMethodAdaptor** – Data binding using controller web methods\n- **ODataV4Adaptor** – Integration with OData v4 services\n- **RemoteSaveAdaptor** – Server-side CRUD operations with remote save handling\n- **GraphQLAdaptor** – Data binding using a GraphQL server and Angular client\n\nEach sample is self-contained and has its own server and client projects.\n\n## Prerequisites\n\nEnsure the following tools are installed before running any sample:\n\n- Node.js (LTS version recommended)\n- Angular CLI\n- .NET SDK (for ASP.NET Core server projects)\n- Visual Studio or Visual Studio Code\n\n## Running the Samples\n\nClone the repository and navigate to the project directory:\n\n```bash\ngit clone https://github.com/SyncfusionExamples/Binding-data-from-remote-service-to-angular-data-grid.git\n```\n\nIn this repository, each sample must be executed independently by starting its server and client projects separately.\n\n### General Execution Flow\n\nFor every sample, follow this sequence:\n\n1. Start the **server project**\n2. Start the **Angular client project**\n3. Access the Angular application in the browser\n\n### Example: UrlAdaptor Sample\n\n1. Navigate to the server project:\n\n   ```bash\n   cd UrlAdaptor/UrlAdaptor.Server\n   dotnet run\n   ```\n\n   This starts the ASP.NET Core server that exposes grid data endpoints.\n\n2. Open a new terminal and navigate to the Angular client:\n\n   ```bash\n   cd UrlAdaptor/urladaptor.client\n   npm install\n   ng serve\n   ```\n\n3. Open the displayed local URL in a browser to view the Angular DataGrid bound to remote data.\n\n### Other Samples\n\nThe same execution pattern applies to the following folders:\n\n- `WebApiAdaptor`\n- `WebMethodAdaptor`\n- `ODataV4Adaptor`\n- `RemoteSaveAdaptor`\n\nEach of these contains:\n\n- A `.Server` folder for the ASP.NET Core backend\n- A `.client` folder for the Angular frontend\n\n### GraphQL Adaptor Sample\n\nThe GraphQL sample includes an additional Node.js-based GraphQL server.\n\n1. Start the GraphQL server:\n\n   ```bash\n   cd GraphQLAdaptor/GraphQLServer\n   npm install\n   npm start\n   ```\n\n2. Start the Angular client:\n\n   ```bash\n   cd GraphQLAdaptor/GridClient\n   npm install\n   ng serve\n   ```\n\n## Usage Notes\n\n- All grid operations such as paging, sorting, filtering, and CRUD are processed remotely\n- The Syncfusion DataManager automatically maps grid actions to server requests\n- Proxy configurations are used in some Angular clients to route API calls during development\n\n## Additional Resources\n\n- [Syncfusion Grid Connecting to Adaptors](https://ej2.syncfusion.com/angular/documentation/grid/connecting-to-adaptors)\n- [Syncfusion Angular Grid Documentation](https://ej2.syncfusion.com/angular/documentation/grid/getting-started)\n- [Syncfusion Angular Grid Demos](https://ej2.syncfusion.com/angular/demos)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyncfusionexamples%2Fbinding-data-from-remote-service-to-angular-data-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsyncfusionexamples%2Fbinding-data-from-remote-service-to-angular-data-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyncfusionexamples%2Fbinding-data-from-remote-service-to-angular-data-grid/lists"}