If you are new to Blazor or are considering our Blazor component suite for a future project, feel free to review the following Blazor-related GitHub examples to learn more about the DevExpress Blazor Grid.
Should you have implementation related questions or if you encounter issues with these sample projects, please submit a support ticket via the DevExpress Support Center. We’ll be happy to follow-up.
Data Binding
- Bind to a Web API Service: Implements a simple Web API service and uses it to populate our Blazor Grid component with data.
- Create a Foreign Key (ComboBox) Column: Implements a ComboBox column to display the relationship between tables.
Data Editing
- Disable Row Editing Conditionally: Illustrates how todisable grid edit operations conditionally.
- Inline Row Editing (in-place cell editing): In this example, we show you how our Blazor Grid component can edit/modify row values (records) within individual grid cells.
- Edit Row Values on a Separate Page: In this example, we use a separate page to edit grid data.
- Display a Custom Confirmation Dialog: In this example, a confirmation dialog is used to confirm delete operations.
- Post Changes to an In-memory Data Source: In this example, we use a third-party library to update field values for an in-memory data record.
- Drag-and-Drop Rows (Records): When a user drags and drops individual grid rows, you’ll need to update related data sources to reflect changes. Refer to this example to learn more.
Record Selection
- Delete Selected Rows: This sample project allows users to select multiple data rows and delete them with one click.
- Disable Selection Checkboxes for Specific Rows: This sample project disables row selection.
Data Filtering
- Introduce a Custom Filter Operator Selector: In this sample, we extend the capabilities of our Blazor Grid’s Filter Row by adding custom filter operators.
- Use the DevExpress TagBox Control to Filter a Column against Multiple Values: This example demonstrates how to filter a column against multiple values.
Sort Operations
- Custom Sorting: Our Blazor Grid allows you to sort column values using multiple sorting algorithms. Refer to this example to learn more.
UI Customization
- Conditional Formatting: This example handles our Blazor Grid’s CustomizeElement event to apply styles conditionally.
- Highlight a Row on Hover: This example applies a CSS class when a user hovers a row.
- Use Icons Instead of Default Command Buttons: This example uses templates to replace standard command buttons.
Manage Layouts
- Save and Load Layout Information: Our Blazor Grid includes a built-in API to save/load a component’s layout when needed. Refer to this example to learn more.
- Specify Predefined Settings for a Specific Component: You can specify initial settings for all components (the same type of component) within your Blazor-powered application.
Use External Components to Manage Data
- Display a Context Menu: You can display acontext menu once a row or column click to improve usability of your application.
- Display Detail Information using our Blazor Form Layout Component: This example creates a preview for a data record using our Blazor Form Layout component.
Your Feedback Matters
We’d love to hear your thoughts on our GitHub examples. Are they helpful? If you’d like us to create a custom example, please detail your use case/requirements below.