Grid w/ MetroTouch w/ Jquery Mobile

[Peter]

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?

Peter

[Marin]

Hi,

 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,
Marin
the Telerik team

[niv kfir]

Hi,
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:
<script>
    $(document).bind('mobileinit', function () {
    $.mobile.page.prototype.options.keepNative = "input";
});
</script>

But it does not solve the problem.

Thanks,
Niv.




​

[Marin]

Hello,

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.

Regards,
Marin
Telerik

 

 

[Jaya]

hi
Hi
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#

[niv kfir]

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.

http://www.gajotres.net/how-to-remove-jquery-mobile-styling/

Hope it will help.
Niv