• What is KendoReact
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Charts
    • Common Utilitiesupdated
    • Conversational UI
    • Data Gridupdated
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gantt
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Mapbeta
    • Notification
    • PDF Processing
    • PDFViewernew
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeView
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Troubleshooting

Custom Rendering

The ActionSheet component contains the following building blocks:

  • Header—Rendered on top of the content. By default, it includes a title and a subTitle.
  • Content—Renders the main content area of the ActionSheet. By default, it contains a list of items that you can split into two groups. The content can be completely customized.
  • Footer—Rendered below the content if an ActionSheetFooter component is provided.

The ActionSheet allows you to use custom components to customize the appearance of its building blocks.

To render custom content, nest it inside the following components:

Header Component

Use the ActionSheetHeader component to customize the header section of the ActionSheet.

The ActionSheetHeader component overrides the ActionSheet title and subTitle options.

The following example demonstrates the ActionSheetHeader in action.

Example
View Source
Change Theme:

Content Component

The ActionSheetContent component allows you to completely customize the main content area of the ActionSheet. This enables you to render custom content even when an items collection is not provided.

The following example demonstrates the ActionSheetContent in action.

Example
View Source
Change Theme:

Use the ActionSheetFooter component to render a footer below the Content ActionSheet area.

The following example demonstrates the ActionSheetFooter in action.

Example
View Source
Change Theme: