How to trigger a method from a user selection or button press

[Tim]

My general goal is this: I have two views, each with a <Select> control.  After the user selects a value in the first <select> control, I wish to fill the second <select> based on the first value.  

For example, the 1st select allows the user to choose a customer, then the 2nd select in the 2nd view is filled with locations where that customer operates. (and only that customer).

This seems like a common thing people would need to do, so I bet there's a simple solution that I'm missing, being pretty new to web development in general.  My apologies if this is the case.

My first attempt was to add an "onchange=method" property to the 1st select, and point it to a method to fill the 2nd select.  This did nothing, the method was not invoked.  I determined that I needed to set AutoPostBack="True".  I did this by replacing the <select> with <asp:DropDownList > since the <select> did not appear to support the autopostback property.

This failed to work at all on Opera running under the Android 2.3.3 emulator.
This *kinda* worked worked when viewed on Chrome under Windows, the method is invoked, but then after the postback, the entire app is reloaded and it goes back to a view before the one with the 1st select.  And even if it went to the correct view, this reloading of the app would be pretty bad anyway. And regardless, it's a mobile app that has to work on mobile browsers.

Is there a different approach to accomplish this?  Do I have use AJAX?  

FYI, I am developing in Visual Studio 2010, and using C# for the code behind.

Thanks,
Tim

[Petyo]

Hi,

I would like to recommend going through our documentation first.  As you have already discovered by yourself, the ASP.NET postback operations do not play well with the mobile application. Instead, the recommended way is the DataSource component, which all widgets use for data retrieval and CRUD operations with a very low resource footprint (which is very important for mobile devices). 

Worth mentioning is that most of the Kendo UI Web widgets are usable in a mobile application. In fact, the DropDownList widget features a demo which I believe accomplishes something pretty similar to what you describe. 

One last thing which you should keep in mind is that currently Kendo UI Mobile supports only webkit based mobile browsers. The exact full list can be found at the bottom of our demos homepage. 

In case you need any further assistance, I would like to recommend that you open a support ticket, preferably with a runnable project attached. We will do our best to help. 

Kind regards,
Petyo
the Telerik team

[Tim]

Thanks much! 

[Tim]

I have successfully made a kendoDropDownList that gets filled from my DB, thanks again for your suggestion and help.

However, although it is functional, it doesn't look like a Drop Down Box.  To demonstrate, I made a simplified project with just one page and all it has is the kendoDropDownList.  The user can click/tap the "Customer:" label and get the drop-down options, but shouldn't there be a separate more obvious-looking control to click/tap next to the label?  That is how it is shown in the DropDownList demo you linked to, but of course that demo is not a Mobile application. 

Here's what it looks like in my Android 4 emulator:



style/js data:
    <!--Kendo UI Mobile styles-->
    <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />

    <!-- Kendo UI Web styles-->
    <link href="styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />   
    <!-- <link href="styles/kendo.dataviz.all.min.css" rel="stylesheet" type="text/css" /> -->

    <!-- Kendo UI Web scripts-->
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/kendo.dataviz.min.js" type="text/javascript"></script>
    <script src="content/console.js" type="text/javascript"></script>   

    <!-- minified version of all scripts (Web, DataViz and Mobile). -->
    <script src="js/kendo.all.min.js" type="text/javascript"></script>

here's the pertinent HTML:
            <div>
                <label for="customers">Customer:</label>
                <input id="customers"/>
            </div>

And here is the javascript that creates the dropdown:
                function CreateDropDownList() {
                    $("#customers").kendoDropDownList({
                        optionLabel: "Select Customer...",
                        dataTextField: "CustomerName",
                        dataValueField: "CustomerID",
                        dataSource: fakeCustomerDataSource,

                        change: function () {
                            var value = this.value();
                            if (value) {
                                alert("Select Value:" + value);
                            }
                        }
                    });
                }

                $(document).ready(function () {
                    CreateDropDownList();
                }); 

I attached the full project as well in a zip archive.

[Steve]

Missing the common stylesheet perhaps?

http://cdn.kendostatic.com/2012.1.515/styles/kendo.common.min.css

[Tim]

Thanks, but that didn't seem to make a difference. 

[Greg]

A little late but you might try setting popup and animation settings to the dropdownlist.

popup: { appendTo: body },
animation: { open: { effects: body.hasClass("km-android") ? "fadeIn" : body.hasClass("km-ios") ? "slideIn:up" : undefined} }