girdview like below image

Question

i want create a grid view like below image.data will get from DB. except pending. and the gridview style like below image

Tuhin Paul · Answer

Check out this react js implementation. page.tsx import PerformanceGrid from "@/performance-grid" export default function Page() { return ( Performance Monitoring Grid ) } db.ts // Simulated database data export const performanceData: PerformanceData = { year: 2025, company: "ABC Company", departments: [ { name: "HR", codes: [ { code: "2401-200" }, { code: "2401-201" }, { code: "2401-203" }, { status: "pending" } ] }, { name: "IT", codes: [ { code: "2401-203" }, { code: "2401-204" }, { code: "2401-205" }, { status: "pending" } ] }, { name: "Payroll", codes: [ { code: "2401-206" } ] } ] } performance.ts export interface DepartmentCode { code: string; status?: 'pending'; } export interface Department { name: string; codes: DepartmentCode[]; subdepartments?: Department[]; } export interface PerformanceData { year: number; company: string; departments: Department[]; } performance-grid.tsx "use client" import { performanceData } from "@/lib/db" import type { DepartmentCode, Department } from "@/types/performance" import { cn } from "@/lib/utils" export default function PerformanceGrid() { return ( PMS Year Setting Monitoring Performance Appraisal COT DOT POT COT DOT POT {performanceData.year} {performanceData.company} HR {performanceData.departments[0].codes.map((code, index) => ( {code.status === "pending" ? "Pending" : code.code} ))} 2401-100 2401-101 {["2401-200", "2401-201", "2401-202", "Pending"].map((code, index) => ( {code} ))} IT {performanceData.departments[1].codes.map((code, index) => ( {code.status === "pending" ? "Pending" : code.code} ))} 2401-001 2401-101 {["2401-203", "2401-204", "2401-205", "Pending"].map((code, index) => ( {code} ))} Payroll {performanceData.departments[2].codes.map((code, index) => ( {code.status === "pending" ? "Pending" : code.code} ))} 2401-102 2401-206 Pending Pending Pending Pending ) }

Tuhin Paul · Answer

Part 2: Index.cshtml @model PerformanceGrid.Models.PerformanceData Performance Monitoring Grid PMS Year Setting Monitoring Performance Appraisal COT DOT POT COT DOT POT @foreach (var department in Model.Departments) { @if (department == Model.Departments.First()) { @Model.Year @Model.CompanyName } @department.Name @foreach (var code in department.Codes) { @(code.IsPending ? "Pending" : code.Code) } @($"2401-{department.Id:D3}") @($"2401-{(department.Id + 100):D3}") @foreach (var code in department.Codes.Take(3)) { @code.Code } Pending } Pending Pending Pending Pending Program.cs using Microsoft.EntityFrameworkCore; using PerformanceGrid.Data; var builder = WebApplication.CreateBuilder(args); // Add services to the container. builder.Services.AddControllersWithViews(); builder.Services.AddDbContext (options => options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection"))); var app = builder.Build(); // Configure the HTTP request pipeline. if (!app.Environment.IsDevelopment()) { app.UseExceptionHandler("/Home/Error"); app.UseHsts(); } app.UseHttpsRedirection(); app.UseStaticFiles(); app.UseRouting(); app.UseAuthorization(); app.MapControllerRoute( name: "default", pattern: "{controller=Performance}/{action=Index}/{id?}"); app.Run(); `appsettings.json`: { "ConnectionStrings": { "DefaultConnection": "Server=(localdb)\mssqllocaldb;Database=PerformanceGrid;Trusted_Connection=True;MultipleActiveResultSets=true" } } wwwroot/css/site.css .container { max-width: 1200px; margin: 0 auto; padding: 1rem; } .text-2xl { font-size: 1.5rem; line-height: 2rem; } .font-bold { font-weight: 700; } .mb-4 { margin-bottom: 1rem; } .w-full { width: 100%; } .border-collapse { border-collapse: collapse; } .border { border: 1px solid #e5e7eb; } .p-2 { padding: 0.5rem; } .bg-gray-200 { background-color: #e5e7eb; } .bg-blue-50 { background-color: #eff6ff; } .bg-green-50 { background-color: #f0fdf4; } .bg-yellow-100 { background-color: #fef9c3; } .text-blue-600 { color: #2563eb; } .hover\:underline:hover { text-decoration: underline; } .space-y-1 > * + * { margin-top: 0.25rem; } .overflow-x-auto { overflow-x: auto; } .min-w-$$100px$$ { min-width: 100px; } This implementation includes: 1. Entity Framework Core models and DbContext 2. A controller to handle the data retrieval 3. A Razor view that matches the original grid design 4. CSS styling to match the original appearance 5. Database configuration and seeding 6. Proper routing and dependency injection setup

Tuhin Paul · Answer

Part 1: Here is the code try once: Model class - using System.ComponentModel.DataAnnotations; namespace PerformanceGrid.Models { public class Department { public int Id { get; set; } public string Name { get; set; } public List Codes { get; set; } } public class DepartmentCode { public int Id { get; set; } public string Code { get; set; } public bool IsPending { get; set; } public int DepartmentId { get; set; } public Department Department { get; set; } } public class PerformanceData { public int Id { get; set; } public int Year { get; set; } public string CompanyName { get; set; } public List Departments { get; set; } } } DBContext class: using Microsoft.EntityFrameworkCore; using PerformanceGrid.Models; namespace PerformanceGrid.Data { public class ApplicationDbContext : DbContext { public ApplicationDbContext(DbContextOptions options) : base(options) { } public DbSet PerformanceData { get; set; } public DbSet Departments { get; set; } public DbSet DepartmentCodes { get; set; } protected override void OnModelCreating(ModelBuilder modelBuilder) { // Seed initial data modelBuilder.Entity ().HasData( new PerformanceData { Id = 1, Year = 2025, CompanyName = "ABC Company" } ); modelBuilder.Entity ().HasData( new Department { Id = 1, Name = "HR" }, new Department { Id = 2, Name = "IT" }, new Department { Id = 3, Name = "Payroll" } ); // Add more seed data as needed } } } Controller class: using Microsoft.AspNetCore.Mvc; using Microsoft.EntityFrameworkCore; using PerformanceGrid.Data; using PerformanceGrid.Models; namespace PerformanceGrid.Controllers { public class PerformanceController : Controller { private readonly ApplicationDbContext _context; public PerformanceController(ApplicationDbContext context) { _context = context; } public async Task Index() { var performanceData = await _context.PerformanceData .Include(p => p.Departments) .ThenInclude(d => d.Codes) .FirstOrDefaultAsync(); return View(performanceData); } } }

lejo · Answer

asp.net with c#

Amira Bedhiafi · Answer

What technologies are you using ?

girdview like below image

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (5)