Buttongroup initial

_config.yml

@@ -280,6 +280,7 @@ intro_columns:
     items:
       "Button": "components/button/overview"
       "Toggle Button": "togglebutton-overview"
+      "Button Group" : "buttongroup-overview"
       "Menu": "components/menu/overview"
       "Tab Strip": "components/tabstrip/overview"
       "TreeView": "components/treeview/overview"

components/buttongroup/events.md

@@ -0,0 +1,111 @@
+---
+title: Events
+page_title: ButtonGroup for Blazor | Events
+description: Events of the ButtonGroup for Blazor
+slug: buttongroup-events
+tags: telerik,blazor,Toggle,button,group
+published: True
+position: 20
+---
+
+# ButtonGroup Events
+
+This article explains the events available in the Telerik buttons in a ButtonGroup for Blazor:
+
+* [SelectedChanged](#selectedchanged)
+* [OnClick](#onclick)
+
+
+## SelectedChanged
+
+The `SelectedChanged` fires when the user changes the state of the button by clicking it (or by using `Space` or `Enter`). You can use it to call local view-model logic. To fetch data or perform async operations, use the [OnClick](#onclick) event.
+
+This event is available only for `ButtonGroupToggleButton` instances, as they are the only selecteble buttons.
+
+>caption Handle the SelectedChanged event
+
+````CSHTML
+@* If you do not update the view-model in the handler, you can effectively cancel the event *@
+
+<TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Single">
+    <ButtonGroupToggleButton Selected="@FirstSelected" SelectedChanged="@FirstSelectedChangedHandler">First</ButtonGroupToggleButton>
+    <ButtonGroupToggleButton Selected="@SecondSelected" SelectedChanged="@SecondSelectedChangedHandler">Second</ButtonGroupToggleButton>
+</TelerikButtonGroup>
+
+@code{
+    bool FirstSelected { get; set; }
+    bool SecondSelected { get; set; } = true; // you can pre-select buttons
+
+    void FirstSelectedChangedHandler(bool currState)
+    {
+        FirstSelected = currState;
+        // you have to update the model manually because handling the SelectedChanged event does not let you use @bind-Selected
+        // if you don't update the View-Model, you will effectively cancel the event
+
+        Console.WriteLine($"The first button is selected: {FirstSelected}");
+    }
+
+    void SecondSelectedChangedHandler(bool currState)
+    {
+        SecondSelected = currState;
+        // you have to update the model manually because handling the SelectedChanged event does not let you use @bind-Selected
+        // if you don't update the View-Model, you will effectively cancel the event
+
+        Console.WriteLine($"The Second button is now selected: {FirstSelected}");
+    }
+}
+````
+
+
+## OnClick 
+
+The `OnClick` event fires when the user clicks or taps the button. You can use it to invoke async logic such as fetching data or calling a service.
+
+>caption Handle the Button OnClick event in a ButtonGroup
+
+````CSHTML
+@* This example shows how to handle each click individually, and also a way to use the same async handler from several instances, and pass arguments to it *@ 
+
+@result
+
+<br />
+
+<TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Single">
+    <ButtonGroupButton OnClick="@FirstClickHandler">First</ButtonGroupButton>
+    <ButtonGroupButton OnClick="@( async() => await SharedClickHandler("Second button, shared handler") )">Second</ButtonGroupButton>
+    <ButtonGroupToggleButton OnClick="@( async() => await SharedClickHandler("Shared Toggle Button") )">Toggle Button</ButtonGroupToggleButton>
+    <ButtonGroupToggleButton OnClick="@ToggleButtonClickHandler">Toggle Button Two</ButtonGroupToggleButton>
+</TelerikButtonGroup>
+
+@code{
+    string result { get; set; }
+
+    async Task FirstClickHandler()
+    {
+        await Task.Delay(500);//simulate network delay from real data retrieval. Remove from a real app
+
+        result = "First button: " + DateTime.Now.Millisecond;
+    }
+
+    async Task ToggleButtonClickHandler()
+    {
+        await Task.Delay(500);//simulate network delay from real data retrieval. Remove from a real app
+
+        result = "Standalone Toggle Button: " + DateTime.Now.Millisecond;
+    }
+
+    async Task SharedClickHandler(string sender)
+    {
+        await Task.Delay(500);//simulate network delay from real data retrieval. Remove from a real app
+
+        result = sender + DateTime.Now.Millisecond;
+    }
+}
+````
+
+@[template](/_contentTemplates/common/general-info.md#event-callback-can-be-async)
+
+
+## See Also
+
+  * [ButtonGroup Overview]({%slug buttongroup-overview%})

components/buttongroup/icons.md

@@ -0,0 +1,82 @@
+---
+title: Icons
+page_title: ButtonGroup for Blazor | Icon
+description: Icons and images in the ButtonGroup for Blazor
+slug: buttongroup-icons
+tags: telerik,blazor,Toggle,button,group,icon,sprite,image
+published: True
+position: 5
+---
+
+
+# ButtonGroup Icons
+
+You can put an image, sprite or a font icon in the buttons within a ButtonGroup to illustrate its purpose for your end users. To apply them, use the following properties:
+
+* for a [Telerik font icon]({%slug general-information/font-icons%}), use the `Icon` attribute to set the font icon class.
+
+* for a raster image, use the `ImageUrl` attribute to provide the URL to the icon (relative or absolute).
+
+* for a custom font icon class, set the `IconClass` parameter of the component to the desired CSS class list which provides the required rules (like font name and glyph symbol). Make sure to also reference the desired font in your app and to use its own recommendations.
+
+* for a sprite, set the `SpriteClass` attribute to `k-icon MySpriteClass` where `MySpriteClass` defines the CSS rules for the sprite.
+
+
+The following example shows how to use an image from a URL, a sprite image, and the built-in font icons.
+
+>caption How to use icons in the Telerik ButtonGroup Button
+
+````CSHTML
+@* This sample shows how you can use conditional logic to show different icons in the different states.
+It also shows how to use telerik icons, raster icons and sprite images*@
+
+<TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Multiple">
+    <ButtonGroupToggleButton SpriteClass="@( FlagSelected ? "flag netherlands" : "flag brazil")" @bind-Selected="@FlagSelected">Sprite</ButtonGroupToggleButton>
+
+    <ButtonGroupToggleButton Icon="@( FontSelected ? IconName.VolumeOff : IconName.VolumeUp )" @bind-Selected="@FontSelected">Font Icon</ButtonGroupToggleButton>
+
+    <ButtonGroupToggleButton ImageUrl="@RasterIconUrl" @bind-Selected="@RasterSelected">Image URL</ButtonGroupToggleButton>
+</TelerikButtonGroup>
+
+<style>
+    /* the sprite for the first button is defined through a CSS rule matchin its Class */
+    .flag {
+        background-image: url("https://docs.telerik.com/blazor-ui/images/flags.png");
+    }
+
+        .flag.netherlands {
+            background-position: 0 -64px;
+            background-color: white;
+        }
+
+        .flag.brazil {
+            background-position: 0 0;
+        }
+</style>
+
+@code{
+    bool FlagSelected { get; set; }
+    bool FontSelected { get; set; }
+    bool RasterSelected { get; set; }
+    string RasterIconUrl => RasterSelected ? "https://docs.telerik.com/blazor-ui/images/snowboarding.png" : "https://docs.telerik.com/blazor-ui/images/swimming.png";
+}
+````
+
+>caption The result from the code snippet above
+
+![Icons in ButtonGroup Buttons](images/buttongroup-icons.png)
+
+>tip You can use relative paths to your images in the `wwwroot` folder. The example above uses absolute paths to make it easy for you to see the results without preparing images.
+
+>tip If you don't add text to the button, the button will center the icon on all sides.
+
+>note Images used as icons should generally be small enough to fit in a line of text - the button is an inline element and is not designed for large images. If you want to use big icon buttons, consider one of the following options:
+>
+> * defining a `Class` on the button that provides `height` and `width`. The width and height can be set in `px` sufficient to accommodate the icon or to `auto`,
+> * or attaching an `@onclick` handler to an icon/`span`/`img` element instead of using a button,
+> * or adding your own HTML inside the button, something like: `<TelerikButton><img style="width: 400px; height: 400px;" src="my-icon.svg" />some text</TelerikButton>`
+
+
+## See Also
+
+  * [ButtonGroup Overview]({%slug buttongroup-overview%})

components/buttongroup/overview.md

@@ -0,0 +1,146 @@
+---
+title: Overview
+page_title: ButtonGroup for Blazor Overview
+description: Overview of the ButtonGroup for Blazor
+slug: buttongroup-overview
+tags: telerik,blazor,Toggle,button,group
+published: True
+position: 0
+---
+
+# ButtonGroup Overview
+
+This article provides information about the ButtonGroup component and its core features.
+
+The ButtonGroup component is a container for buttons that can be toggle buttons, and lets you [select one or more]({%slug buttongroup-selection%}), and respond to the [selection and click events]({%slug buttongroup-events%}). The buttons inside fill up the container, match the styling according to the [chosen theme]({%slug general-information/themes%}) and provide the regular button features like images and icons and the other parameters and attributes.
+
+In this article:
+
+* [Basic and Toggle Buttons](#basic-and-toggle-buttons)
+* [Disabled State](#disabled-state)
+* [Hide Buttons](#hide-buttons)
+* [Styling](#styling)
+
+## Basic and Toggle Buttons
+
+To add a Telerik ButtonGroup to your Blazor app:
+
+1. Add the `TelerikButtonGroup` tag.
+1. Inside it, add `ButtonGroupToggleButton` or `ButtonGroupButton` tags that denote each button.
+    * The `ButtonGroupToggleButton` becomes primary when clicked and de-selects when another one is clicked. Read more in the [Selection]({%slug buttongroup-selection%}) article.
+    * The `ButtonGroupButton` does not change its visual state when clicked.
+1. Use the `OnClick` event of these buttons to handle the user actions.
+
+>caption TelerikButtonGroup with regular buttons and toggle buttons, and their respective OnClick handlers
+
+````CSHTML
+@* Each individual button lets you control its selected state, have a click handler and template, icons, text *@
+
+<TelerikButtonGroup>
+    <ButtonGroupButton OnClick="@FirstClick">First button</ButtonGroupButton>
+    <ButtonGroupToggleButton OnClick="@SecondClick">Second button</ButtonGroupToggleButton>
+</TelerikButtonGroup>
+
+@code{
+    async Task FirstClick()
+    {
+        Console.WriteLine("the first button was clicked.");
+    }
+
+    async Task SecondClick()
+    {
+        Console.WriteLine("the second button was clicked. It becomes selected when clicked.");
+    }
+}
+````
+
+>caption The result from the code snippet above, after clicking the second button
+
+![Basic ButtonGroup](images/buttongroup-overview.png)
+
+
+## Disabled State
+
+To disable a button, set its `Enabled` attribute to `false`.
+
+>caption Disabled buttons in a button group
+
+````CSHTML
+<TelerikButtonGroup>
+    <ButtonGroupButton>Enabled</ButtonGroupButton>
+    <ButtonGroupButton Enabled="false">Disabled</ButtonGroupButton>
+    <ButtonGroupToggleButton Selected="true">Enabled</ButtonGroupToggleButton>
+    <ButtonGroupToggleButton Enabled="false">Disabled</ButtonGroupToggleButton>
+</TelerikButtonGroup>
+````
+
+>caption Comparison between disabled and enabled button
+
+![Disabled buttons in button group](images/button-group-disabled-state.png)
+
+
+## Hide Buttons
+
+You can set the `Visible` parameter of individual buttons to `false` to hide them based on certain logic. This lets you maintain the same markup and toggle features on and off with simple flags without affecting indexes and event handlers.
+
+>caption Hide buttons from a ButtonGroup
+
+````CSHTML
+<TelerikButtonGroup>
+    <ButtonGroupButton>First</ButtonGroupButton>
+    <ButtonGroupButton Visible="false">Hidden</ButtonGroupButton>
+    <ButtonGroupButton>Third</ButtonGroupButton>
+</TelerikButtonGroup>
+````
+
+>caption Only two visible buttons are rendered
+
+![Hide buttongroup buttons conditionally](images/buttongroup-hide-buttons.png)
+
+
+## Styling
+
+You can style the individual buttons through their `Class` attribute to define your own CSS rules that apply to the HTML rendering. You may want to make them conditional based on their `Selected` state.
+
+>caption Set CSS class to the button and change its appearance
+
+````CSHTML
+<TelerikButtonGroup>
+    <ButtonGroupToggleButton>Default</ButtonGroupToggleButton>
+    <ButtonGroupToggleButton @bind-Selected="@IsSelected"
+                             Class="@( IsSelected ? "my-on-class" : "the-off-class" )">Styled - Selected: @IsSelected</ButtonGroupToggleButton>
+</TelerikButtonGroup>
+
+@code {
+    bool IsSelected { get; set; }
+}
+
+<style>
+    .k-button-group button.k-button.my-on-class,
+    .k-button-group button.k-button.my-on-class:hover {
+        color: yellow;
+        font-weight: 700;
+    }
+
+    .k-button-group button.k-button.the-off-class,
+    .k-button-group button.k-button.the-off-class:hover {
+        color: pink;
+    }
+</style>
+````
+
+>caption The result from the code snippet above
+
+![conditional styling of buttongroup](images/buttongroup-styling.png)
+
+
+
+
+## See Also
+
+  * [Live Demo: ButtonGroup](https://demos.telerik.com/blazor-ui/buttongroup/overview)
+  * [Events]({%slug buttongroup-events%})
+  * [Selection]({%slug buttongroup-selection%})
+  * [Icons]({%slug buttongroup-icons%})
+  * [API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikButtonGroup)
+