PromptBox Adornments
You can further customize the elements around the input area by using the specialized adornment configuration.
The PromptBox provides options to render content in specific locations relative to the input area—start, end, and top.
Start Affix
The start adornments are displayed at the left side of the input in single-line mode, and at the bottom left corner when in multi-line mode. To add custom content to the start of the PromptBox input area, use the StartAffixTemplate option.
@(Html.Kendo().PromptBox()
.Name("promptbox")
.StartAffixTemplate("<span class='k-icon k-i-paperclip'></span>")
)End Affix
The end adornments are displayed at the end of the input, before the built-in controls. To add custom content to the end of the PromptBox input area, use the EndAffixTemplate option.
@(Html.Kendo().PromptBox()
.Name("promptbox")
.EndAffixTemplate("<span class='k-icon k-i-gear'></span>")
)Top Affix
The top adornments are displayed above the input area of the PromptBox and only apply in 'multi' mode. To add custom content to the top of the PromptBox input area, use the TopAffixTemplate option.
@(Html.Kendo().PromptBox()
.Name("promptbox")
.Mode(PromptBoxMode.Multi)
.TopAffixTemplate("<div class='custom-header'>Attached files:</div>")
)Disabling Adornments
By default, the adornments are part of the PromptBox. When you set the Enable option to false, the PromptBox applies disabled styling to the adornment elements. This styling sets pointer-events to none and adjusts the opacity to match the disabled appearance.
@(Html.Kendo().PromptBox()
.Name("promptbox")
.Enable(false)
.StartAffixTemplate("<button>Click me</button>")
)