Confirm?

Are you sure you want to proceed?
T
Tom Lertola

Interactive Project List Design

Clone & Customize via AI

A projects management list that uses QuickGrid for tabular display and Bootstrap for layout. Blazor Project List provides search, status and next-step filters, sorting, and inline edits via EditForm.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Tabular project list using QuickGrid with sortable columns. - Client-side filters: search box, status and next-step dropdowns. - Inline editing per row using EditForm, InputText, InputDate and InputSelect. - Quick actions: begin edit, save, cancel, add sample project, and clear filters. - Row count summary and external link for project number. ## Key components - QuickGrid (Microsoft.AspNetCore.Components.QuickGrid) - EditForm, InputText, InputDate, InputSelect - GridSort and template columns - Bootstrap classes: container, row, col-*, btn, form-control, form-select, card ## How it works - Data is held in an in-memory List<ProjectModel> and exposed as IQueryable<ProjectModel> for QuickGrid. - Filters update displayedProjects by applying Where clauses on the IQueryable; UpdateDisplayedProjects is invoked after input changes. - Inline editing uses BeginEdit to clone a ProjectModel into editingModel, EditForm/Input* components to bind fields via @bind-Value, and SaveEdit to copy back edited values and refresh the QuickGrid with RefreshDataAsync. - Sorting is provided by GridSort<T>.ByAscending passed to TemplateColumn SortBy; paging is not implemented. ## Styling - Layout uses Bootstrap utility and form classes for responsive grid, buttons, and inputs. - Table header colors are customized in app.css; custom CSS targets .table thead th to apply a dark header and ensure sort link visibility. - Responsive behavior relies on Bootstrap's grid and table-responsive classes; QuickGrid renders rows inside a table element styled by Bootstrap. ## Reuse steps 1. Add the QuickGrid package (Microsoft.AspNetCore.Components.QuickGrid) and ensure project targets a compatible .NET/Blazor SDK. 2. Include Bootstrap CSS in index.html/_Host.cshtml (or use an existing theme) and add the provided app.css rules. 3. Import namespaces in the component (@using Microsoft.AspNetCore.Components.QuickGrid; @using Microsoft.AspNetCore.Components.Forms). 4. Adapt ProjectModel to match backend entities and replace the in-memory List with an injected service or API client. 5. Preserve the UpdateDisplayedProjects pattern or move filtering/sorting/paging server-side for large datasets; call gridRef.RefreshDataAsync() after mutations. ## Limitations & next steps - Sample data is in-memory; persistence and API integration are not implemented. - No data annotations or DataAnnotationsValidator are present; add validation attributes and validation UI where required. - No server-side paging or large-data virtualization; consider server-side paging/sorting for scale. - Authentication, authorization, and audit/save error handling are not wired; inject services and secure endpoints as needed. - Accessibility improvements and keyboard handling for inline edits should be added for production use. This component is a single-page demo generated by Instruct UI and is editable for integration into a broader .NET Blazor application.