Setting Button click on mobile and desktop

8 posts, 0 answers
  1. Anthony
    Anthony avatar
    122 posts
    Member since:
    Jun 2013

    Posted 19 Jan 2015 Link to this post

    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
  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 21 Jan 2015 Link to this post

    Hello Anthony,

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

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Anthony
    Anthony avatar
    122 posts
    Member since:
    Jun 2013

    Posted 21 Jan 2015 in reply to Petyo Link to this post

    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

  5. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 23 Jan 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Anthony
    Anthony avatar
    122 posts
    Member since:
    Jun 2013

    Posted 23 Jan 2015 in reply to Petyo Link to this post

    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
  7. Anthony
    Anthony avatar
    122 posts
    Member since:
    Jun 2013

    Posted 26 Jan 2015 in reply to Anthony Link to this post

    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));
    }
    }
  8. Anthony
    Anthony avatar
    122 posts
    Member since:
    Jun 2013

    Posted 17 Feb 2015 in reply to Petyo Link to this post

    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
  9. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 19 Feb 2015 Link to this post

    Hello Anthony,

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

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready