⚡ Kendo UI CRUD Grid Generator

Auto-generate production-ready Kendo UI CRUD Grids from your .NET Core MVC models — with full validation, auto-mapping, server paging, filtering, and sorting.

🚀 Features

• ✅ Parses any .NET Core MVC C# model (with or without annotations)
• ✅ Auto-maps all Data Annotations → Kendo validation rules
  • [Required], [StringLength], [Range], [RegularExpression]
  • [EmailAddress], [Phone], [Url], [DataType]
  • [Key], [Editable(false)], [ScaffoldColumn(false)], [ForeignKey]
• ✅ Generates complete Razor .cshtml view with Kendo Grid CRUD
• ✅ Generates complete MVC Controller with paging/sorting/filtering support
• ✅ Smart type mapping: C# types → Kendo field types → correct editors
  • DateTime → DateTimePicker
  • DateOnly → DatePicker
  • decimal → NumericTextBox with 2 decimals
  • bool → Checkbox with checkmark/x display
  • [EmailAddress] → email input + validation
  • Long strings → TextArea
• ✅ Server-side paging, sorting, filtering (Kendo DataSource parameterMap)
• ✅ Live search bar across all string fields
• ✅ Export to Excel button
• ✅ Toast notifications on CRUD success/error
• ✅ Confirmation dialog before delete
• ✅ Configurable: theme, page size, editing mode (inline/popup), output paths

📦 Installation

Option A — Install from VSIX

1. Download kendo-grid-generator-1.0.0.vsix
2. Open VS Code → Extensions sidebar (Ctrl+Shift+X)
3. Click ··· (top-right) → Install from VSIX...
4. Select the downloaded file → Install

Option B — Build from source

git clone https://github.com/you/kendo-grid-generator
cd kendo-grid-generator
npm install
npm run compile
npx vsce package
# Install the generated .vsix as above

🛠️ How to Use

Step 1 — Open a C# Model File

Open any .cs file containing a .NET model class. Examples:

// Models/ProductModel.cs
using System.ComponentModel.DataAnnotations;

namespace YourApp.Models
{
    public class ProductModel
    {
        [Key]
        public int Id { get; set; }

        [Required(ErrorMessage = "Product name is required")]
        [StringLength(100, MinimumLength = 2)]
        [Display(Name = "Product Name")]
        public string Name { get; set; }

        [Required]
        [Range(0.01, 999999.99, ErrorMessage = "Price must be between 0.01 and 999999.99")]
        [DataType(DataType.Currency)]
        public decimal Price { get; set; }

        [Required]
        [Display(Name = "Category")]
        public int CategoryId { get; set; }

        [Display(Name = "Active")]
        public bool IsActive { get; set; }

        [DataType(DataType.DateTime)]
        [Display(Name = "Created Date")]
        public DateTime CreatedAt { get; set; }

        [EmailAddress]
        [Display(Name = "Contact Email")]
        public string? ContactEmail { get; set; }
    }
}

Step 2 — Run the Generator

Three ways to invoke:

A) Keyboard Shortcut (fastest)

Ctrl+Shift+K G    (Windows/Linux)
Cmd+Shift+K G     (Mac)

B) Right-click in Editor

Right-click anywhere in the .cs file → Kendo Grid → 🔥 Generate Kendo CRUD Grid from Model

C) Right-click in Explorer

Right-click the .cs file in Explorer panel → 🔥 Generate Kendo CRUD Grid from Model

D) For selected text only

Select the class text → Right-click → ⚡ Generate Kendo Grid from Selected Model Text

Step 3 — Choose what to generate

A prompt appears:

📋 Found model: ProductModel — 8 properties found. Generate Kendo Grid?

  [ Generate View ]   [ Generate Both (View + Controller) ]   [ Cancel ]

• Generate View — creates Views/Generated/Product/Index.cshtml
• Generate Both — creates the view AND Controllers/ProductController.cs

Step 4 — Wire up in your project

1. Register the service in Program.cs:

builder.Services.AddScoped<IProductService, ProductService>();

2. Implement the service interface (generated in the controller file):

public class ProductService : IProductService
{
    private readonly AppDbContext _context;

    public ProductService(AppDbContext context) => _context = context;

    public async Task<(IEnumerable<ProductModel> Items, int Total)> GetPagedAsync(
        int page, int pageSize,
        List<SortDescriptor> sort,
        List<FilterDescriptor> filters)
    {
        var query = _context.Products.AsQueryable();

        // Apply filters, sorting, paging as needed
        var total = await query.CountAsync();
        var items = await query
            .Skip((page - 1) * pageSize)
            .Take(pageSize)
            .ToListAsync();

        return (items, total);
    }

    public async Task<ProductModel> CreateAsync(ProductModel model) { /* ... */ }
    public async Task<ProductModel?> UpdateAsync(ProductModel model) { /* ... */ }
    public async Task<bool> DeleteAsync(int id) { /* ... */ }
}

3. Add the route to your navigation or go directly to /Product.

⚙️ Configuration

Go to Settings (Ctrl+,) → search "Kendo Grid":

Or add to .vscode/settings.json:

{
  "kendoGridGenerator.theme": "bootstrap",
  "kendoGridGenerator.defaultPageSize": 25,
  "kendoGridGenerator.generateInlineEditing": false,
  "kendoGridGenerator.outputFolder": "Views/Admin"
}

🗺️ Annotation → Kendo Mapping Reference

📁 Generated File Structure

YourProject/
├── Controllers/
│   └── ProductController.cs      ← Generated controller + IProductService interface
└── Views/
    └── Generated/
        └── Product/
            └── Index.cshtml      ← Generated Kendo Grid Razor view

🔧 Troubleshooting

"Could not parse a C# model class"
→ Ensure the file has public class ClassName with { get; set; } properties.

Grid loads but shows no data
→ Make sure your controller's GetAll action returns { data: [...], total: N }.

Validation not showing
→ Ensure Kendo UI JS is loaded before your grid initialization script.

CSRF errors on Create/Update/Delete
→ Add @Html.AntiForgeryToken() to your layout and include it in AJAX headers.

📝 License

MIT © 2024