I've figured out how to initialize a ButonGroup with badges using this documentation:
items - API Reference - Kendo UI ButtonGroup - Kendo UI for jQuery (telerik.com)
Now I want to update badge options or remove a badge after initialization. I found this documentation:
badge - API Reference - Kendo UI ButtonGroup - Kendo UI for jQuery (telerik.com)
However, this only seems to allow updating the text value of the badge. I want to be able to update other things like themeColor. Furthermore, if a badge is removed by calling:
buttonGroup.badge(index, false);
Hi,
Is it possible to change recurrenceeditor from buttongroup (green selection on the image) to dropdownlist (red selection on the image)?
I'm currently operating on version 2023.1.117 and I know in previous version we had dropdown on recurrence editor.
In the single example for the ButtonGroup demo there is a bit of static CSS which is overriding any of the themes:
.k-button-group .k-button { background-color: rgb(44, 35, 43);}
I recommend removing it so users can see the theme variances properly.
ButtonGroup is a part of Mobile Ui but on mobile it is not being responsive.
Attaching screenshot. In a have portrait layout 2 and more button in group damage the whole look of app
Is any workaround in that?
Hello,
In the example http://dojo.telerik.com/IdUMu I am trying to have a radio buttons group inside a grid. You can see this is not working. This is the same example http://dojo.telerik.com/oPidE but without class='k-radio-label' and class='k-radio' on the label and on the input type=radio.
Can you tell me how to achieve the same behaviour as the working example but with the styling of the kendo radio button.
Thanks.
Hi,
I'm new to Kendo UI. When I checked the demo of ButtonGroup, I didn't see any examples about integration with AngularJS.
Any examples or documentation are appreciated.
Hello,
The "Edit this example" dojo sample from the ButtonGroup doesn't work because the wrong style sheet is linked. It's currently kendo.bootstrap.min.css but should be kendo.bootstrap.mobile.min.css
Cheers
Jae Soon
I tried writing Cided UI Tests with Visual Studio 2015 on this webpage: http://demos.telerik.com/aspnetajax/button/examples/radiosandcheckboxes/defaultcs.aspx
where it is supposed to click the checkbox, but I keep receiving an error as it doesn't recognize the kendo control. How am I able to select it without using the recording options? Here is the error:
Test Name: CodedUITestMethod1
Test FullName: CodedUITestProject_test.CodedUITest1.CodedUITestMethod1
Test Source: C:\Team Projects 2015\Demo\CodedUITestProject_test\CodedUITestProject_test\CodedUITest1.cs : line 28
Test Outcome: Failed
Test Duration: 0:01:46.516549
Result Message:
Test method CodedUITestProject_test.CodedUITest1.CodedUITestMethod1 threw exception:
Microsoft.VisualStudio.TestTools.UITest.Extension.UITestControlNotFoundException: The playback failed to find the control with the given search properties. Additional Details:
TechnologyName: 'Web'
ControlType: 'CheckBox'
TagName: 'INPUT'
Id: 'RadButton6'
Failed to find any control that matched the value RadButton6 for the search property Id. ---> System.Runtime.InteropServices.COMException: Error HRESULT E_FAIL has been returned from a call to a COM component.
Here is my code:
public void CodedUITestMethod1()
{
Playback.PlaybackSettings.SearchInMinimizedWindows = false;
string Home = "http://demos.telerik.com/aspnet-ajax/button/examples/radiosandcheckboxes/defaultcs.aspx";
BrowserWindow b = BrowserWindow.Launch(Home);
Playback.PlaybackSettings.DelayBetweenActions = 100000;
b.resizedWindow(1920, 1080); //function to make the window full screen
HtmlCheckBox cbBox = new HtmlCheckBox(b);
//I had used the ID from the Developer Options under F12 initially then changed it to RadButton6 but it doesn't work
cbBox.SearchProperties.Add(HtmlCheckBox.PropertyNames.Id, "RadButton6");
Mouse.Click(cbBox);
}
<
div
class
=
"radio-group"
>
<
div
data-bind
=
"source:applicantTypeItems"
data-template
=
"DoctoralLevelId"
></
div
>
<
script
id
=
"DoctoralLevelId"
type
=
"text/x-kendo-template"
>
<
div
>
<
input
type
=
"radio"
name
=
"DoctoralLevelId"
data-bind="attr:{value:value},
checked:DoctoralLevelId" />
<
label
data-bind
=
"text:caption"
></
label
>
</
div
>
</
script
>
</
div
>
<
script
>
$(document).ready(function () {
var applicantVm =kendo.observable($.extend({
updated: false,
PersonId: self.personId,
Id: self.selectedId,
DoctoralLevelId: 1,
name: "DoctoralLevelId",
applicantTypeItems: [
{ caption: "Pre-doc", value: 1},
{ caption: "Post-doc", value: 2 },
],
// call controller and update user input
updateApplicant : function() {
var self = this;
var updateData ={
PersonId: self.personId,
Id: self.selectedId,
DoctoralLevelId: self.DoctoralLevelId,
};
$.ajax({
url: '@Url.Content("~/Applicant/UpdateNewPredoc")',
data: JSON.stringify(updateData),
contentType: "application/json, charset=utf-8",
type: "POST",
datatype: "json",
error: function () {
toastr.error('Update failed!');
},
success: function (value) {
window.console && console.log(self);
window.console && console.log(value);
toastr.success('Update succeed!');
},
complete: function () {
window.console && console.log("completed");
}
});
}
},@(Html.ToJson(Model))));
window.console && console.log(applicantVm);
kendo.bind($("#applicant-info-view"), applicantVm);
})
</
script
>