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

7 posts, 0 answers
  1. Tim
    Tim avatar
    9 posts
    Member since:
    Apr 2012

    Posted 18 May 2012 Link to this post

    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.


  2. Petyo
    Petyo avatar
    2444 posts

    Posted 18 May 2012 Link to this post


    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,
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Tim
    Tim avatar
    9 posts
    Member since:
    Apr 2012

    Posted 18 May 2012 Link to this post

    Thanks much! 
  4. Tim
    Tim avatar
    9 posts
    Member since:
    Apr 2012

    Posted 22 May 2012 Link to this post

    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/" 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:
                    <label for="customers">Customer:</label>
                    <input id="customers"/>

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

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

                    $(document).ready(function () {

    I attached the full project as well in a zip archive.
  5. Steve
    Steve avatar
    1888 posts
    Member since:
    Dec 2008

    Posted 22 May 2012 Link to this post

  6. Tim
    Tim avatar
    9 posts
    Member since:
    Apr 2012

    Posted 22 May 2012 Link to this post

    Thanks, but that didn't seem to make a difference. 
  7. Greg
    Greg avatar
    7 posts
    Member since:
    Apr 2012

    Posted 11 Jul 2012 Link to this post

    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} }
Back to Top