Telerik Forums
Kendo UI for jQuery Forum
0 answers
3 views

We are trying to Update kendo from 2020.3.1021 to 2024.1.319, we download the version and then we just copy the kendo.all.min.js, but when we start running the application the drop downs are all oversize, the arrow grouping for the grids is black, but the main thing is we use the kendoMobileSwitch, but every where we try to use we get the error "Uncaught TypeError: $(...).kendoMobileSwitch is not a function".

 

The questions is, do we need to add any additional js reference file to use this function ?

this is how all the drop downs were affected.

this is the arrow grouping image that is back

and the js error is when we try to call like this: $("#element").kendoMobileSwitch({ checked: true });, we get the error "Uncaught TypeError: $(...).kendoMobileSwitch is not a function"

 

Sabino
Top achievements
Rank 1
 asked on 03 May 2024
1 answer
85 views

Hello, 

I got a custom button on my toolbar , which opens a modal, but , when i tried to open in mobile mode , it stops working

see the code below

 

    $('#pdfViewer').css('width', '100%');
    var request = new XMLHttpRequest();
    request.responseType = 'blob';
    request.onload = function () {
        var reader = new FileReader();
        reader.readAsDataURL(request.response);
        reader.onload = function (e) {
            $("#pdfViewer").kendoPDFViewer({
                pdfjsProcessing: {
                    file: {
                        data: e.target.result.split(",")[1]
                    }
                },
                toolbar: {
                    items: [ 
                        "zoomInOut",
                        {
                            type: "button",
                            name: 'Description',
                            template: '<button type="button" onclick="openModal()" title="Description" class="k-button k-button-md k-button-flat" id="btn-Description"><span class="k-icon k-i-toc-section-level"></span></button>',
                        }
                    ]
                },
                width: "100%",
                height: 760
            }).getKendoPDFViewer();
        };
    };

 

on browser desktop modal it works normally

Martin
Telerik team
 answered on 10 Oct 2023
6 answers
1.9K+ views
Hi Alexander/Telrik -

I would like to know if there is a way to see if the switch is either checked or unchecked?

Basically something like: ON || OFF

if switch.OFF:then run this.function()
If switch.NOT.OFF run that.function();


I had a look at your examples on the demo page but only show a console.log("Checked?Unchecked")
Which toggies with the switch but doesn't allow binding a specific event to the status of a switch.

Thanks in advance.



John
Top achievements
Rank 2
Iron
Iron
Veteran
 answered on 14 Apr 2022
2 answers
1.8K+ views

is there any way ,to get the Change event of kendo switch with jquery?i dont want to use kendo helper

<input type="checkbox" id="tst" aria-label="Notifications Switch" />
the following does not work:

$("#tst").change(function(){ alert("works");});

 

i

John
Top achievements
Rank 2
Iron
Iron
Veteran
 answered on 18 Nov 2021
13 answers
4.1K+ views

Hello,

I am trying to add a kendo switch to the kendo grid placed within kendo window.

My use case is following:

I create kendo window as directive in angularjs and then display it on button click. 

I create column template for boolean value with kendo switch.

Grid is rendered at load time and no matter what I do, it displays ordinary checkbox or textbox if i remove type="checkbox".

I tried doing the same on following dojo and I get the same results with other data:

https://dojo.telerik.com/oKeXihIW

Just to mention that on the form that invokes directive I have switch and displays properly.

 

Thank you and regards,

Vedad

Vaibhav
Top achievements
Rank 1
 answered on 22 Apr 2021
5 answers
813 views

I am working on an old site that uses the old MVC wrappers(before kendo), not sure if that has anything to do wit my problem.
I have added several kendo switches to a page, I tried using the Kendo MVC wrappers but I just get a plain checkbox, so using the plan old kendo JavaScript widgets and they are showing up just fine. My problem is that the events don't fire.

my code

<div class="form-group">
           @Html.LabelFor(Function(model) model.OrderCompleted, htmlAttributes:=New With {.class = "control-label"})
           <div>
               @Html.EditorFor(Function(model) model.OrderCompleted, New With {.htmlAttributes = New With {.class = "form-control kendo-switch", .data_change = "switchChange"}})
               @Html.ValidationMessageFor(Function(model) model.OrderCompleted, "", New With {.class = "text-danger"})
           </div>
       </div>
resulting html
<div>
                <span class="km-switch km-widget km-switch-off" style="-ms-touch-action: double-tap-zoom pinch-zoom;"><input name="OrderCompleted" class="form-control kendo-switch check-box km-widget" id="OrderCompleted" type="checkbox" value="true" data-role="switch" data-val-required="The OrderCompleted field is required." data-val="true" data-change="switchChange">        <span class="km-switch-wrapper"><span class="km-switch-background" style="margin-left: 0px;"></span></span>         <span class="km-switch-container"><span class="km-switch-handle" style="transform: translateX(0px) translateY(0px);">             <span class="km-switch-label-on">YES</span>             <span class="km-switch-label-off">NO</span>         </span>     </span></span><input name="OrderCompleted" type="hidden" value="false">
                <span class="field-validation-valid text-danger" data-valmsg-replace="true" data-valmsg-for="OrderCompleted"></span>
            </div>
<script>
    function setBoolean() {
        if ($(".kendo-switch").length) {
            $(".kendo-switch").kendoMobileSwitch({
                onLabel: "YES",
                offLabel: "NO"
            });
 
        }
    }
    function switchChange(e) {
        alert()
       // alert(e.checked)
        // alert(e.id)
    }
 
 
    
        setBoolean()
 
 
</script>

Thanks
Dimitar
Telerik team
 answered on 11 Feb 2019
1 answer
1.3K+ views

I have a check box and kendo switch,i want the switch to be disabled by check the checkbox and enabled by un-check the checkbox,i think 4 years back this was a question and as it was answered at the time,should be able to do so,any way here is the code:

 

  
      <input type="checkbox" id="eq1" class="k-checkbox"> 
     <label>Crew Present:</label><input type="checkbox" id="notifications-switch" aria-label="Notifications Switch" disabled="disabled" />
      <label>Grid Loss:</label><input type="checkbox" id="notifications-Grid" aria-label="Notifications Switch" disabled="disabled" />

here is the JS:

 

 $(function () {
          $("#notifications-switch").kendoMobileSwitch();

          //$("#notifications-Grid").kendoMobileSwitch();

      });


      $("#eq1").change(function () {
          debugger;
          $("#notifications-Grid").prop("disabled", !$(this).is(":checked"));
      });

Ivan Danchev
Telerik team
 answered on 23 Aug 2018
3 answers
83 views

Hi,
I would like to be able to check/uncheck the switch with the keyboard
but nothing bind to the switch. i tried : 

scope.toggleSwitch.bind("keyup", toggleKeyUp);
scope.toggleSwitch.bind("focus", toggleFocus);
scope.toggleSwitch.bind("click", toggleclick);

any idea wuld be appreciate thanks

Stefan
Telerik team
 answered on 13 Aug 2018
9 answers
515 views
Hi! Could you provide me small example to bind model member (boolean) to Switch widget state.
I would expect something like
<input data-role="switch" data-bind="checked:checked"/>

But it looks terrible and does not work. Another question: why after binding my Tabstrip looks "doubled"
http://jsfiddle.net/GewUa/5/ 
Konstantin Dikov
Telerik team
 answered on 02 Jul 2018
Narrow your results
Selected tags
Tags
+? more
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?