Kendo UI for Angular Prompt Library
Welcome to the Kendo UI for Angular Prompt Library.
The prompts provided here are intended and optimized for use with the Kendo UI for Angular 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 Kendo UI for Angular 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-angular-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-angular-assistanthandle). - (Optional) Customize the prompt as needed for your specific use case but keep the
#kendo-angular-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 Kendo UI for Angular GitHub Copilot Extension (without the MCP Server installed), modify the prompts to use the @kendoangular handle instead.
General Prompts
This section provides examples of general questions related to Kendo UI for Angular.
#kendo-angular-assistant I have an existing Angular project. Help me add and configure the Grid, Charts, and DatePicker components. Include the necessary imports and basic component implementations with sample data.#kendo-angular-assistant What are the main Kendo UI for Angular 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 Kendo UI for Angular components.
Grid
The Kendo UI for Angular Grid lets you create responsive, accessible, and customizable Angular applications that require the displaying and management of large datasets.
#kendo-angular-assistant Create a basic Grid component that displays employee data with columns for ID, Name, Position, and Salary. Include sorting and pagination functionality.#kendo-angular-assistant Set up a Grid that loads data from a REST API endpoint.#kendo-angular-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-angular-assistant Create a Grid and add an external button with SVG icon that exports the Grid to Excel using the saveAsExcel method.#kendo-angular-assistant Add Excel export functionality to a Grid with multi-row headers.#kendo-angular-assistant Create a Grid and add an external button with SVG icon that exports the Grid to PDF using the saveAsPDF method.#kendo-angular-assistant Create a Grid with custom column templates including action buttons, and conditional formatting based on cell values.#kendo-angular-assistant Implement Grid grouping with drag-and-drop group headers. Include group expand/collapse and aggregate functions for grouped data.#kendo-angular-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-angular-assistant Set up a Grid with multiple selection modes including single row, multiple rows, and checkbox selection. Include getting selected items.#kendo-angular-assistant Set up a Grid with virtual scrolling to handle large datasets efficiently.Charts
The Kendo UI for Angular Charts provide a comprehensive charting solution for data visualization with multiple chart types and customization options.
#kendo-angular-assistant Set up a column chart that binds to an array of objects. Include category axis labels and value formatting for currency display.#kendo-angular-assistant Build a column chart that shows quarterly sales by region.#kendo-angular-assistant Build an area chart with time data using date/time axis and enabled zooming.#kendo-angular-assistant Create a pie chart for market share data with predefined colors, data labels showing percentages, and legend positioning.#kendo-angular-assistant Build an area chart with time series data using date/time category axis. Include proper date formatting and zoom functionality.#kendo-angular-assistant Implement a donut chart with custom center text displaying total values.#kendo-angular-assistant Create a horizontal bar chart with stacked series to show categorized data comparison across different groups.#kendo-angular-assistant Create a dashboard with multiple chart types (line, column, pie) that share a common data source and update together.#kendo-angular-assistant Implement a chart that updates in real-time with streaming data.#kendo-angular-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-angular-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 Kendo UI for Angular Scheduler enables you to create calendar and scheduling applications with multiple view types and rich editing capabilities.
#kendo-angular-assistant Create a Scheduler component with month, week, and day views.#kendo-angular-assistant Implement a full CRUD Scheduler with editing capabilities.#kendo-angular-assistant Create a Scheduler that allows users to toggle between different views and displays appointments.#kendo-angular-assistant Create a Scheduler that allows to create weekly repeating events.#kendo-angular-assistant Create a resource-based Scheduler with sample data grouped by Name of the event owner.#kendo-angular-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-angular-assistant Implement export functionality in the Scheduler to allow users to save events as PDF files.Editor
The Kendo UI for Angular 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-angular-assistant Configure an Editor with basic formatting, alignment, lists, tables, links, images, undo/redo, and source view tools with default content.#kendo-angular-assistant Implement an Editor component in a reactive form with validation, two-way data binding, and form submission handling.#kendo-angular-assistant Configure an Editor with paste cleanup functionality to remove unwanted formatting and tags from copied content.#kendo-angular-assistant Set up an Editor with content validation rules, character limits, and custom validation messages for form integration.DropDowns
The Kendo UI for Angular DropDowns provide a set of components for selecting values from a list, including DropDownList, ComboBox, MultiSelect, and AutoComplete.
#kendo-angular-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-angular-assistant Create a DropDownList with category data and include a default "Select category..." option.#kendo-angular-assistant Create a DropDownList with countries data and enable filtering. Show how to handle the filterChange event.#kendo-angular-assistant Create two cascading DropDownLists where the second list depends on the first selection. Use Categories and Products data with a simple relationship.#kendo-angular-assistant Create a DropDownList with 1000 items using virtualization. Set a fixed height and itemHeight for performance.#kendo-angular-assistant Implement a DropDownList that can show both name and email in each option.#kendo-angular-assistant Bind a list of objects to a DropDownList and specify the text field.#kendo-angular-assistant Create a DropDownList bound to a sample data and disable the third item.MultiSelect
#kendo-angular-assistant Create a MultiSelect with an array of product objects. Show the selected product names below the component.#kendo-angular-assistant Create a MultiSelect with checkboxes bound to a simple list of countries and show the selected count. AutoComplete
#kendo-angular-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 Kendo UI for Angular 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 Angular's reactive forms API.
DatePicker
#kendo-angular-assistant Render a DatePicker with a default selected date.#kendo-angular-assistant Configure the DatePicker to show week numbers in its calendar popup.#kendo-angular-assistant Change the display format in the DatePicker so dates show as 'MM/dd/yyyy'.#kendo-angular-assistant Create a DatePicker with basic validation. Include min/max date restrictions and show the selected date below the component.#kendo-angular-assistant Create a Calendar component in which all past days are disabled.#kendo-angular-assistant Create a Calendar component in which all Weekends are disabled.#kendo-angular-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-angular-assistant Create an adaptive DatePicker for a mobile friendly user interface.TimePicker
#kendo-angular-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-angular-assistant Create a TimePicker with 15-minute intervals and basic form validation. Include min/max time restrictions and show the selected time.Calendar
#kendo-angular-assistant Create a Calendar component with multiple date selection enabled. Show the count of selected dates below.#kendo-angular-assistant Create a Calendar that starts in year view and allows navigation through decade and century views.#kendo-angular-assistant Create a Calendar that shows the past 5 years.Forms
The Kendo UI for Angular FormField package provides a set of components for building forms, including FormField, FormGroup, and FormArray. These components are designed to work seamlessly with Angular's reactive forms API.
#kendo-angular-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-angular-assistant Generate a Form with required field validation for email and password inputs.#kendo-angular-assistant Create a form with First Name, Last Name and Email fields, followed by Submit and Clear buttons.#kendo-angular-assistant Create a form with three TextBox fields?Upload
The Kendo UI for Angular Upload component allows users to upload files to a server with support for multiple file selection, drag-and-drop, and progress tracking.
#kendo-angular-assistant Create an Upload component for image uploading with enabled drag-and-drop support.#kendo-angular-assistant Create a simple Upload component allowing chunk file upload.