KendoReact Prompt LibraryPremium
Welcome to the KendoReact Prompt Library.
The prompts provided here are intended and optimized for use with the KendoReact AI Coding Assistant MCP Server. They can help you kick start your app development and speed up the component configuration process.
This collection of prompts is not exhaustive and the KendoReact team is constantly working on adding more prompts to the library.
How to Use the Prompts
All prompts in this library target the MCP Server via the #kendo-react-assistant handle. Make sure that you have installed and enabled the MCP Server before attempting to run the prompts.
- Browse the prompt library to find a prompt that suits your needs.
- Copy the prompt text (including the
#kendo-react-assistanthandle). - (Optional) Customize the prompt as needed for your specific use case but keep the
#kendo-react-assistanthandle.
When modifying the prompts, make sure the changes comply with the intended use and the recommendations for the AI Coding Assistant. - Run the prompt against the MCP Server.
Always double-check the code and solutions proposed by any AI-powered tool before applying them to your project.
Use with the Copilot Extension
To run the provided prompts in the KendoReact GitHub Copilot Extension (without the MCP Server installed), modify the prompts to use the @kendoreact handle instead.
General Prompts
This section provides examples of general questions related to KendoReact.
#kendo-react-assistant I have an existing React project. Help me add and configure the Grid, Charts, and DatePicker components. Include the necessary imports and basic component implementations with sample data.#kendo-react-assistant What are the main KendoReact components and their primary use cases? Provide examples of when to use Grid vs TreeList vs ListView.Component-Specific Prompts
This section provides prompt ideas for the most popular and complex KendoReact components.
Grid
The KendoReact Grid lets you create responsive, accessible, and customizable React applications that require the displaying and management of large datasets.
#kendo-react-assistant Create a basic Grid component that displays employee data with columns for ID, Name, Position, and Salary. Include sorting and pagination functionality.#kendo-react-assistant Set up a Grid that loads data from a REST API endpoint.#kendo-react-assistant Implement a Grid with enabled filtering and show how to set up different filter types for text, numeric, and date columns. #kendo-react-assistant Add Excel and PDF export functionality to a Grid. #kendo-react-assistant Add Excel export functionality to a Grid with multirow headers.#kendo-react-assistant Create a Grid with custom column templates including action buttons, and conditional formatting based on cell values.#kendo-react-assistant Implement Grid with enabled grouping and expand/collapse functionality for the groups.#kendo-react-assistant Create a Grid with a detailed component shown on row click.#kendo-react-assistant Set up a Grid with еnabled multiple selection.#kendo-react-assistant Set up a Grid with virtual scrolling to handle large datasets efficiently.Charts
The KendoReact Charts provide a comprehensive charting solution for data visualization with multiple chart types and customization options.
#kendo-react-assistant Set up a column chart that binds to an array of objects and each item has a label. #kendo-react-assistant Build a column chart that shows quarterly sales by region.#kendo-react-assistant Build an area chart with time data using date/time axis and enabled zooming.#kendo-react-assistant Create a pie chart for market share data with predefined colors, data labels showing percentages, and legend positioning.#kendo-react-assistant Implement a donut chart with custom center text displaying total values.#kendo-react-assistant Create a column chart with stacked series to show categorized data comparison across different groups.#kendo-react-assistant Create a page with multiple charts (line, column, pie, donut) that share the same data.#kendo-react-assistant Build a column chart that shows quarterly sales by region with drill-down functionality to show monthly data when clicking on a quarter.Scheduler
The KendoReact Scheduler enables you to create calendar and scheduling applications with multiple view types and rich editing capabilities.
#kendo-react-assistant Create a Scheduler component with month, week, and day views.#kendo-react-assistant Create a Scheduler with sample event data and enabled basic event creation, editing, and deletion functionality.#kendo-react-assistant Create a resource-based Scheduler with sample data grouped by Name of the event owner.#kendo-react-assistant Implement a full CRUD Scheduler with editing capabilities. #kendo-react-assistant Create a Scheduler that allows users to toggle between different views and displays appointments. #kendo-react-assistant Create a Scheduler that allows to create weekly repeating events.Editor
The KendoReact Editor provides a rich text editing experience with support for various content types, including text, images, and tables. It includes features like formatting, styling, and content manipulation.
#kendo-react-assistant Configure an Editor with basic tools and default content. #kendo-react-assistant Configure an Editor with paste cleanup functionality to remove unwanted formatting from copied content.DropDowns
The KendoReact DropDowns provide a set of components for selecting values from a list, including DropDownList, ComboBox, MultiSelect, and AutoComplete.
#kendo-react-assistant Build a demo showing the adaptive mode for DropDownList, ComboBox, MultiSelect, and AutoComplete. Use basic binding and avoid using too much styles that can break the adaptive rendering.DropDownList
#kendo-react-assistant Create a DropDownList with 1000 items using virtualization.#kendo-react-assistant Create two cascading DropDownLists where the second list depends on the first selection. Use Categories and Products data with a simple relationship.#kendo-react-assistant Create a DropDownList with category data and include a default "Select category..." option.#kendo-react-assistant Create a DropDownList with countries data and enabled filtering.#kendo-react-assistant Bind a list of objects to a DropDownList and specify the text field.#kendo-react-assistant Implement a DropDownList that renders both name and email in each item.#kendo-react-assistant Create a DropDownList bound to a sample data and disable the third item.MultiSelect
#kendo-react-assistant Create a MultiSelect with checkboxes bound to a simple list of countries and show the selected count.DateInputs
The KendoReact DateInputs package provides a set of components for selecting dates and times, including DatePicker, DateTimePicker, and TimePicker. These components are designed to work seamlessly with React's reactive forms API.
DatePicker
#kendo-react-assistant Create a DatePicker with a basic min/max date validation.#kendo-react-assistant Create a DatePicker that disables weekends.#kendo-react-assistant Create two DatePickers for "From" and "To" date selection where the "To" picker's min date updates based on "From" selection.#kendo-react-assistant Create an adaptive DatePicker for a mobile friendly user interface.#kendo-react-assistant Render a DatePicker with a default selected date.#kendo-react-assistant Configure the DatePicker to show week numbers in its calendar popup. #kendo-react-assistant Change the display format in the DatePicker so dates show as 'MM/dd/yyyy'. TimePicker
#kendo-react-assistant Create a TimePicker for business hours (9 AM to 6 PM) with 30-minute intervals which default value is set to 9:00 AM.#kendo-react-assistant Create a TimePicker with 15-minute intervals and basic form validation.Calendar
#kendo-react-assistant Create a Calendar component in which all past days are disabled.#kendo-react-assistant Create a Calendar component in which all Weekends are disabled. #kendo-react-assistant Create a Calendar that shows the past 5 years.Forms
The KendoReact Form package provides a set of components for building forms, including Form and Field components. These components are designed to work seamlessly with React's reactive forms API.
#kendo-react-assistant Create a Form that has three fields - a textbox for the name, a numeric button for age and DropDownList for the selected job. #kendo-react-assistant Generate a Form with required field validation for email and password inputs.#kendo-react-assistant Create a form with First Name, Last Name and Email fields, followed by Submit and Clear buttons. #kendo-react-assistant Create a basic user profile settings page. #kendo-react-assistant How to create a form with three TextBox fields.Upload
The KendoReact Upload component allows users to upload files to a server with support for multiple file selection, drag-and-drop, and progress tracking.
#kendo-react-assistant Create an Upload component for image uploading with enabled drag-and-drop support.#kendo-react-assistant Create an Upload component allowing single file upload to a predefined saving location.#kendo-react-assistant Create a simple Upload component allowing chunk file upload.