Posts

Showing posts from October, 2024

Donate

Using Blazor QuickGrid Component In .NET 8, Entity Framework Core And SQL Server

Image
Here's a Blazor Web App that demonstrates on how to show data in a tabular format using the ASP.NET Core Blazor QuickGrid component. As per Microsoft, The QuickGrid component is a Razor component for quickly and efficiently displaying data in tabular form. QuickGrid provides a simple and convenient data grid component for common grid rendering scenarios and serves as a reference architecture and performance baseline for building data grid components. QuickGrid is highly optimized and uses advanced techniques to achieve optimal rendering performance. Note that this is not as advanced as other commercial grids. To begin with, lets create a new Blazor Web App that target's the .NET 8 framework and then install these four NuGet packages. We will be getting data from WideWorldImporters database using Entity Framework Core and database approach methodology. Once you have these installed, next is to scaffold the WideWorldImporters database for you to generate the model classe

Blazor QuickGrid Component Inside Div Element Overlaps Horizontally

Image
Hello, As I was experimenting with Blazor QuickGrid component, I decided to populate the Grid component with records from WideWorldImporters database and opt to display at least nine columns. Upon rendering on the page, I noticed that the QuickGrid component overlaps horizontally even if it's inside a div element with bootstrap row as it's class. To fix this issue, I added an id attribute to the grid component so I can apply a css style explicitly. <QuickGrid Id= "qGridCustomer" Class= "table table-responsive table-bordered table-striped" Items= "@FilteredCustomers" Pagination= "@pagination" > <PropertyColumn Title= "Customer Name" Property= "@(p => p.CustomerName)" Sortable= "true" > <ColumnOptions> <div class= "search-box" > <input type= "search" autofocus @bind= "nameFilter" @bind: event = &quo

Blazor Web App CRUD Project Using Visual Studio 2022, .NET 8 And Entity Framework Core

Image
Good day Team! Here's a basic Blazor Web App CRUD Project using Visual Studio 2022, .NET 8 and Entity Framework Core. The database for this project is SQL Server and the approach to communicate the database is database first. Let's begin. I. Project Setup 1. Open your SSMS editor and execute the create Employee table script that is used in this project into your SQL Server instance. This will be the datasource for our employee information. USE [ASPCoreTestDB] GO SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO CREATE TABLE [dbo].[Employee]( [EmployeeID] [int] IDENTITY (1,1) NOT NULL , [EmployeeGovtID] [varchar](50) NULL , [EmployeeName] [varchar](200) NULL , [Age] [int] NULL , [Address] [nvarchar]( max ) NULL , [Salary] [decimal](18, 2) NULL , [Designation] [varchar](50) NULL , [HasDependents] [bit] NULL , CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED ( [EmployeeID] ASC ) WITH (PAD_INDEX = OFF , STATISTICS_NORECOMPUTE = OFF , IGNORE_DUP_K

Donate