Setting Button click on mobile and desktop

[Anthony]

Hi
  On Desktop I use kendoButton, on mobile I use kendoMobileButton, either way at the moment the object I bind to will look something like:

<button onclick=""/>

I recently found out about the 300ms delay on iPhones, apparently I should use something like the below on iPhones

 <button data-role="button" data-click="...

i.e. use data-click rather than onclick.

This doesn't seem to work on desktop. 
- Is there a common way of setting click on a button on both the kendoButton and kendoMobileButton?
- If not what approaches are available?

i.e. I saw an example with data-bind="onclick... but couldn't get that to work on desktop either, guessing that's a MVVM model (which I don't use)

I have Partial Views in Asp.Net MVC which are common to desktop and mobile, I don't really want to introduce the below everywhere

if (mobile)
  button style 1
else
  button style 2

thanks

[Petyo]

Hello Anthony,

the button clicks seem to work as expected on desktop in this demo.

Regards,
Petyo
Telerik

 

 

[Anthony]

I think you misunderstood, the demo you linked to is for a mobile button.

My scenario is this.

I have a button

<button id=myButton...>

on Desktop I use this:

$('#myButton').kendoButton

on mobile I use this

$('#myButton').kendoMobileButton

and that's fine. However I need to bind an onclick. With the kendoMobileButton I use need to use data-click but it doesn't seem that the desktop version uses data-click, instead I have to use onclick, which means I have to do this:

@if (mobile)
  <button id=myButton  data-click="MyClick>
else
  <button id=myButton  onclick="MyClick()">

In every location where we use a button

My question was does kendo have a generic way of attaching on onclick which would work with both? In an ideal world kendoButton would use data-click as well.

Thanks

[Petyo]

Hi Anthony,

the mobile and desktop buttons do not have compatible APIs/configuration options - mostly because they serve different purposes. For instance, the web button does not need the data-click evetn, as it would not differ from the built-in onclick event. 

Regards,
Petyo
Telerik

 

 

[Anthony]

Ok, thanks for the info.

I'm surprised that no one else has run into the same problem, even though our desktop and mobile pages look completely different they share common blocks of text inputs and buttons

I guess I need something like

data-click="some function"

then before I call
$('#id').kendoButton
have a javascript prestep which sets something like onclick="data-click()". I'll have a play with the mechanics later

[Anthony]

For anyone else looking into this in the future, an easier route for anyone using Asp.Net MVC

Just make an OnClick helper

so
data-click="func"
or
onclick="func()"

becomes

@(OnClick("func"))

Where onclick is just a method in your CustomWebViewPage, in my case with this

public HtmlString OnClick(CommonDataStore commonData, string onclickFunction)
{
if (IsMobile)
{
return new HtmlString(string.Format("data-click=\"{0}\"", onclickFunction));
}
else
{
    return new HtmlString(string.Format("onclick=\"{0}()\"", onclickFunction));
}
}

[Anthony]

Hi
  I know you've said the desktop and mobile buttons don't have compatible APIs. I just ran across this blog post

http://blogs.telerik.com/kendoui/posts/12-04-26/kendo_ui_protips

In which someone recommends using binding to achieve something very like what I was asking for, specifically to use data-click with desktop (not mobile) buttons. Example below.

http://dojo.telerik.com/utaZi

Is there any good reason not to do this?

thanks

[Petyo]

Hello Anthony,

this is also a solution - feel free to use it. 

Regards,
Petyo
Telerik