Telerik Forums
Kendo UI for jQuery Forum
1 answer
71 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.0K+ 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
794 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
80 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
501 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
13 answers
305 views
Hello,

We would like to use the mobile switch without doing an entire mobile application (i.e. within an HTML5/CSS3 application using Kendo Web UI).  I have managed to determine the minimum integration with Kendo Mobile to get a switch control to work, but unfortunately, by running new kendo.mobile.Application, it affects other controls, like kendo drop-down-lists (see the attached graphic for a sample of what happens to a kendo drop-down list).

I tried localizing the scope of the effects by defining a <div> just around the switch and calling new kendo.mobile.Application($("#divAroundTheSwitches")), but this didn't work -- no switches were created.

Is it feasible to try to use mobile platform widgets in a non-mobile HTML5/CSS3 application?  Any direction you could give would be greatly appreciated.

Thank you!
Ianko
Telerik team
 answered on 29 Mar 2018
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?