Questions on Kendo UI for jQuery Forum

1 answer

28 views

Switch design issue with last release and bootstrap theme

Hi,

The switch is very tiny!

Best regards,

Laurent.

Switch

answered on 09 Feb 2026

0 answers

106 views

KendoSwitch causing 2 events 2 events to fire on change

We are testing 2023.3.1114. I checked the release notes of 2024.1 and didn't see anything. We are using LitElement to make a custom control that creates the kendoSwitch as show below. Not sure what is triggering the 2nd event. Although, I think

initWidget() {
const selector = '#' + this.elemId;
const chkMsg = (typeof this.checkedMsg === 'string') ? this.checkedMsg : 'yes';
const unchkMsg = (typeof this.uncheckedMsg === 'string') ? this.uncheckedMsg : 'no';
const options = {
checked: this.isChecked,
enabled: this.isEnabled,
messages: {
checked: chkMsg,
unchecked: unchkMsg,
},
change: (e) => {
this.updateValue(e.checked);
}
};
$(selector).kendoSwitch(options);
}

updateValue(newValue) {
// fire a change event to the element
$(this).trigger(CHANGE, [newValue]);
this.textValue = String(newValue);
this.requestUpdate();
}

Switch

asked on 27 Feb 2024

1 answer

162 views

Style Kendo TreeView Checkboxes as Switches?

Is there a way to have switches instead of checkboxes (same look as the kendoSwitch control) in a TreeView as seen in the example below?

I am dynamically converting the checkboxes after the treeview initializes using a function that basically does this

$('input[type="checkbox"]:not([data-role="switch"])').kendoSwitch()

but it seems to have a lot of quirks that we have had to work around. Does the newest version of Kendo support switches in a TreeView out of the box?

Switch

TreeView

answered on 02 May 2023

1 answer

247 views

Kendo tree list - kendo switch

Good afternoon, excuse my English is bad,

I have a kendo treelist in which there is a boolean column with a kendo switch.
The problem is visual when interacting with my tree list the switch is painted several times as shown in the image:
 
this is the code i am using:

{
                    field: "IsModule", title: "@Mui.Is_Module",
                    //width: "70px",
                    editor: checkBoxEditor,
                    headerAttributes: { style: "text-align:center" },
                    attributes: { class: "text-center" },
                    template: "<input class='checkBoxEditor' #if (IsModule) { # checked='checked' # } # type='checkbox' disabled />"
                },

If anyone can give me an idea of what I'm doing wrong, I'd be very grateful.

 dataSource: dataSource,
            excelExport: exportExcel,
            columnMenu: true,
            editable: "inline",
            cancel: function (e) {
                var grid = this;
                var rowUid = e.container.data("uid");
                setTimeout(function () {
                    grid.element.find("tr[data-uid='" + rowUid + "'] .checkBoxEditor").kendoSwitch({
                        messages: {
                            checked: "@Mui.Yes",
                            unchecked: "@Mui.No"
                        }
                    });
                });
            },
            dataBound: function () {
                this.tbody.find(".checkBoxEditor").kendoSwitch({
                    messages: {
                        checked: "@Mui.Yes",
                        unchecked: "@Mui.No"
                    }
                });
            },

function checkBoxEditor(container, options) {
    $('<input type="checkbox" name="' + options.field + '"/>')
        .appendTo(container)
        .kendoSwitch({
            messages: {
                checked: "@Mui.Yes",
                unchecked: "@Mui.No"
            }
        });
}

Grid

Switch

TreeList

answered on 06 Sep 2022

0 answers

460 views

Control for multi-option toggle switch / slider? Does one exist?

Looking to upgrade from a random jquery plugin to a built-in if one exists. This is rendered as a hidden Radio Button with a bunch of Label elements.

Is there a Kendo UI component for this?

Switch

asked on 31 Mar 2022

1 answer

330 views

Kendo Switch 'k-switch-container' applied multiple times - once every time I call the 'check' method.

I'm using UI for ASP.NET Core release 2021.3.1207

I have a modal dialog, containing a Switch control plus a few other controls, that is displayed when a button is pressed.

When I simply show the modal, all is fine.

When I try to set the value of the Switch 'check' then show the modal, the switch is being re-initialized and there are TWO 'k-switch-container' tagsets. Closing the dialog and showing again adds a THIRD 'k-switch-container'. etc. etc.

These extra 'k-switch-container' effects are:

- cannot tab directly to the next field, as focus disappears until TAB is pressed again. Happens for every additional <span> so eventually you need to press multiple tabs just to visit the next field.

- also when you are 'focussed' on one of these phantom locations, you can still press SPACE which toggles the Switch.

Have I done something wrong or is this a bug?

Thanks,

My Dialog

<div class="modal-body">
    <form id="frmEvent" novalidate="novalidate" class="form-validation">
        <div class="form-group">
            <label>@L("Title")</label>
            <input id="txtTitle" type="text" class="form-control border-2" placeholder="@L("title")" />
        </div>
        <div class="mb-2">
            <div class="form-group">
                @(Html.Kendo().Switch()
                        .Events(ev => ev.Change("onChangeAllDay")) 
                        .Name("swAllDay")
                )
                <label class="ml-2 mb-2">
                    @L("AllDayEvent")
                </label>
            </div>
        </div>

        ....

    </form>
</div>

My Button Event

** if I uncomment these two lines, I start getting additional nested k-switch-container span tags upon EVERY show of the modal

function newEvent() {
    var today = new Date();
    $("#txtTitle").val('');
    $("#txtDescription").val('');
    $("#StartDatePicker").val(today.toLocaleDateString(kendoCurrentCulture));
    $("#StartTimePicker").val('');
    //var allDaySwitch = $("#swAllDay").kendoSwitch().data("kendoSwitch");
    //allDaySwitch.check(false);
    $("#eventModal").modal('show');
}

Here's the HTML after just loading the modal WITHOUT setting check.

<div class="form-group">
    <span class="k-switch k-widget k-switch-off" role="switch" tabindex="0" aria-checked="false" style="">
        <input id="swAllDay" name="swAllDay" type="checkbox" value="true" data-role="switch">
        <span class="k-switch-container">
            <span class="k-switch-label-on">On</span>
            <span class="k-switch-label-off">Off</span>
            <span class="k-switch-handle"></span>
        </span>
    </span>
    <input name="swAllDay" type="hidden" value="false">
    <script>kendo.syncReady(function(){jQuery("#swAllDay").kendoSwitch({"change":onChangeAllDay});});</script>
    <label class="ml-2 mb-2">
        All Day Event
    </label>
</div>

Here's the HTML after just loading the modal WITH setting check, several times.

<div class="form-group">
    <span class="k-switch k-widget k-switch-off" role="switch" tabindex="0" aria-checked="false" style="">
        <span class="k-switch k-widget k-switch-on" role="switch" tabindex="0" aria-checked="true" style="">
            <span class="k-switch k-widget k-switch-off" role="switch" tabindex="0" aria-checked="false" style="">
                <span class="k-switch k-widget k-switch-on" role="switch" tabindex="0" aria-checked="true" style="">
                    <span class="k-switch k-widget k-switch-off" role="switch" tabindex="0" aria-checked="false" style="">
                        <span class="k-switch k-widget k-switch-off" role="switch" tabindex="0" aria-checked="false" style="">
                            <input id="swAllDay" name="swAllDay" type="checkbox" value="true" data-role="switch">
                            <span class="k-switch-container">
                                <span class="k-switch-label-on">On</span>
                                <span class="k-switch-label-off">Off</span>
                                <span class="k-switch-handle">
                                </span>
                            </span>
                        </span>
                        <span class="k-switch-container">
                            <span class="k-switch-label-on">On</span>
                            <span class="k-switch-label-off">Off</span>
                            <span class="k-switch-handle"></span>
                        </span>
                    </span>
                    <span class="k-switch-container">
                        <span class="k-switch-label-on">On</span>
                        <span class="k-switch-label-off">Off</span>
                        <span class="k-switch-handle"></span>
                    </span>
                </span>
                <span class="k-switch-container">
                    <span class="k-switch-label-on">On</span>
                    <span class="k-switch-label-off">Off</span>
                    <span class="k-switch-handle"></span>
                </span>
            </span>
            <span class="k-switch-container">
                <span class="k-switch-label-on">On</span>
                <span class="k-switch-label-off">Off</span>
                <span class="k-switch-handle"></span>
            </span>
        </span>
        <span class="k-switch-container">
            <span class="k-switch-label-on">On</span>
            <span class="k-switch-label-off">Off</span>
            <span class="k-switch-handle"></span>
        </span>
    </span>
    <input name="swAllDay" type="hidden" value="false">
    <script>kendo.syncReady(function () { jQuery("#swAllDay").kendoSwitch({ "change": onChangeAllDay }); });</script>
    <label class="ml-2 mb-2">
        All Day Event
    </label>
</div>