[Solved] Grid page dropdown shows twice with adaptive rendering

[Anamika]

Hello,

I have the mobile _layout.cshtml page with jquery.mobile css file along with kendo css. The kendo dropdown is displayed properly without any problem but when i display grid the page dropdown is shown twice once with normal kendo theme and a blue one below it similar to jquery mobile dropdown with blue rounded border. How can i handle this. Attached an image showing the problem . If i place a kendo dropdown in the page it has no such problem , can i use some stylesheet on page to overcome this?

Anamika

[Kiril Nikolov]

Hello Anamika,

In general Kendo UI does not work well in conjunction with jQuery mobile. The problem comes from the fact that both Kendo UI and jQuery use data attributes for the widget initializations, which messes up the widget initialization and the respective styles. You have two options here:

1. Try to modify the CSS, so you will hide the jQuery styling.
2. Prevent the jQuery mobile widget initialization, so no jQuery mobile dropdown is initialized. 

I hope this information will help you with resolving the issue.

Regards,
Kiril Nikolov
Telerik

 

 

[Anamika]

I tried doing this
 $(function () {
        $('select').attr('data-role', 'none');
       
    });

but works fine only on first time load, when page is reloaded this does not work any more. Any ideas??

[Kiril Nikolov]

Hello Anamika,

I am not really sure why this function execute only the first time the page loads.I would suggest you to take the CSS approach and the just hide the extra dropdown element with its display property. Please note that in general jQuery mobile is not recommended for usage along with Kendo UI because of the duplicated data-role attributes, and therefor your scenario is not officially supported.

Regards,
Kiril Nikolov
Telerik