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

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

5 Answers 191 Views

NumericTextBox

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

Sergei asked on 19 Mar 2016, 06:59 PM

currency.png

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 () {}
});

5 Answers, 1 is accepted

answered on 19 Mar 2016, 10:10 PM

numbers.png

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?

answered on 19 Mar 2016, 10:57 PM

kendopage.png

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>

answered on 20 Mar 2016, 01:48 AM

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';
}
};
}());

Accepted