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

[Solved] NumericBox Does Not Render Correctly

5 Answers 144 Views

NumericBox for HTML

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

This question is locked. New answers and comments are not allowed.

John DeVight asked on 12 Jul 2012, 12:00 PM

split.png

I have a DropDownList and a NumericBox on a page. The DropDownList is fine, but the NumericBox does not render properly on the page. Here is the html:

<input id="taskEstimatedHours"

data-win-control="Telerik.UI.RadNumericBox"

data-win-options='{ format: "n0", min: 0, max: 100 }' />

What am I missing?

Attached is a screenshot of what I get.

Below is the html for the entire page:

<!DOCTYPE html>

<html>

<head>

<title>splitPage</title>

</head>

<body>

</div>

</h1>

</header>

</div>

</h2>

<h4>Title</h4>

</div>

<input id="taskType"

data-win-control="Telerik.UI.RadDropDownList"

data-win-options='{

dataTextField: "title",

dataValueField: "id",

}' />

</div>

<h4>Completed Date</h4>

<div id="taskCompletedDate"

style="float:left;"

data-win-control="WinJS.UI.DatePicker"

data-win-options="{disabled:false,maxYear:2020,minYear:2001}">

</div>

<h4>Assigned To</h4>

<input id="assignedTo"

data-win-control="Telerik.UI.RadDropDownList"

data-win-options='{

dataTextField: "name",

dataValueField: "key",

}' />

</div>

<h4>Estimated Hours</h4>

<input id="taskEstimatedHours"

data-win-control="Telerik.UI.RadNumericBox"

data-win-options='{ format: "n0", min: 0, max: 100 }' />

</div>

</article>

</div>

</body>

</html>

5 Answers, 1 is accepted

Accepted

answered on 12 Jul 2012, 01:24 PM

Hello John,

Starting with the beta release, we adopted a unified approach for creating our controls - all dropdown and textbox controls should be created using a <span> tag. This is to remove confusion (whether you should use input, select, etc).

To fix your issue, define your NumericBox using a span:

<span id="taskEstimatedHours"

data-win-control="Telerik.UI.RadNumericBox"

data-win-options='{ format: "n0", min: 0, max: 100 }' ></span>

Regards,
Lini
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>