Skip to main content

Replacing Kendo MVC with React: The Options

You asked "what to use that is ready-made" or "React-based" to replicate Kendo. Here are the viable paths, divided by philosophy.

Option 1: "I want everything ready" (Admin/CRUD Frameworks)​

This is the closest answer to your request for "something ready-made". Instead of assembling grids and buttons by hand, you use a framework that already gives you pagination, filters, and forms.

It is a "meta-framework" for B2B applications.

  • Why we like it: It is "Headless". It means it handles all the "boring" logic (API calls, state, filters, auth) but lets you use the graphics library you want (Ant Design, Material UI, Mantine).
  • Pros:
    • Very generous Open Source (many "Enterprise" features are free).
    • Total flexibility: if one day you want to change graphics, the logic remains.
    • .NET Integration: Easily connects to your existing WebAPI APIs.
  • Cons: Initial learning curve to understand its "Hooks".

2. React Admin (marmelab.com)​

The veteran of the sector.

  • Why we like it: Very mature, extremely stable. If you need to make simple CRUD tables it is very fast.
  • Pros: Excellent documentation, vast ecosystem.
  • Cons: Very "opinionated" (uses Material UI). Heavy customization is harder than Refine. Some advanced features (like in-cell editing or complex trees) are in the paid Enterprise version.

Option 2: "I build it myself, but I want top components" (Component Suites)​

If you prefer to have total control of the layout and insert the grid "where you want" (as you do now with MVC), you need Enterprise React components.

1. KendoReact (Telerik)​

  • Philosophy: "Let's keep it in the family".
  • Advantages:
    • Look & Feel identical (or very similar) to the current one.
    • Features are 1:1 with those used in MVC (Grid, Scheduler, Charts).
    • Telerik Support (which you already know/pay for).
  • Disadvantages: You have to rewrite Views from scratch (no automatic migration), but conceptually you will find the same parameters.

2. AG Grid​

  • Philosophy: "Brute performance".
  • Advantages: It is the de-facto standard for complex grids (Excel-like). Handles millions of rows without blinking.
  • Disadvantages:
    • Expensive. The features you use (Grouping, Pivot, Excel Export) are in the "Enterprise" license (~$999/dev/year).
    • It is "just" a grid. For forms, buttons, dates, you need to integrate it with something else (e.g., React Hook Form + a UI lib).

3. MUI X (Material UI)​

  • Philosophy: "Consistent Google Design".
  • Advantages: Beautiful if you like Material Design. Excellent Developer Experience.
  • Disadvantages: Here too, "Pro" features (Grouping, Pinning) are paid.

Quick Comparison Table​

FeatureRefine.devReact AdminKendoReactAG Grid
TypeFull FrameworkFull FrameworkUI LibraryGrid Component
"Ready-made"✅ High✅ Very High❌ Medium (Must assemble)❌ Low (Grid Only)
BackendAgnostic (Ok .NET)Agnostic (Ok .NET)AgnosticAgnostic
License CostOpen Source (MIT)Free + EnterpriseCommercialFree + Enterprise
LookCustomizable (AntD/MUI)Material DesignKendo ThemeExcel-like / Neutral

The Verdict for OMGT​

  1. If you want to quickly modernize standard processes (CRUD master data tables, simple lists): Go with Refine. It gives you the "ready-made" structure and removes the boilerplate thought, maintaining design freedom.
  2. If OrderMGT is too complex/custom (e.g., that "LightIndex" screen with strange logic injected by the server): You probably need a pure UI Library like KendoReact. It will allow you to rebuild the UI exactly as you need it, piece by piece, without the constraints of an "admin" framework.

Hybrid Strategy: Use Refine for 90% of the "boring" backoffice pages (InboundMGT, master data) and use "pure" React components (maybe even KendoReact integrated inside Refine!) for super-complex screens like "Order Detail".