Blazor Grid — New Examples

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.

Free DevExpress Products - Get Your Copy Today