Hey guys,
currently I have an use-case where I could need a radio group with some standard text options but one radio with a dropdownlist.
With googling I could find only one question similar to this with a solution in kendoReact.
Is there a best practice solution to realize this in .NET Core?
https://www.telerik.com/forums/dropdownlist-with-radio-button-not-working
And a working example here: https://stackblitz.com/edit/react-1gnbzt?file=app/main.jsx
Cheers!
EDIT:
Sure, like always. After asking the question, I could solve it by myself. Thanks anyways!
@(Html.Kendo().RadioGroup()
.Name("xxx")
.Items(i =>
{
i.Add().Label("United States").Value("1");
i.Add().Label("Canade").Value("2");
i.Add().Label("Mexiko").Value("3");
i.Add().Value("4").Encoded(false).Label("Other: " + Html.Kendo().DropDownListFor(x => x.ProviderId)
.DataSource(source => source
.Custom()
.Sort(x => x.Add(Html.NameFor(y => new Provider().Name)))
.Transport(x => x
.Read(read =>
{
read.Url($"https://{webApiHost}/fruehehilfen/api/Provider").Headers(new { authorization = user.TokenString });
})))
.DataTextField(Html.NameFor(x => new Provider().Name))
.DataValueField(Html.NameFor(x => new Provider().ID))
.HtmlAttributes(new { style = "width: 100%" })
.OptionLabel("Bitte auswählen").ToHtmlString());
})
)
I have an editor function, where I receive a dataItem parameter. I'm wondering if there's a way to retrieve the column name or index from this dataItem.
https://docs.telerik.com/kendo-ui/knowledge-base/radio-buttons-custom-editor
I'm trying to implement validation on he form , but having issues with radio button.
<div class="form-group row">
@Html.LabelFor(model => model.LanguageID, htmlAttributes: new { @class = "control-label col-md-2 required" })
<div class="col-md-10">
@(Html.Kendo().ComboBoxFor(m => m.LanguageID)
.Name("LanguageID")
.Placeholder(@Resources.Resources.LanguagePlaceholder)
.DataTextField("Description")
.DataValueField("Id")
.Filter("contains")
.Suggest(true)
.DataSource(s => s.Read(r => r.Action("GetLanguages", "Student")).ServerFiltering(false))
.HtmlAttributes(new { style = "width:300px" })
)
@Html.ValidationMessageFor(model => model.LanguageID, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group row">
@Html.LabelFor(model => model.WebsiteDisplay, htmlAttributes: new { @class = "control-label col-md-2 required" })
<div class="form-group k-radio-list">
<div class="checkbox">
@(Html.Kendo().RadioButtonFor(m => m.WebsiteDisplay).Label(@Resources.Resources.Yes).Value(true))
@(Html.Kendo().RadioButtonFor(m => m.WebsiteDisplay).Label(@Resources.Resources.No).Value(false))
@Html.ValidationMessageFor(model => model.WebsiteDisplay, "", new { @class = "text-danger" })
</div>
</div>
</div>
<script>
$(function () {
$("form").kendoValidator();
});
</script>
it does work for combobox and textboxes , but error is not displayed for radio button.
Am I missing something?
Is there a provision to make kendo radio & checkbox controls to take browser default styles?
Upper control has kendo styling & below checkbox has default browser styling, and this will be different for different browsers. Can we make kendo checkbox inherit the browser style.