Newbie, how to call function in app.js on change of a form, select object.

4 posts, 0 answers
  1. Boris
    Boris avatar
    2 posts
    Member since:
    Oct 2013

    Posted 20 Nov 2013 Link to this post

    Hello,

    I'm  new to both KendoUI and JQuery.
    I'm trying to create a new application and it's starting well.

    I'm creating a "Settings" page where a user would be able to choose skin, "Native" or "Flat".
    Those chooses are in a <form> and <select>,

    The part of view
    <li>
                        <label>Skin
                            <select class="skinchange">
                                <option value="">Native</option>
                                <option value="flat">Flat</option>
                            </select>
                        </label>
                    </li>

    I would like to call a function in "app.js" when an option is chosen.
    app.changeSkin = function (e) {
            if (e.sender.element.value() === "flat") {
                mobileSkin = "flat";
            }
            else {
                mobileSkin = "";
            }

            app.application.skin(mobileSkin);
        };

    I don't know how to do it or if it's possible :)

    By having following code in the index.html I can change the skin but I would prefer If I could concentrate all that stuff in .js files.
    <script>
        $( ".skinchange" ).change(function() {
            
            var mobileSkin = $(".skinchange").val();
            
            app.application.skin(mobileSkin);
        });
        </script>

    Best regards and thanks in advance!
  2. Steve
    Admin
    Steve avatar
    10940 posts

    Posted 21 Nov 2013 Link to this post

    Hello Boris,

    The default Kendo UI Mobile template in Icenium already contains the code that does that in a separate .js file, which is invoked on a button click from html page. You can review it and adapt it to work for your application from that template.

    Regards,
    Steve
    Telerik
    You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
    Looking for tips & tricks directly from the Icenium team? Check out our blog!
    Share feedback and vote for features on our Feedback Portal.
  3. Boris
    Boris avatar
    2 posts
    Member since:
    Oct 2013

    Posted 21 Nov 2013 Link to this post

    Hello Steve,

    Thank for you help!

    You are absolutely right but I tried to apply same function on a <select> object. I thought it would be nice to create a settings "view" with possibility to, through select object, directly change the skin. 
    Is it possible to invoke same function you are talking about, found in app.js, via a <select> object?

    If it's not possible then I must change my approach :)
    If it's possible then I would appreciate an example of how I can invoke function in app.js from an html object.

    Best regards!
  4. Steve
    Admin
    Steve avatar
    10940 posts

    Posted 22 Nov 2013 Link to this post

    Hi Boris,

    Thanks for the clarification, I now understood what you're trying to accomplish. Unfortunately it is not possible to reuse the same code, as it relies on the fact that the button is a Kendo UI widget. However Kendo UI Mobile does not have a DropdownList/Combo widget yet, which means that the select cannot be converted to a widget to make the current code applicable for select as well. Your approach of using jQuery to hook up appropriate event is the correct way to go!

    Regards,
    Steve
    Telerik
    You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
    Looking for tips & tricks directly from the Icenium team? Check out our blog!
    Share feedback and vote for features on our Feedback Portal.
Back to Top