Kendo UI for Angular AI Coding Assistant Prompt Library
Welcome to the Kendo UI for Angular AI Coding Assistant Prompt Library.
The prompts provided here are intended and optimized for use with the Kendo UI for Angular 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 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 AI Coding Assistant via the #kendo_angular_assistant handle (or #kendo_angular_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_angular_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 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.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 Kendo UI for Angular components:
#kendo_component_assistant Create a Grid component with paging, sorting, and filtering.#kendo_component_assistant Show me sample code for a Kendo UI for Angular 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 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.