Telerik Forums
Kendo UI for jQuery Forum
0 answers
14 views

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();
    }

Peter
Top achievements
Rank 1
 asked on 27 Feb 2024
1 answer
57 views
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?
Nikolay
Telerik team
 answered on 02 May 2023
1 answer
102 views
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"
            }
        });
}

Nikolay
Telerik team
 answered on 06 Sep 2022
0 answers
209 views

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?

Will
Top achievements
Rank 1
 asked on 31 Mar 2022
1 answer
152 views

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>

 

 

 

 

Kevin
Top achievements
Rank 2
Iron
 answered on 14 Jan 2022
0 answers
647 views
I would like to make the switch smaller (height especially) without changing the theme.  Is this possible?  Thanks.  
Sean
Top achievements
Rank 1
 asked on 08 Dec 2021
1 answer
68 views

Hi, 

I'm trying to add kendo mvvm switch to kendo mvvm grid cell,

Please give me a good example to do this on both on mvvm.

Georgi Denchev
Telerik team
 answered on 17 Aug 2021
5 answers
545 views

The switch's toggle() method doesn't fire the MVVM change event, nor does it update the viewModel property.

Setting the viewModel property obviously updates the viewModel property, but it too doesn't fire the change event.

Only clicking on the switch seems to fire it.

Both of the methods do change the visual state appropriately, and also end up changing the aria-checked value. Here is a dojo.

Is there a way to programmatically change the switch that also fires the change event?

Ivan Danchev
Telerik team
 answered on 01 Dec 2020
5 answers
118 views

Hi,

Could you please confirm or not that the Switch widget is compatible with IE9/10.

Seems not sure for me.

 

Best regards,

Laurent.

Julian
Top achievements
Rank 1
 answered on 15 Jul 2019
6 answers
590 views

Just wondering if this is something wrong that I am doing, intended mechanics or a bug. 

 

See dojo: https://dojo.telerik.com/EfAQemOn

 

If you change the state of the "switch" it does not register that the underlying value has been changed and maintains the previous recorded value. If you interact with the view model via the checkbox it is recording the change state.

Is this something that is easy to fix without having to check the state value via the onchange event which currently seems to be the way you are testing for the change state value? 

 

just incase I have copied the dojo code here for you as well. 

 

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/switch/mvvm">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.material-v2.min.css" />

    <script src="https://kendo.cdn.telerik.com/2019.1.115/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>
    

    <link rel="stylesheet" href="../content/shared/styles/examples-offline.css">
    <script src="../content/shared/js/console.js"></script>
</head>
<body>
<div id="example">
    <div class="demo-section">
        <input data-role="switch"
               data-bind="enabled: isEnabled, visible: isVisible, checked: isChecked, events: { change: onChange }" />
    </div>

  <input type="checkbox" data-bind="checked: isChecked, events: { change: onChange }"/> Change switch state
  
  
    <div class="box">
        <h4>Console log</h4>
        <div class="console"></div>
    </div>
</div>

<style>
    .demo-section {
        text-align: center;
    }
</style>

<script>
    var viewModel = kendo.observable({
        isChecked: true,
        isEnabled: true,
        isVisible: true,
        onChange: function (e) {
            kendoConsole.log("event :: change (" + (e.checked ? "checked" : "unchecked") + ") \r\n calling Directly::" + viewModel.isChecked +"\r\nCalling Via Get Method:: " + viewModel.get('isChecked'));
        }
    });
    kendo.bind($("#example"), viewModel);
</script>


</body>
</html>

 

Joana
Telerik team
 answered on 07 May 2019
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?