Kendo Combobox alternative for mobile view (or any control like jQuery Mobile custom select with filter) - jquery-mobile

I am facing problem with Kendo Combobox control for mobile view. If I focus it; then it brings virtual keyboard and combobox data goes down. It makes problem for mobile view only.
Please consider following control form jQuery mobile
http://demos.jquerymobile.com/1.4.2/selectmenu-custom-filter/
It is perfect for mobile view. It brings new window; from where user can choose data. Is there any equivalent control in Kendo which fits with mobile view?

Related

Jquery UI Combobox Functionality in JSF

JSF has autocomplete functionality with enablemanualInput but whenever I try to input a new value which is not present in the dropdown list it turns red and dropdown keeps open to show that no such entry is available. I want to replicate combobox functionality currently present in html/JQUERY UI. Is there any way to do so.

SelectMenu Widget data-native-menu attribute when in popup

When I use this setting I have one in a form in a dialog, and one in a form that is in a popup. The dropdowns look different.
When data-native-menu="false" the dropdown in the dialog appears in another dialog, which actually looks quite nice. I assume this will allow a more consistent look and feel accross devices.
However when I use this setting data-native-menu="false" on a Select in a popup it does not show the standard select, not the dialog.
Thanks
There's a good reason for this.
As you can see there are 2 kinds of select widget. First one uses native looking select box (one showed with data-native-menu="true"). Other one still uses native select box but it hides it and shows custom jQuery Mobile select box widget (one showed with data-native-menu="false"). This jQuery Mobile widget is shown as popup. This is important point.
Second, mentioned problem is unsolvable, at least from the point of current jQuery Mobile framework, and here's why. In few words, when working with jQuery Mobile popups, one popup can't open another popup. Two popups can exist in the same time. Thou you can always close one popup before opening another one, but this is not usable in your case. Because jQuery Mobile select widget is popup it can't be used inside classic popup widget.
If you don' believe me you can find it in official documentation here, just search for text: "Chaining of popups not allowed". And you will see this text:
The framework does not currently support chaining of popups so it's not possible to embed a link from one popup to another popup. All links with a data-rel="popup" inside a popup will not do anything at all.
On the other hand, dialog is a variation of a classic jQuery Mobile page, just with large margin and semi transparent overlay. It can be used to show popup, just like normal jQUery Mobile page.

Kendo and Design on Tablets

Actually, I'm developing a MVC application with Kendo controls. I'had realice a Web template with kendo controls and show correclty.
For the web, Kendo controls display correctly, so I decided to do it for mobile.
The result was good, it worked DEMO following the example of the Kendo Telerik TabStrip.
https://dl.dropboxusercontent.com/u/3877624/Kendo/mobile_example.gif
Agree, no problem. (I thought) I'll do the same for tablets ...
I copied with the same contents of the view into a new view for tablets, and the same content of the layout for the tablet. Ultimately, it has been copied and pasted, but identifying one for tablet and one for mobile.
When I run the application on a tablet emulator, open the template and the content of the tablets correctly, but is not the same design as seen on mobile and do not know what exactly is going on.
https://dl.dropboxusercontent.com/u/3877624/Kendo/tablet_example-%5B1280x768%5D.jpg
On the tablet, the background is always black, the colors are not displayed correctly, etc. I don't know if the probler are from Opera emulator or other cause, because the files are the same.
Can anyone help?
The 1st screenshot is of Kendo UI Mobile in iOS styling, and the second is in Android styling. For whatever reason, Kendo is detecting iOS in one case and Android in another, and tries to re-style itself to fit the native look of the OS.
You can see the differences here: http://demos.kendoui.com/mobile/overview/index.html#/ by choosing different OSes on the top right "OS Simulator Mode"
You can force Kendo UI Mobile to always use the iOS look by adding this when you initialize the application:
new kendo.mobile.Application($(document.body), {
platform: "ios"
});

JQuery mobile, is there a way to prevent the SELECT box from becoming a dialog page?

SO I have a select box that I fill dynamically. I discovered that once the SELECT gets longer than the page, it automatically becomes a dialog listview.... which is TERRIBLE!
When this happens, the page refreshes when the dialog is closed and my whole page starts over....
Has anyone experienced that and do you know how to shut it off?
Thanks!
Todd
You could use the native look and feel?
http://jquerymobile.com/demos/1.0.1/docs/forms/forms-all-native.html
Native form elements & buttons Although the framework automatically enhances form elements and buttons into touch input
optimized controls to streamline development, it's easy to tell jQuery
Mobile to leave these elements alone so the standard, native control
can be used instead.
Adding the data-role="none" attribute to any form or button element
tells the framework to not apply any enhanced styles or scripting. The
examples below all have this attribute in place to demonstrate the
effect. You may need to write custom styles to lay out your form
controls because we try to leave all the default styling intact.

Popup Dialog Not Re-drawing after initial launch

I have a dropdown listbox on my main page with a button on the same page that launches a pop-up dialog box, also having a dropdown list box. I need the selected index of the 1st listbox control to be synched with the pop-up dialog dropdown listbox.
I have added code to my Controller that sets the index in the ViewData object to be retrieved by the popup and it works on the initial launch of the App. My problem is any subsequent launches of the pop-up dialog won't hit its corresponding code to set the index using the ViewData. The code that needs to be executed is:
<%= Html.Telerik().DropDownList()
.Name("DataStoreTypeId")
.BindTo(new SelectList(Model.DataStoreTypes, "DataTypeId", "Name",Model.DataTypeSelectedId))
.HtmlAttributes(new { style="width:205px })
.SelectedIndex((int)ViewData["SelectedIndex"])
%>
Coming from an ASP.NET background, I am accustomed to having postbacks as mechanisms to handle these types of actions, but MVC has trimmed the postback events which is great for performance but what are my options to force code execution now?
Should I be using other alternatives?
First time it works because its value is set on server side. once its rendered in the browser there is no server side left. you have to manually change the selected value of your telerik dropdown list on button click event next to your first drop down list (is first DD also telerik dropdown or html one). For client events of telerik dropdown have a look at Telerik Demos for asp.net mvc

Resources