Kendo UI Number Formatting Invalid template - kendo-ui

I'm using kendo ui and I tried setting a tooltip template like this:
tooltip.template = "#= series.name #: #= kendo.toString(value, 'n') # "
But the numbers like 527266 are showing like this : 527.266,00
How can I make it 527.266 ?
I tried as test:
tooltip.template = "#= series.name #: #= kendo.toString(value, '##,#') # "
which is an example in the documentation, and should give 527,266 according to the example but it's caughting an error of Invalid Template.
How can I make numbers 527266 look 527.266

You can use (kendo.toString(527266 , 'n0') to hide decimal numbers. Since it is culture specific, you will need to include culture specific JavaScript file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
</head>
<body>
<p>Input: 527266</p>
<p>Output: <span id="result"></span></p>
<script src="http://kendo.cdn.telerik.com/2013.2.716/js/cultures/kendo.culture.de-DE.min.js"></script>
<script>
kendo.culture("de-DE");
$("#result").text(kendo.toString(527266 , 'n0')); // outputs "527.266"
</script>
</body>
</html>

I'm not able to find another way to kendo format as I'm pleased. the only workaround I'm using till now is:
template: "#= formatAmount(FundCurrency ,FundValue) #"
and in your Js create a function.
function formatAmount(currency, amount) {
if (amount) return currency + " " + kendo.toString(amount, "#,##0.00");
return "";
}
All this trouble just because # inside the format is conflicting with the special tags #= ... #, and unless you start to format the string using "\#,\#\#0.00" it won't work, I guess.

I was having the same problem as you, although I wanted to show up to 6 decimals but not complete with 0, aka: "123,123456" should look like "123,123456" but "123,12" like "123,12", with no trailing 0s.
If you want no decimal places, then you could use:
template: "#= kendo.format("{0:n0}", value) #
Or change the 0 part of n0 to add fixed decimal places. For example for 3 decimal places it will look like this:
template: "#= kendo.format("{0:n3}", value) #
Now, if you want what I needed, which was a dynamic amount of decimal places, then th only way of doing it is with a js function:
template: "#= formatAmount(value) #
function formatAmount(amount) {
return kendo.toString(amount, "#,###.######");
}

Related

How to get kendo grid filed value?

I use kendo grid template field. I want to get S_DATA field value.
It is not working.
What is the problem?
field:'S_DATA', title:'CONTENT', width:'20%',
attributes: {style:'text-align:center'},
headerAttributes:{style:'text-align:center'},
template:
"<div class='k-block k-success-colored'>
#if (#=S_DATA#.length >= 100)
{#<span> test </span>#}
else
{#<span>#:S_DATA#</span>#} #
</div>"
Your template is not valid, you need to use the variable S_DATA not the value #=S_DATA# inside the if-expression.
Change
...
#if (#=S_DATA#.length >= 100)
...
to
...
#if (S_DATA.length >= 100)
...
I've create a Dojo showing a working example.
Follow this pattern in templates. I know it will be confusing some times
template : #{JS/KENDO Entities}# <HTML OR TEXT Entities> #{JS/KENDO Entities}#

What am I misunderstanding about the d3 enter() and exit () selections?

I'm learning D3. In this example, I'm adding paragraphs, using a simple list of numbers as data. I try to do the following things:
Start with a list of 5 elements. When I call update(), I think the enter selection should contain 5 paragraphs and the exit() selection should be empty.
Add one number to the data. The enter selection should contain this single paragraph and the exit selection should be empty.
Remove all the numbers except for two. Here the exit selection should contain 4 paragraphs and the enter selection should be empty.
However, this is not what I see! I make the update function print the amount of elements, like this:
console.log('paras: '+paras[0].length+ ' enter: '+parasE[0].length + ' exit: '+paras.exit()[0].length);
And, for the three times it is called, I get this output:
"paras: 5 enter: 5 exit: 5"
"paras: 6 enter: 6 exit: 6"
"paras: 6 enter: 6 exit: 6"
As I understand it, as I'm using indexing to do the data join (and not a key), either the exit selection or the enter selection are always empty. Am I misunderstanding this, or am I using the wrong method to check how many elements are in the selections?
It seems that all elements are being removed and re-added each time (which is why the enter and exit selections are both full). What am I misunderstanding?
Thanks,
Louise
Full example code (will run from a local HTML file):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>D3 Hello World</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.4.5"></script>
</head>
<body>
<script type="text/javascript">
d3.select("body").append("span")
.text("Hello, world!");
data1=[1,2,3,4,5];
function update(){
paras=d3.select('body').selectAll('p').data(data1);
parasE=paras.enter();
console.log('paras: '+paras[0].length+ ' enter: '+parasE[0].length + ' exit: '+paras.exit()[0].length);
paras.enter().append('p').html(function(d){return d});
paras.exit().remove();
}
update();
data1.push(10);
update();
data1=[1,2];
update();
</script>
</body>
</html>
The reason is that D3 selections aren't quite arrays and shouldn't be treated as such. In particular (from the documentation):
One nuance is that selections are grouped: rather than a one-dimensional array, each selection is an array of arrays of elements.
You're simply getting the size of the wrong selection arrays. Use .size() to get the size of a selection:
console.log('paras: '+paras.size()+ ' enter: '+parasE.size() + ' exit: '+paras.exit().size());
Complete example here.

Replacing part of text string with a page include in Classic ASP

Not 100% sure if this is possible, but hoping there is a workaround. Several hours of searching bring nothing up. I have a text string written to the page from a Db table. If it contains a specific string, I would like to add a page include - example below does write:
<!--#include file="members.asp"-->
into the text, but does not pull the included file content in.
<%=Replace(myQuery("Text"), "123456", "%><!--#include file="mypage.asp"--><% ")%>
Client wants it in the page rather than at the top or bottom of the output which would be so easy (and we already do that) The include has to go in at a specific point in the text.
I would appreciate any help, even if it is to confirm that it is not possible to do this.
Here is the main page:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body onload="document.getElementById('placeholder').innerText = document.getElementById('alwaysfillme').innerText">
<p><%=Replace("ABCDEFGHIJKLMNOPQRSTUVWXYZ", "J", "<span id=""placeholder""></span>")%></p>
<span id="alwaysfillme" style="display:none;"><!--#include file="mypage.asp"--></span>
</body>
</html>
And here is what I stuck in "mypage.asp":
<% response.Write("--123--") %>
When a J is in the text, it displays:
ABCDEFGHI--123--KLMNOPQRSTUVWXYZ
When no J is in the text, it displays:
ABCDEFGHIKLMNOPQRSTUVWXYZ
<%=Replace(myQuery("Text"), "123456", ""&Server.Execute("mypage.asp")&"")%>

Grab content of Javascript from head tag

I need to grab specific content from this Javascript tag which is in the section of an html doc:
<script type="text/javascript">
var sbc = "<a href='http://www.test.com/Default.aspx' style='color:#e16a58;'>Home</a> / Men's Bikes";
</script>
Namely the 'Men's Bikes' text. Anyone know how I can do this?
I tried this which gets me all the tags:
/html/head/script[#type='text/javascript']
But not sure how I can narrow down to just that one - there are numerous tags in the .
If you apply this xpath to your input XML:
/html/head/script[#type='text/javascript']/text()
we get
var sbc = " / Men's Bikes";
using substring-after and substring-before can manipulate further the wanted output text. e.g.
/html/head/script[#type='text/javascript']/substring-after(text()[last()], '/ ')
outputs:
Men's Bikes";
ultimately:
/html/head/script[#type='text/javascript']/substring-before(substring-after(text()[last()], '/ '), '";')
outputs
Men's Bikes

Gsub and regular expression

I have a web page. The HTML source contains this text:
<meta property="og:title" content="John"/>
John is an example, the name may vary.
I am sure that og:title will appear only once in the text.
This is my code:
$browser.goto( url )
x = $browser.html.gsub( /^.*<meta property="og:title" content="(.+?)".>/m, '\1' )
I expected to find the name John in my variable x
The '\1' should give me the first part I put in the parenthesis, i.e. (.+?), i.e. John, right?
Also, I used a dot . to match a slash / , is there a better way?
Using Watir API:
x = browser.meta.attribute_value "content"
I was not able to access the meta element using either css and xpath.
If you only want the value of content:
html = '<meta property="og:title" content="John"/>'
=> "<meta property=\"og:title\" content=\"John\"/>"
html[/property="og:title" content="([^"]+)"/, 1]
=> "John"
If you're not familiar with regex, "([^"]+)" might throw you. It means "from the first ", grab everything until the next ". In effect it means "grab everything inside the double-quotes.
That code will return all of the HTML, with the matching code (which is everything between the start of the string up to and including the />) replaced by 'John'. So that comes down to "John", followed by the HTML that was after the /> of that meta property.
If you only want to extract the name, and that tag occurs only once, you can use something like:
#browser.html =~ /<meta property="og:title" content="(.+?)"/
x = $1

Resources