Grid w/ MetroTouch w/ Jquery Mobile

6 posts, 0 answers
  1. Peter
    Peter avatar
    72 posts
    Member since:
    Mar 2012

    Posted 28 Jan 2013 Link to this post

    I have a grid on a page with the skin MetroTouch on a jquery mobile page.   When the grid renders, the Jquery Mobile applies styles to elements of the grid, such as the filter.

    I want to add --data-role="none"-- to all aspects of the grid and let it render with the MetroTouch style only.   How can I do this?

  2. Marin
    Marin avatar
    1057 posts

    Posted 31 Jan 2013 Link to this post


     Indeed it possible to hit such overlapping of the styles when using jQuery Mobile with RadControls on the page. To resolve it you should iterate over all DOM elements that need to be excluded from the jQuery styling and set the data-role="none" attribute. You can get all "a", "input" etc. elements from the grid (e.g. by using jQuery) and apply the respective attribute if required.

    All the best,
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. niv kfir
    niv kfir avatar
    21 posts
    Member since:
    Apr 2010

    Posted 18 Feb 2015 in reply to Marin Link to this post

    I facing the same problem - All the input and buttons fields of the radGrid looks bad when having a reference to JQuery-Mobile.
    (please see attached file)

    I added the following code:
        $(document).bind('mobileinit', function () {
        $ = "input";

    But it does not solve the problem.


  4. Marin
    Marin avatar
    1057 posts

    Posted 19 Feb 2015 Link to this post


    The approach seems viable in this case. You can check if it is working correctly and apply the data-role: "none" attribute to the necessary elements. The grid does not have only input elements that are picked up by the jQuery mobile styling but also <a> <table> etc. You may need to add those as well to the keepNative  option to see it improve the result.
    Another thing is try to manually iterate over the inner elements and add the data-role="none" attribute if the other approach does not work correctly.


    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

  5. Jaya
    Jaya avatar
    85 posts
    Member since:
    Mar 2011

    Posted 19 Feb 2015 in reply to Marin Link to this post

    I have Bind My TelerikRadgrid Label, checkbox , Textbox etc some controls 

    here when i click button click event i need how to find Telerik radgrid controltype name for ex:

    How to find Label control id and Checkbox id and Textbox id how will do this C#
  6. niv kfir
    niv kfir avatar
    21 posts
    Member since:
    Apr 2010

    Posted 19 Feb 2015 in reply to Peter Link to this post

    I just got an answer about this from Viktor Tachev (in a different thread)

    The behavior is caused because the styles for jQuery mobile override the default styles of RadGrid. In order to prevent the issue you need to disable the jQuery mobile styles. Check out the following blog post that illustrates how you can disable jQuery mobile styles.

    Hope it will help.
Back to Top