Questions on Kendo UI for jQuery Forum

6 answers

584 views

Hi, I'm trying to add the Mobile Switch to a MVC 5 Web App but it is not rendering the switch widget, just a checkbox. Using the MVC Html wrapper, the HTML rendered is:

<input checked="checked" data-off-label="No" data-on-label="Yes" data-role="switch" id="scoring-switch" name="scoring-switch" type="checkbox">

The css files that are included in my layout page are:

<link href="@Url.Content("~/Content/kendo/2015.1.429/kendo.common-bootstrap.min.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("~/Content/kendo/2015.1.429/kendo.bootstrap.min.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("~/Content/kendo/2015.1.429/kendo.dataviz.bootstrap.min.css")" rel="stylesheet" type="text/css" />

And the js files from my bundleconfig are:

bundles.Add(new ScriptBundle("~/bundles/kendo/2015.1.429/kendoscripts").Include(

"~/Scripts/kendo/2015.1.429/kendo.all.min.js",

"~/Scripts/kendo/2015.1.429/kendo.aspnetmvc.min.js"));

Switch (Mobile)

answered on 02 Jun 2015

11 answers

226 views

Bug Found in Rendering of Switch - Off by 1px

Hello, I found a bug with the rendering if the switch. It renders off by exactly one pixel.

Please see the attached image. The top switch has the fix in place, the bottom one does not. You'll notice the underside shows one pixel column on the right.

The javascript was rendering the km-switch-handle class with an inline transformX, for 37px. It needs to be 38px to cover up the underside of the switch fully.

To fix this, I edited kendo.all.min.js. I replaced this line:

function(e){var t=this;t.position=e,t.handle.css(f,"translatex("+e+"px)"),t._animateBackground&&t.background.css(d,t.origin+e)}
with this line:

function(e){var t=this;t.position=e,t.handle.css(f,"translatex("+(e+1)+"px)"),t._animateBackground&&t.background.css(d,t.origin+e)}

However, while this fixed it when the switch was in the "on" state, it now has broken it by one pixel when the switch is in the "off" switch (see second attachment). Is there a permanent fix I can implement?

Thanks!!
-Chris

P.S. the only modifications I made to the default moonlight css is to change the on/off colors. Everything else is unchanged.

Switch (Mobile)

answered on 06 May 2015

3 answers

152 views

Bare minimum JS/CSS for Switch

We are interested in reducing the amount of code needing to load on our website. If we were just wanting to use some specific Kendo components, like Switch, what are the bare minimum Javascript and CSS files that would be required to get Switch to work?

If we want to use a few other components individually, how would we go about figuring out which JS/CSS files are necessary for those (so we don't have to ask about each one individually)?

Switch (Mobile)

answered on 12 Sep 2014

1 answer

450 views

Three State Switch

Hello

Is it possible to have 3 state switch (ON/OFF/not set)

I cannot find such option in configuration.

Regards
Marcin

Switch (Mobile)

answered on 08 Aug 2014

9 answers

146 views

Switch stays enabled?

I have a problem with using the switch widget in. When I set the data-enable="false" in the switch and run the program. The switch can still be set on or off. I thought the enable="false" option should disable that feature? I have tried running it on iphone with ios 7 and android 4.2 and they both have this problem. Can anyone help?

Switch (Mobile)

answered on 25 Mar 2014

13 answers

106 views

Switch "shaking"

Hello

We are experiencing issue with Switch component. When user change position(tap), most of the ui elements is moving a little bit(1-2px?) and then return back to original position. This only occures on android devices(tested on Galaxy S Advance, reported from older devices too, simulator works fine). We are experiencing same behavior on few other views that doesnt contain Switch component(mostly views with long lists with scrollbar).

I am able to reproduce the problem with fresh new project from template(kendo mobile ui). Just change initial home view like this:

<div class="view-content">

<h1>Welcome!</h1>

<a id="skin-change" data-role="button" data-click="app.changeSkin">Flat</a>

<p>

Telerik AppBuilder™ enables you to build cross-platform device applications regardless of your

development platform by combining the convenience of a local development toolset with the

power and flexibility of the cloud.

</p>

<input data-role="switch" data-on-label="" data-off-label=""/>

<div class="img"></div>

</div>

Switch (Mobile)

answered on 27 Feb 2014

2 answers

345 views

Reset Switch to before state

Hi,

I am building an app, with a mobile switch, but i can not reset it to default state.
The value is resetted, but the graphic shows it still on "J", the onlabel.
How can I reset this switch completely without removing it from DOM??
Like if it is off for default, it should be off after reset, for it is on for default, it should reset to on, independed on what state it actually is.
<label for="bb" id="ms">Bla or blub?
<input type="checkbox" data-role="switch" id="BB-switch" name="bb" data-change="switchChange" class="rrform" data-off-label="N" data-on-label="J" value="false"/>
</label>
// reset whole formular to default settings
function reset(){
var $res = $("#rrform").get(0);
$res.reset();
$("#MWST-switch").removeAttr('checked');
}
reset();

Switch (Mobile)

answered on 09 Sep 2013

1 answer

149 views

ListView of switches

Hello,
I have a basic listview, bound to a dataSource(JS array of objects), with an item template that contains a switch,
Ex:
<script id="listItemTemplate" type="text/x-kendo-template">
<div>
<a> #=name# </a>
<input type="checkbox" #if(data.selected) { # checked #}# data-role="switch" data-bind="checked: selected" />
</div>
</script>

The list is rendered corectly, however the switch data binding does not seem to be working.
Had to specify the [#if(data.selected) { # checked #}#], otherwise it woudn't have set the checked state corectly.
I expect 2 way binding. Thiking this should work.
Am i doing something wrong?

Regards

Switch (Mobile)

answered on 12 Jul 2013

2 answers

17 views

Switch is closing ModalView while changing the status yes to no and no to yes.

Hi,

I am using Modalview, in that i am using switch, when i change the switch status yet to no modalview is closing.

plese see the below code and find the attachment.

<div data-role="view" id="modalview-camera" data-title="HTML5 Camera" data-layout="mobile-tabstrip">
    <div data-role="footer">
        <div data-role="tabstrip">
            <a href="#tabstrip-settings" data-icon="contacts">Profile</a>
        </div>
    </div>

          <div data-role="content">
      <a data-role="button" data-rel="modalview" href="#modalview-login" id="modalview-open-button">Login</a>

<div data-role="modalview" id="modalview-login" style="width: 95%; height: 270px;">
    <div data-role="header">
        <div data-role="navbar">
            <span>Login</span>
            <a data-click="closeModalViewLogin" data-role="button" data-align="right">Cancel</a>

        </div>
    </div>
    <div data-role="content">
    <input data-role="switch" id="email-switch" checked="checked" />
    </div>

</div>
          </div>

</div>

Switch (Mobile)