Kendo Combobox rendering issue

[Divyang]

Hi,

I am not sure whether I should ask this question here or not.

But the combo box is not rendering properly in Visual Studio LightSwitch. It seems a JQuery Mobile issue more than LightSwitch though. However not being an expert in JQM it is becoming difficult for me to solve this. The JQuery version LightSwitch uses is 1.9.1 and the JQuery Mobile version it issues is 1.3.0. 

Please see attached file for the issue.

Thanks.

[Alexander Popov]

Hi Divyang,

This is most probably caused by a conflict between the Kendo UI and jQuery Mobile stylesheets. Generally speaking, using two UI frameworks at the same time is to be avoided, so I would suggest choosing one and sticking to it. Here are a couple of blog posts that compare the two:

• jQuery Mobile vs Kendo UI
• jQuery Mobile and Kendo UI Mobile - A DOM Comparison (a bit outdated, but still relevant)

Regards,
Alexander Popov
Telerik

 

 

[Divyang]

Thanks for the information Alex. This is really a big one for, as I am not sure whether I can replace JQM in LS as it is one of the fundamental libraries. I'll have spend some time to figure out if there is any solution or any alternative approach. But in case if I can't replace JQM, do you suggest I should stop using kendo UI?

[Alexander Popov]

In case the stylesheets are the only conflict you could use both by controlling which rules are used where. The integration between LighSwitch and JQM however are outside the scope of our expertise. 

Regards,
Alexander Popov
Telerik

 

 

[Divyang]

Yes, I understand that, just one confirmation please. My project is referencing the JQuery 1.9.1(jquery-1.9.1.min.js), so can I remove the jquery.min.js that ships with kendo?

[Alexander Popov]

It is actually strongly recommended to do so. Including multiple instances of jQuery could cause unpredictable and hard to debug behavior.

Regards,
Alexander Popov
Telerik

 

 

[Divyang]

I've found a work around to the issue, in LS or any other framework where JQuery Mobile interferes in rendering we can set the data-role='none' to the element in case it doesn't have any inner elements. And to render a plugin with child elements we can wait to JQM to finish applying its styling to the page by using:

$(document).on('pageinit', function(){

var myElelment = $('<input id="test"');

});