This is a migrated thread and some comments may be shown as answers.

How do you set the initial value of a ButtonGroup?

2 Answers 1154 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 18 Sep 2018, 07:55 PM
Maybe I'm missing something but I couldn't find how to do this in the documentation?!  I am using the ButtonGroup to represent a set of values for a configuration screen.

2 Answers, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 19 Sep 2018, 08:50 AM
Hi John,

The ButtonGroup component does not have a concept of value as it just contains regular Kendo buttons and can be configured for single (radio-button style) or multiple selection.

You can bind the selected property and selectedChange event handler (or use two-way binding [(selected)]) of each button to a class field or form model to reflect the state of each button, e.g.:

https://stackblitz.com/edit/angular-kbg9p9?file=app/app.component.ts

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Nithya
Top achievements
Rank 1
answered on 04 Mar 2021, 10:50 PM

 <div id="buttongroup" class="SalesInvoicegridOptions py-3">
            @(Html.Kendo().ButtonGroup()
            .Name("select-period")
            .Items(t =>
                {
                        t.Add().Text("All Invoices").Selected();
                        t.Add().Text("All Open Invoices");
                        t.Add().Text("Fully Paid");
                        t.Add().Text("Partially Paid");
                        t.Add().Text("No Payment");
                }))
            </div>

 

.selected() keeps the item selected. Css can be added to custtomise the color.

Tags
General Discussions
Asked by
John
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Nithya
Top achievements
Rank 1
Share this question
or