How to trigger a method from a user selection or button press in Kendo UI for jQuery

This is a migrated thread and some comments may be shown as answers.

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

6 Answers 140 Views

This is a migrated thread and some comments may be shown as answers.

Tim asked on 18 May 2012, 02:50 PM

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

6 Answers, 1 is accepted

answered on 18 May 2012, 03:40 PM

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

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 22 May 2012, 04:50 PM

KendoMobileTestApp.zip

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:
    
    <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />

    
    <link href="styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
    

    
    <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>

    
    <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.