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
44 changes: 22 additions & 22 deletions Angular/README.md
Original file line number Diff line number Diff line change
@@ -1,37 +1,37 @@
# Angular DevExtreme Example

For more information about this example check the [Readme](../README.md).
Review the following file for the implementation overview: [Readme](../README.md).

## Prerequisite
## Start the Server

[ODataServer](../ODataServer) must be running on port 5005.
Start the [ODataServer](../ODataServer) before you run the application. This example is configured to access the ODataServer at port 5005. To change this configuration, update the following line: [app.component.ts#L13](/Angular/src/app/app.component.ts#L13)

## Build and Lint

Install dependencies:
```sh
npm install
```
- Install dependencies:
```sh
npm install
```

Start dev server:
```sh
npm start
```
Open: http://localhost:4200/
Start the dev server:
```sh
npm start
```
The dev server runs at the following URL: http://localhost:4200/

Build production bundle:
```sh
npm run build
```
- Build a production bundle:
```sh
npm run build
```

Run linter:
```sh
npm run lint
```
- Run linter:
```sh
npm run lint
```

## Further help
## Helpful Resources

Angular CLI docs: https://angular.dev/tools/cli
DevExtreme Angular docs: https://js.devexpress.com/Angular/Documentation

To get more help with DevExtreme, submit a ticket through the [Support Center](https://supportcenter.devexpress.com/ticket/create).
If you still have questions, please contact us via the DevExpress [Support Center](https://supportcenter.devexpress.com/ticket/create).
21 changes: 8 additions & 13 deletions ODataServer/README.md
Original file line number Diff line number Diff line change
@@ -1,23 +1,18 @@
# ODataServer

An [ASP.NET Core OData 8](https://learn.microsoft.com/en-us/odata/webapi-8/overview) project that provides OData endpoints for querying data.

## Overview

This server exposes product data through OData endpoints, enabling advanced querying capabilities such as filtering, sorting, selecting specific fields, and more through standardized OData query options.
This [ASP.NET Core OData 8](https://learn.microsoft.com/en-us/odata/webapi-8/overview) application creates OData endpoints to expose sample data. You can use standardized OData queries to access and filter, select, and sort data.

## Features

- **OData Protocol** - Standards-compliant REST API with full OData support
- **OData Protocol** - OData-compliant REST API
- **CORS enabled** - Allows cross-origin requests from client applications
- **Port 5005** - Runs on HTTP port 5005 and HTTPS port 5006

## Project Structure

```
ODataServer/
├── Controllers/
│ └── ProductsController.cs # OData controller for Products entity
│ └── ProductsController.cs # OData controller for the Products entity
├── Models/
│ ├── Product.cs # Product entity model
│ └── SampleData.cs # Sample product data
Expand All @@ -28,19 +23,19 @@ ODataServer/

## Configuration

The OData service is configured in `Program.cs` with the following features:
`Program.cs` configures the OData service and implements the following features:

- **Entity Sets**: Products
- **Query Options**: `$select`, `$filter`, `$orderby`, `$expand`, `$count`, `$top`
- **CORS**: Configured to allow requests from `http://localhost:5050`
- **CORS**: Allows requests from `http://localhost:5050`

## Running the Server
## Run the Server

```bash
dotnet run
```

The server will start on:
The server starts at the following URLs:
- HTTP: http://localhost:5005
- HTTPS: https://localhost:5006

Expand All @@ -50,4 +45,4 @@ Access the OData service at:

## CORS Policy

The server allows requests from `http://localhost:5050` with all methods and headers. This is configured for development purposes. For production, update the CORS policy in `Program.cs` to restrict allowed origins as needed.
The server allows all requests from `http://localhost:5050` (all methods and headers). Use this configuration for development purposes only. In production, update the CORS policy in `Program.cs` to restrict allowed origins as needed.
57 changes: 29 additions & 28 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,57 +1,58 @@
<!-- default badges list -->
![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/1099673152/25.1.2%2B)
[![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T1314126)
[![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183)
[![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives)
<!-- default badges end -->
# DataGrid for DevExtreme - How to bind DataGrid to an OData Service
# DevExtreme DataGrid - Bind to an OData Service

This example demonstrates how to bind the DevExtreme DataGrid component to an OData v4 service. It shows how to configure the ODataStore for server-side data operations including filtering, selecting specific fields, and querying product data.
This example binds the DevExtreme DataGrid component to an OData v4 service. The ODataStore is configured to run server-side data operations including filtering, record selection, and sorting.

## Implementation Overview
## Implementation Details

### OData Server Setup
### Setup the OData Server

This example includes a pre-configured ASP.NET Core OData server (see [ODataServer](/ODataServer/)) that exposes product data through a standardized REST API. The server runs on `http://localhost:5005` and provides the `/odata/Products` endpoint.
This example includes a pre-configured ASP.NET Core OData server (see [ODataServer](/ODataServer/)) that uses OData REST APIs to expose sample data. The server runs at `http://localhost:5005` and creates the following endpoint: `/odata/Products`.

### DataGrid Configuration
### Configure the DataGrid

All framework implementations follow the same pattern:
All framework projects share the same implementation:

1. Create an [ODataStore](https://js.devexpress.com/Documentation/ApiReference/Data_Layer/ODataStore/). Use its properties to specify the service's [url](https://js.devexpress.com/Documentation/ApiReference/Data_Layer/ODataStore/Configuration/#url), [key](https://js.devexpress.com/Documentation/ApiReference/Data_Layer/ODataStore/Configuration/#key) data field, and OData [version](https://js.devexpress.com/Documentation/ApiReference/Data_Layer/ODataStore/Configuration/#version).
2. You can configure **ODataStore** as a standalone element (see [OData](https://js.devexpress.com/Documentation/Guide/Data_Binding/Specify_a_Data_Source/OData/) for details), but this examples uses a [DataSource](https://js.devexpress.com/Documentation/ApiReference/Data_Layer/DataSource/) to demonstrate data [filtering](https://js.devexpress.com/Documentation/ApiReference/Data_Layer/DataSource/Configuration/#filter) and data fields [selection](https://js.devexpress.com/Documentation/ApiReference/Data_Layer/DataSource/Configuration/#select).
1. Create an [ODataStore](https://js.devexpress.com/Documentation/ApiReference/Data_Layer/ODataStore/). Specify the service [url](https://js.devexpress.com/Documentation/ApiReference/Data_Layer/ODataStore/Configuration/#url), [key](https://js.devexpress.com/Documentation/ApiReference/Data_Layer/ODataStore/Configuration/#key) data field, and OData [version](https://js.devexpress.com/Documentation/ApiReference/Data_Layer/ODataStore/Configuration/#version).
2. You can configure a standalone **ODataStore** service (see [OData](https://js.devexpress.com/Documentation/Guide/Data_Binding/Specify_a_Data_Source/OData/) for details), but this examples uses a [DataSource](https://js.devexpress.com/Documentation/ApiReference/Data_Layer/DataSource/) to implement data [filtering](https://js.devexpress.com/Documentation/ApiReference/Data_Layer/DataSource/Configuration/#filter) and [selection](https://js.devexpress.com/Documentation/ApiReference/Data_Layer/DataSource/Configuration/#select) operations.
3. [Bind the DataGrid](https://js.devexpress.com/Documentation/Guide/UI_Components/DataGrid/Getting_Started_with_DataGrid/#Bind_the_DataGrid_to_Data) to the data source.

## Running the Example
## Run the Example

**For Angular, React, Vue, and jQuery:**
### Angular, React, Vue, and jQuery

1. **Start the OData Server:**
```bash
cd ODataServer
dotnet run
```
The server will be available at `http://localhost:5005`.
1. **Start the OData Server**
Execute the following command to start the OData server:

2. **Run the Client Application:**

Choose your preferred framework and follow its setup:
```bash
cd ODataServer
dotnet run
```

The server is available at the following URL: `http://localhost:5005`.

2. **Run the Client Application**
Execute one of the following commands to run the client application:

- **Angular:** `cd Angular && npm install && npm start`
- **React:** `cd React && npm install && npm run dev`
- **Vue:** `cd Vue && npm install && npm run dev`
- **jQuery:** `cd jQuery && npm install && npm start`
- **Angular:** `cd Angular && npm install && npm start`
- **React:** `cd React && npm install && npm run dev`
- **Vue:** `cd Vue && npm install && npm run dev`
- **jQuery:** `cd jQuery && npm install && npm start`

**For ASP.NET Core:**
### ASP.NET Core

The ASP.NET Core example includes its own OData server, so you only need to run:
Our ASP.NET Core example includes a standalone OData server. Run the following command to start the client application and server:

```bash
cd "ASP.NET Core"
dotnet run
```

The application will be available at `http://localhost:59183` .
The application is available at the following URL: `http://localhost:59183` .

## Files to Review

Expand Down
44 changes: 22 additions & 22 deletions React/README.md
Original file line number Diff line number Diff line change
@@ -1,38 +1,38 @@
# React + TypeScript + Vite + DevExtreme

For more information about this example check the [Readme](../README.md).
Review the following file for the implementation overview: [Readme](../README.md).

## Prerequisite
## Start the Server

[ODataServer](../ODataServer) must be running on port 5005.
Start the [ODataServer](../ODataServer) before you run the application. This example is configured to access the ODataServer at port 5005. To change this configuration, update the following line: [App.tsx#L9](/React/src/App.tsx#L9)

## Build and Lint

Install dependencies:
```sh
npm install
```
- Install dependencies:
```sh
npm install
```

Start dev server:
```sh
npm run dev
```
Open: http://localhost:5173/
- Start the dev server:
```sh
npm run dev
```
The dev server runs at the following URL: http://localhost:5173/

Build production bundle:
```sh
npm run build
```
- Build a production bundle:
```sh
npm run build
```

Run linter:
```sh
npm run lint
```
- Run linter:
```sh
npm run lint
```

## Further help
## Helpful Resources

React docs: https://react.dev/learn
Vite docs: https://vite.dev/
DevExtreme React docs: https://js.devexpress.com/React/Documentation

To get more help with DevExtreme, submit a ticket through the [Support Center](https://supportcenter.devexpress.com/ticket/create).
If you still have questions, please contact us via the DevExpress [Support Center](https://supportcenter.devexpress.com/ticket/create).
43 changes: 22 additions & 21 deletions Vue/README.md
Original file line number Diff line number Diff line change
@@ -1,37 +1,38 @@
# Vue 3 + TypeScript + Vite + DevExtreme

For more information about this example check the [Readme](../README.md).
Review the following file for the implementation overview: [Readme](../README.md).

## Prerequisite
## Start the Server

[ODataServer](../ODataServer) must be running on port 5005.
Start the [ODataServer](../ODataServer) before you run the application. This example is configured to access the ODataServer at port 5005. To change this configuration, update the following line: [HomeContent.vue#L9](/Vue/src/components/HomeContent.vue#L9)

## Build and Lint

Install dependencies:
```sh
npm install
```
- Install dependencies:
```sh
npm install
```

Build the production bundle:
```sh
npm run build
```
- Build a production bundle:
```sh
npm run build
```

Run the linter:
```sh
npm run lint
```
- Run linter:
```sh
npm run lint
```

Dev server to preview locally:
```sh
npm run dev
```
- Start the dev server:
```sh
npm run dev
```
The dev server runs at the following URL: http://localhost:5173/

## Further help
## Helpful Resources

You can learn more about Vue in the [Vue documentation](https://vuejs.org/guide/introduction.html).
You can learn more about Vite in the [Vite documentation](https://vite.dev/).
You can learn more about DevExtreme Vue components in the [DevExtreme Vue documentation](https://js.devexpress.com/Vue/).

To get more help with DevExtreme, submit a ticket through the [Support Center](https://supportcenter.devexpress.com/ticket/create).
If you still have questions, please contact us via the DevExpress [Support Center](https://supportcenter.devexpress.com/ticket/create).
36 changes: 18 additions & 18 deletions jQuery/README.md
Original file line number Diff line number Diff line change
@@ -1,32 +1,32 @@
# jQuery DevExtreme Example

For more information about this example check the [Readme](../README.md).
Review the following file for the implementation overview: [Readme](../README.md).

## Prerequisite
## Start the Server

[ODataServer](../ODataServer) must be running on port 5005.
Start the [ODataServer](../ODataServer) before you run the application. This example is configured to access the ODataServer at port 5005. To change this configuration, update the following line: [index.js#L7](/jQuery/src/index.js#L7)

## Build and Lint

Install dependencies:
```sh
npm install
```
- Install dependencies:
```sh
npm install
```

Start dev server:
```sh
npm start
```
App URL: http://localhost:5050/src/index.html
- Start the dev server:
```sh
npm start
```
The dev server runs at the following URL: http://localhost:5050/src/index.html

Run linter:
```sh
npm run lint
```
- Run linter:
```sh
npm run lint
```

## Further help
## Helpful Resources

jQuery docs: https://api.jquery.com/
DevExtreme docs: https://js.devexpress.com/jQuery/Documentation

To get more help with DevExtreme, submit a ticket through the [Support Center](https://supportcenter.devexpress.com/ticket/create).
If you still have questions, please contact us via the DevExpress [Support Center](https://supportcenter.devexpress.com/ticket/create).
Loading