Why currency (KendoNumericTextBox with format c) field looks so different in a list view

6 posts, 1 answers
  1. Sergei
    Sergei avatar
    5 posts
    Member since:
    Mar 2016

    Posted 19 Mar Link to this post

    I am having a problem with a simplest of forms that uses a list view to contain fields. I have two NumericTextBox fields with format set to 'c0' (currency), one outside of the listview and another inside. I want both to look same like the one outside of the list. What's wrong and how can I fix that? Thanks a lot!

    HTML:

    <div data-role="view" data-title="Home" data-model="app.home" data-show="app.home.onShow" data-after-show="app.home.afterShow">
        <div id="homeModel" class="form-view">
            <form>
                    <div class="form-content-item">
                        <label>
                            <span>Income 2</span>
                            <input id="income2" data-bind="value: homeModel.fields.income" type="number">
                        </label>
                    </div>
                <ul class="form-content" data-role="listview" data-style="inset">
                    <li>
                        <label>
                            <span>Income</span>
                            <input id="income" data-bind="value: homeModel.fields.income" type="number">
                        </label>
                    </li>
                </ul>
                <div class="button-group">
                    <a class="primary" data-role="button" data-bind="events: { click: homeModel.submit }">Results</a>
                </div>
            </form>
        </div>
    </div>

    Script:

    app.home = kendo.observable({
        onShow: function () {
            $("#income").kendoNumericTextBox({
                format: "c0",
            });
            $("#income2").kendoNumericTextBox({
                format: "c0",
            });
        },
        afterShow: function () {}
    });

     

     

  2. Sergei
    Sergei avatar
    5 posts
    Member since:
    Mar 2016

    Posted 19 Mar Link to this post

    It seems regardless of a format (c or n), numericTextBox fields look very differently when inside of a list. Is it done on purpose? Can that be reversed by configuring?
  3. Kendo UI is VS 2017 Ready
  4. Sergei
    Sergei avatar
    5 posts
    Member since:
    Mar 2016

    Posted 19 Mar Link to this post

    This appearance of numeric fields is caused by the date-role="listview" attribute on the ul element. The radio buttons also do not appear correctly, only one of them shows up - they are all on top of each other. What am I doing wrong? It's a new app and a view is created by the view editing tool. 

    <div data-role="view" data-title="Home" data-model="app.home" data-show="app.home.onShow" data-after-show="app.home.afterShow">
        <div id="homeModel" class="form-view">
            <form>
                <ul class="form-content" data-role="listview" data-style="inset">
                    <li class="group-separator">
                        <h4 class="group-separator-header">You</h4>
                    </li>
                    <li class="form-content-item">
                        <label>
                            <span>Age</span>
                            <input id="age" data-bind="value: homeModel.fields.age" type="number">
                        </label>
                    </li>
                    <li class="form-content-item">
                        <label>
                            <span>Gender</span>
                            <input  data-bind="checked: homeModel.fields.gender" value="Male" type="radio" name="gender">Male</input>
                            <input  data-bind="checked: homeModel.fields.gender" value="Female" type="radio" name="gender">Female</input>
                        </label>
                    </li>
                    <li class="form-content-item">
                        <label>
                            <span>Income</span>
                            <input id="income" data-bind="value: homeModel.fields.income" type="number" >
                        </label>
                    </li>
                </ul>
                <div class="button-group">
                    <a class="primary" data-role="button" data-bind="events: { click: homeModel.submit }">Results</a>
                </div>
            </form>
        </div>
    </div>

  5. Sergei
    Sergei avatar
    5 posts
    Member since:
    Mar 2016

    Posted 19 Mar Link to this post

    More information about my app below. Any help is appreciated!

    index.html

    <!DOCTYPE html>
    <html>

    <head>
        <title></title>
        <meta charset="utf-8">
        <link href="kendo/styles/kendo.common.min.css" rel="stylesheet"/>
        <link href="kendo/styles/kendo.default.min.css" rel="stylesheet"/>
        <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet">
        <link href="styles/overrides.css" rel="stylesheet">
        <link href="styles/main.css" rel="stylesheet">
        <script src="cordova.js"></script>
        <script src="kendo/js/jquery.min.js"></script>
        <script src="kendo/js/kendo.all.min.js"></script>    
        <script src="kendo/js/kendo.mobile.min.js"></script>
        <script src="app.js"></script>
    </head>

    <body id="kendoUiMobileApp">
        <script src="components/home/index.js"></script>
        <div data-role="layout" data-id="main">
    ...

    app.js

    'use strict';

    (function() {
        var app = {
            data: {}
        };

        var bootstrap = function() {
            $(function() {
                app.mobileApp = new kendo.mobile.Application(document.body, {
                    transition: 'slide',
                    skin: 'flat',
                    initial: 'components/home/view.html'
                });
                kendo.culture("en-US");
            });
        };

        if (window.cordova) {
            document.addEventListener('deviceready', function() {
                if (navigator && navigator.splashscreen) {
                    navigator.splashscreen.hide();
                }
                bootstrap();
            }, false);
        } else {
            bootstrap();
        }

        app.keepActiveState = function _keepActiveState(item) {
            var currentItem = item;
            $('#navigation-container li a.active').removeClass('active');
            currentItem.addClass('active');
        };

        window.app = app;

        app.isOnline = function() {
            if (!navigator || !navigator.connection) {
                return true;
            } else {
                return navigator.connection.type !== 'none';
            }
        };
    }());

  6. Answer
    Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 23 Mar Link to this post

    Hello Sergei,

    In general, Kendo Web widgets are not designed to be placed within Kendo Mobile widgets without the need to re-style them. This is the exact case here, as you will need to override some of the default mobile styles in order to the NumericTextBox widget:
    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Sergei
    Sergei avatar
    5 posts
    Member since:
    Mar 2016

    Posted 23 Mar Link to this post

    Georgi,

    Thank you for the help. If I need to restyle I will restyle. Got styles for the radios?

    It seems one of the biggest challenges of starting with Kendo is to understand what is Kendo UI and what is Kendo UI Mobile.It would be nice if the components were marked as regular or mobile on the page that lists them. 

    Thanks again,

    Sergei

Back to Top
Kendo UI is VS 2017 Ready