Razor Page
This article demonstrates how to add the Telerik UI Toolbar for ASP.NET Core to a RazorPage.
For the full project with RazorPages examples, visit our GitHub repository.
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@Html.AntiForgeryToken()
@(Html.Kendo().ToolBar()
.Name("ToolBar")
.Items(items =>
{
items.Add().Type(CommandType.Button).Text("Button");
items.Add().Type(CommandType.Button).Text("Toggle Button").Togglable(true);
items.Add().Type(CommandType.SplitButton).Text("Insert").MenuButtons(menuButtons =>
{
menuButtons.Add().Text("Insert above").Icon("insert-top");
menuButtons.Add().Text("Insert between").Icon("insert-middle");
menuButtons.Add().Text("Insert below").Icon("insert-bottom");
});
items.Add().Type(CommandType.Separator);
items.Add().Template("<label for='dropdown'>Format:</label>");
items.Add().Template("<input id='dropdown' style='width: 150px;' />").Overflow(ShowInOverflowPopup.Never);
items.Add().Type(CommandType.Separator);
items.Add().Type(CommandType.ButtonGroup).Buttons(buttons =>
{
buttons.Add().Text("Left").Togglable(true).Group("text-align").Icon("align-left");
buttons.Add().Text("Center").Togglable(true).Group("text-align").Icon("align-center");
buttons.Add().Text("Right").Togglable(true).Group("text-align").Icon("align-right");
});
items.Add().Type(CommandType.ButtonGroup).Buttons(buttons =>
{
buttons.Add().Text("Bold").Togglable(true).Icon("bold");
buttons.Add().Text("Italic").Togglable(true).Icon("italic");
buttons.Add().Text("Underline").Togglable(true).Icon("underline");
});
items.Add().Type(CommandType.Button).Text("Action").Overflow(ShowInOverflowPopup.Always);
items.Add().Type(CommandType.Button).Text("Another Action").Overflow(ShowInOverflowPopup.Always);
items.Add().Type(CommandType.Button).Text("Something else here").Overflow(ShowInOverflowPopup.Always);
})
)
<script>
$(document).ready(function () {
$("#dropdown").kendoDropDownList({
optionLabel: "Paragraph",
dataTextField: "text",
dataValueField: "value",
dataSource: [
{ text: "Heading 1", value: 1 },
{ text: "Heading 2", value: 2 },
{ text: "Heading 3", value: 3 },
{ text: "Title", value: 4 },
{ text: "Subtitle", value: 5 },
]
});
});
</script>
@addTagHelper *, Kendo.Mvc
<kendo-toolbar name="ToolBar">
<toolbar-items>
<item text="Button" type="CommandType.Button" sprite-css-class="">
</item>
<item text="Toggle Button" togglable="true" type="CommandType.Button">
</item>
<item text="Insert" type="CommandType.SplitButton">
<menu-buttons>
<toolbar-button icon="insert-up" text="Insert above" />
<toolbar-button icon="insert-middle" text="Insert between" />
<toolbar-button icon="insert-down" text="Insert below" />
</menu-buttons>
</item>
<item type="CommandType.Separator">
</item>
<item template="<label for='dropdown'>Format:</label>">
</item>
<item template="<input id='dropdown' style='width: 150px;' />" overflow="ShowInOverflowPopup.Never">
</item>
<item type="CommandType.Separator">
</item>
<item type="CommandType.ButtonGroup">
<buttons>
<toolbar-button group="text-align" icon="align-left" togglable="true" text="Left" />
<toolbar-button group="text-align" icon="align-center" togglable="true" text="Center" />
<toolbar-button group="text-align" icon="align-right" togglable="true" text="Right" />
</buttons>
</item>
<item type="CommandType.ButtonGroup">
<buttons>
<toolbar-button icon="bold" togglable="true" text="Bold" />
<toolbar-button icon="italic" togglable="true" text="Italic" />
<toolbar-button icon="underline" togglable="true" text="Underline" />
</buttons>
</item>
<item text="Action" type="CommandType.Button" overflow="ShowInOverflowPopup.Always">
</item>
<item text="Another Action" type="CommandType.Button" overflow="ShowInOverflowPopup.Always">
</item>
<item text="Something else here" type="CommandType.Button" overflow="ShowInOverflowPopup.Always">
</item>
</toolbar-items>
</kendo-toolbar>
<script>
$(document).ready(function () {
$("#dropdown").kendoDropDownList({
optionLabel: "Paragraph",
dataTextField: "text",
dataValueField: "value",
dataSource: [
{ text: "Heading 1", value: 1 },
{ text: "Heading 2", value: 2 },
{ text: "Heading 3", value: 3 },
{ text: "Title", value: 4 },
{ text: "Subtitle", value: 5 },
]
});
});
</script>
public void OnGet()
{
}