Kendo UI Free Kit

A VS Code extension that reads ASP.NET Core MVC C# models and generates matching Razor views, Kendo UI and Bootstrap components, plus a simple Npgsql repository/controller backend.

Pick a model, choose the components you need, and the extension writes files whose field names, labels, validation rules and SQL columns come from that model.

Requirements

• VS Code 1.85 or newer.
• An ASP.NET Core MVC project in the workspace.
• .NET 8 SDK or newer for the generated backend code.
• A PostgreSQL database if you use the generated Npgsql repository.

Install

From a VSIX

code --install-extension kendo-free-kit-1.0.0.vsix

Run from source

npm install
code .

Press F5 to start the Extension Development Host.

Quick start

1. Open a workspace that contains an ASP.NET Core MVC project.
2. Open the Kendo Models view in Explorer. The extension scans Models, Entities, Domain, Repositories/Models, Enums and Enumerations folders by default.
3. Click the wand icon next to a model, or run Kendo UI: Generate Components from Model.
4. Choose the components to generate.
5. Enter the controller name. The default is the model name, for example Product.
6. Review and confirm if any generated files already exist.
7. The extension writes the views and backend files, wires the Kendo assets into _Layout.cshtml, adds the Npgsql package, creates a connection string template and registers the repository in Program.cs.

If the model has no key, backend generation is skipped. Add [Key], an Id property, or a <ModelName>Id property first.

Commands

The model tree also supports collapsing a model to inspect its properties.

Settings

Supported model metadata

The parser understands these attributes and conventions:

• [Table("name")], [Column("name")]
• [Key], [Required]
• [StringLength], [MaxLength], [MinLength]
• [Range], [RegularExpression]
• [Display(Name = ...)], [DisplayName], [DataType]
• [EmailAddress], [Phone], [Url]
• [HiddenInput], [NotMapped], [ScaffoldColumn(false)]
• [ForeignKey] and nameof(...)
• Nullable types, collections, enums and foreign-key-like SomethingId properties
• required C# 11 properties

Navigation collections and navigation class properties are ignored by the views. A scalar property such as CategoryId becomes a foreign-key DropDownList when the related Category class exists.

Generated files

A typical generation for Product writes:

MVC/
  Controllers/
    ProductController.cs
    LookupController.cs            (only when foreign keys exist)
  Views/
    _ViewImports.cshtml            (created or updated)
    _ViewStart.cshtml              (created if missing)
    Shared/
      _Layout.cshtml               (created or updated)
      _KendoHead.cshtml
      _KendoScripts.cshtml
    Product/
      Index.cshtml                 (CRUD grid)
      Form.cshtml                  (create/edit form)
      Components.cshtml            (component examples)
  wwwroot/
    css/
      kendo-overrides.css
Repositories/
  Interfaces/
    IProductRepository.cs
  Implementations/
    ProductRepository.cs
  Infrastructure/
    NpgsqlMapper.cs
Database/
  t_product.sql

Some files are generated only when the matching component is selected.

The extension never silently overwrites files. When a target file exists, it asks once before replacing the generated files.

What each component contains

Form + validation

• A Bootstrap card bound to the selected model with @model.
• One input per visible property.
• Kendo widgets where they fit: NumericTextBox, DatePicker, DateTimePicker, TimePicker, DropDownList.
• Bootstrap switches for booleans.
• HTML5 and Kendo validation, including server error messages.
• Anti-forgery token and JSON POST to Create or Update.
• Create and edit modes using the model key.
• Numeric and Guid keys are generated automatically. A string key is rendered as a required input and becomes read-only in edit mode.

CRUD grid

With the full Kendo bundle:

• Kendo Grid with paging, sorting, row filtering, grouping, column menu and popup editing.
• Schema fields generated from the model.
• Numeric, date, enum and foreign-key editors.
• Anti-forgery header on create, update and delete.
• Notification messages and server error handling.
• Date-only and time-only values are converted to the format ASP.NET Core binds.

With kendoKit.useCoreOnly = true, Kendo Grid is replaced by a Bootstrap table with search, paging, edit links and delete, using the same endpoints.

Date and time pickers

Shows the first date, datetime and time properties from the model and initializes DatePicker, DateTimePicker and TimePicker.

Dropdowns and selects

• DropDownList generated from enum values.
• DropDownList populated by the LookupController for foreign keys.
• ComboBox, MultiSelect and AutoComplete examples.

Numeric inputs and upload

• NumericTextBox for integer and decimal properties.
• MaskedTextBox, Slider, Switch, TextBox and textarea examples.
• Email, password, URL and phone inputs when the model has matching properties.
• Kendo Upload posting to the generated Upload action, or a Bootstrap FormData upload in Core-only mode.

Layout and feedback

Kendo TabStrip groups the examples. The layout group includes PanelBar, Window, a Bootstrap modal, Kendo Notification buttons, Tooltip and Scheduler. In Core-only mode the Scheduler becomes a Bootstrap table.

Licensing and Core-only mode

Kendo UI Core is free under Apache 2.0. The commercial bundle includes Grid, Upload, Switch, Scheduler and other advanced widgets and shows a trial watermark when no license is installed.

The default useCoreOnly = false loads kendo.all.min.js so that Grid, Upload and Scheduler work immediately. For production, either:

• Buy a Kendo UI commercial license and add your telerik-license.js after the Kendo script in _KendoScripts.cshtml, or
• Set kendoKit.useCoreOnly = true and use the generated Bootstrap fallbacks.

Kendo UI Core does not include the date pickers in the main core bundle at the time of writing. The extension loads the free dateinput, datepicker, timepicker and datetimepicker modules separately when Core-only mode is enabled.

Backend details

Controller

The generated controller has the actions needed by the selected components:

• Index, Read, Create, Edit, Update, Destroy, Components, Upload.

Only the actions for the selected components are generated. Selecting the backend alone produces the JSON Read, Create, Update and Destroy endpoints.

JSON actions use [ValidateAntiForgeryToken]. Views send the token in the RequestVerificationToken header (or as a form field for uploads).

Repository

• Repository interface I<Model>Repository and implementation <Model>Repository.
• Parameterized Npgsql SQL. Values are never concatenated into the statement.
• Numeric identity keys are generated by PostgreSQL and read back with RETURNING.
• Guid keys are generated in C# when empty.
• String keys are inserted by the caller and must be non-empty; the generated form renders an input for them.
• Enum values are stored using their underlying integer type.
• DateTimeOffset maps to timestamptz; DateTime maps to timestamp; DateOnly maps to date; TimeOnly maps to time.
• Client-side property names use the same camelCase convention as ASP.NET Core JSON serialization, including acronyms such as URL and ProductID.

Mapper

NpgsqlMapper maps reader columns to model properties, including nullable types, enums, Guid, DateOnly, TimeOnly, TimeSpan, DateTimeOffset and byte[].

Wiring

• Adds Npgsql 8.0.5 to the repository project and to the MVC project when a lookup endpoint is needed.
• Adds a ConnectionStrings:<name> template to appsettings.json if missing.
• Inserts builder.Services.AddScoped<I<Model>Repository, <Model>Repository>(); before var app = builder.Build();.

Edit the generated connection string before running the application:

{
  "ConnectionStrings": {
    "Default": "Host=localhost;Port=5432;Database=your_db;Username=postgres;Password=postgres"
  }
}

SQL

Database/<table>.sql contains a CREATE TABLE IF NOT EXISTS statement with PostgreSQL types, a primary key and basic nullability. Review it before running it, especially for foreign keys, check constraints and indexes.

Uploads

The upload action writes files to wwwroot/uploads and returns their URLs. Treat this as a starting point: add content-type checks, size limits, virus scanning and authorization before exposing it in production.

Regeneration

Running generation again updates the selected views and backend files after confirmation. Hand-written changes in generated files are replaced. Put custom logic in separate partial classes, services or view components, or copy the generated code before editing it.

Snippets

The extension contributes snippets for Razor and C#:

• kendo-grid-crud
• kendo-form-field
• kendo-datepicker
• kendo-dropdown
• kendo-upload
• kendo-components
• kendo-npgsql-repository
• kendo-json-controller
• kendo-lookup-action

Type the prefix in a .cshtml or .cs file.

Development

npm test

The test suite covers model parsing, view and backend generation, workspace detection, layout wiring, package/connection-string edits and a full extension workflow.

Troubleshooting

No models found

Check kendoKit.modelGlobs and make sure the classes are public or internal classes with at least one property. Highly unusual class declarations may not be recognized.

Grid shows a watermark

You are using the full Kendo bundle without a commercial license. Add telerik-license.js or enable Core-only mode and use the Bootstrap grid.

Date pickers are missing in Core-only mode

Refresh the assets with Kendo UI: Add/Refresh Bootstrap + Kendo Assets. The generated _KendoScripts.cshtml must load the four free picker modules after kendo.ui.core.min.js.

The layout has no Kendo styles or scripts

The extension wires _KendoHead and _KendoScripts into Views/Shared/_Layout.cshtml. If _ViewStart.cshtml points to a different layout, add these two partials to that file manually.

Foreign-key dropdown is empty

Check that:

• The related class exists in the scanned models. [Table("...")] names are honored; otherwise the configured prefix is used.
• The LookupController was generated and its connection string works.

Repository not registered

If Program.cs uses a non-standard startup, add the AddScoped line manually using the names reported in the extension output channel.

Connection string missing

Edit appsettings.json and set ConnectionStrings:Default (or the name configured in kendoKit.connectionStringName).

License

MIT. Kendo UI itself is subject to Telerik's license terms. Kendo UI Core is Apache 2.0.