KendoReact AI Coding Assistant Prompt LibraryPremium
Welcome to the KendoReact AI Coding Assistant Prompt Library.
The prompts provided here are intended and optimized for use with the KendoReact AI Coding Assistant. 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 AI Coding Assistant via the #kendo__assistant handle (or #kendo_react_assistant if you configured the server with that name). 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 handle.
When modifying the prompts, make sure the changes comply with the intended use and the recommendations for the AI Coding Assistant. - Run the prompt in your IDE's AI chat interface.
Always double-check the code and solutions proposed by any AI-powered tool before applying them to your project.
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.Tool-Specific Prompts
This section provides prompt examples for directly calling individual specialized tools for more granular control.
Component Tool
Use the #kendo_component_assistant handle for specific implementations that need the KendoReact components:
#kendo_component_assistant Create a Grid component with paging, sorting, and filtering.#kendo_component_assistant Show me sample code for a KendoReact Grid with virtual scrolling for the rows and columns.Icon Tool
Use the #kendo_icon_assistant handle for finding and implementing suitable icons based on your scenario:
#kendo_icon_assistant Add icons suitable for the Home, Settings, and User Profile buttons in my navigation bar.#kendo_icon_assistant Find appropriate icons for data visualization actions like export, print, refresh, and search in a dashboard toolbar.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 filter row and filter menu functionality. Show how to set up different filter types for text, numeric, and date columns.#kendo_react_assistant Create a Grid and add an external button with SVG icon that exports the Grid to Excel using the saveAsExcel method.#kendo_react_assistant Add Excel export functionality to a Grid with multi-row headers.#kendo_react_assistant Create a Grid and add an external button with SVG icon that exports the Grid to PDF using the saveAsPDF method.#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 grouping with drag-and-drop group headers. Include group expand/collapse and aggregate functions for grouped data.#kendo_react_assistant Create a master-detail Grid where clicking on a row expands to show related data in a nested table or detailed view component.#kendo_react_assistant Set up a Grid with multiple selection modes including single row, multiple rows, and checkbox selection. Include getting selected items.#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. Include category axis labels and value formatting for currency display.#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 Build an area chart with time series data using date/time category axis. Include proper date formatting and zoom functionality.#kendo_react_assistant Implement a donut chart with custom center text displaying total values.#kendo_react_assistant Create a horizontal bar chart with stacked series to show categorized data comparison across different groups.#kendo_react_assistant Create a dashboard with multiple chart types (line, column, pie) that share a common data source and update together.#kendo_react_assistant Implement a chart that updates in real-time with streaming 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.#kendo_react_assistant Design a dashboard layout with multiple chart types (line, column, pie, donut) that share data and update dynamically. Include date range filtering that affects all charts.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 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.#kendo_react_assistant Create a resource-based Scheduler with sample data grouped by Name of the event owner.#kendo_react_assistant Create a resource-based Scheduler with grouping functionality. Include multiple resources (rooms, employees, equipment), resource grouping in views, and resource-specific event creation.#kendo_react_assistant Implement export functionality in the Scheduler to allow users to save events as PDF files.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 formatting, alignment, lists, tables, links, images, undo/redo, and source view tools with default content.#kendo_react_assistant Implement an Editor component in a reactive form with validation, two-way data binding, and form submission handling.#kendo_react_assistant Configure an Editor with paste cleanup functionality to remove unwanted formatting and tags from copied content.#kendo_react_assistant Set up an Editor with content validation rules, character limits, and custom validation messages for form integration.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 category data and include a default "Select category..." option.#kendo_react_assistant Create a DropDownList with countries data and enable filtering. Show how to handle the filterChange event.#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 1000 items using virtualization. Set a fixed height and itemHeight for performance.#kendo_react_assistant Implement a DropDownList that can show both name and email in each option.#kendo_react_assistant Bind a list of objects to a DropDownList and specify the text field.#kendo_react_assistant Create a DropDownList bound to a sample data and disable the third item.MultiSelect
#kendo_react_assistant Create a MultiSelect with an array of product objects. Show the selected product names below the component.#kendo_react_assistant Create a MultiSelect with checkboxes bound to a simple list of countries and show the selected count.AutoComplete
#kendo_react_assistant Create an AutoComplete for city names with an array of strings. Enable suggestions, two-way bind the value, and show the current value under the component.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 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'.#kendo_react_assistant Create a DatePicker with basic validation. Include min/max date restrictions and show the selected date below the component.#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 two DatePickers for "From" and "To" date selection where the "To" picker's min date updates based on "From" selection. Show the number of days between dates.#kendo_react_assistant Create an adaptive DatePicker for a mobile friendly user interface.TimePicker
#kendo_react_assistant Create a TimePicker for business hours (9 AM to 6 PM) with 30-minute intervals. Set default value to 9:00 AM and display the selected time below. Use the built-in formats.#kendo_react_assistant Create a TimePicker with 15-minute intervals and basic form validation. Include min/max time restrictions and show the selected time.Calendar
#kendo_react_assistant Create a Calendar component with multiple date selection enabled. Show the count of selected dates below.#kendo_react_assistant Create a Calendar that starts in year view and allows navigation through decade and century views.#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 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.