How to get kendo grid filed value? - kendo-ui

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}#

Related

how to use a variable from another .ftl in freemarker

I'm trying to use a defined variable in a second template to have the same output in the current one.
template 1:
[#if definition.name=="configMINIMAL_STACK_SIZE"]
[#assign valueMinimalStackSize = definition.value]
[/#if]
Second template:
#define configMINIMAL_STACK_SIZE ((uint16_t)${valueMinimalStackSize})
how could I have the same output of "valueMinimalStackSize " in the second template please ?
Thanks for the help
You could have a template that sets these variables, let's call it "commons.ftl", and then use <#include "commons.ftl"> at the beginning of other templates.

Kendo UI Number Formatting Invalid template

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, "#,###.######");
}

how to get the data using XPATH from div with display:none?

I want to extract data from a div element with the attribute 'display:none'.
<div class='test' style='display:none;'>
<div id='test2'>data</div>
</div>
Here is what I tried:
//div[#class = "test"]//div[contains(#style, \'display:none\')';
Please help.
Try several changes:
1) Just put normal quotes around "display:none", like you did for your class attribute and close with ]
2) Then your div with class test and your style attribute is one and the same, so you need to call contains also for the same div:
'//div[#class = "test" and contains(#style, "display:none")]'
or the quotes the other way around, important is, that you are using differnt quotes around the expression than inside the expression
"//div[#class = 'test' and contains(#style, 'display:none')]"
if this still does not work, pls post an error message

CKEditor Plugin - Proper behavior of elementPath

Currently, I have the following HTML content
<span criteria="{"animal":["DOG"]}">abc</span> def <span criteria="{"animal":["CAT"]}">ghi</span>
My purpose is
I wish to know my selected text contain criteria attribute?
If it contains criteria attribute, what is its value?
I run the following code.
editor.on('selectionChange', function( ev ) {
var elementPath = editor.elementPath();
var criteriaElement = elementPath.contains( function( el ) {
return el.hasAttribute('criteria');
});
var array = elementPath.elements;
var arrayLength = array.length;
for (var i = 0; i < arrayLength; i++) {
console.log(i + " --> " + array[i].$.innerHTML);
}
if (criteriaElement) {
console.log("criteriaElement is something");
console.log("criteriaElement attribute length is " + criteriaElement.$.attributes.length);
for (var i = 0; i < criteriaElement.$.attributes.length; i++) {
console.log("attribute is " + criteriaElement.$.attributes[i].value);
}
}
});
Test Case 1
When I select my text abc def as follow
I get the following logging
0 --> abc
1 --> <span criteria="{"animal":["DOG"]}">abc</span> def <span criteria="{"animal":["CAT"]}">ghi</span>
criteriaElement is something
criteriaElement attribute length is 1
attribute is {"operator":["DOG"]}
Some doubts in my mind.
I expect there will be 2 elements in elementPath. One is abc, another is def. However, it turns out, my first element is abc (correct), and my second element is the entire text (out of my expectation)
Test Case 2
I test with another test. This time, I select def ghi
I get the following logging
0 --> <span criteria="{"animal":["DOG"]}">abc</span> def <span criteria="{"animal":["CAT"]}">ghi</span>
Some doubts in my mind
Why there is only 1 element? I expect there will be 2 elements in elementPath. One is def, another is ghi.
Although Test Case 1 and Test Case 2 both contain element with entire text, why in Test Case 2, elementPath.contains... returns nothing?
Elementspath is not related to the selection in that way. It represent the stack of elements under the the caret. Imagine a situation like this where [] represents the selection and | represents the caret:
<ul>
<li>Quux</li>
<li>F[oo <span class="bar">Bar</span> <span class="baz">Ba|]z</span></li>
<li>Nerf</li>
</ul>
Your selection visually contains the text "oo Bar Ba" and your caret is in between a and z. At that time, the elementspath would display "ul > li > span". The other span element "bar" is a sibling of the span element "baz" and is thus not displayed, only ascendants are displayed.
You could think of it like that the caret can only exist inside a html TEXT_NODE and the elementspath displays the ascendants of that text node.
What are you trying to eachieve? To display the data in the current selection? Why? Where do you want it to show? How and why do you want it to show? I'm guessing that there is a different way of fillind the requirement that you have than with using the elementspath (I'm think this might be and XY problem).
Too long to be a comment: If your toolbar button action targets elements with the criteria attribute - what if there is one span with a criteria attribute and 1 without? Does their order matter? What if there are two spans with a criteria attribute? What if they are nested like this: <p>F[oo <span criteria="x">Bar <span criteria="y">Ba|]z </span>Quux </span>Xyzzy</p> - the targeting will be difficult. I would suggest that you add a small marker to the elementspath if an element has the attribute, than clicking the marker or rightclicking the element you could edit/view the criteria. You could even visually indicate spans with the attribute within the editor by customizing editor.css with a rule like span[criteria]{ color: red; }.

Kendo declarative grid and making filterable.extra 'false'

I have a declarative grid inside a template and I'd like to allow the columns to be filterable, but with filterable.extra set to 'false'. Is this possible?
Here's a JSBin example
I've tried every variation of data-filterable-extra="true" / data-filterableextra="true" / data-filterableExtra="true" / etc...
And ideally, I'd only have the input box and assume that the search method is 'contains'.
Note that this lives within a template, and that I need to loop through an array to get the values, so my implementation actually looks more like this.
You should use: data-filterable="{ extra: false}". So the declarative definition for the table would be:
<table data-role="grid" data-sortable="true" data-filterable="{extra : false}" data-scrollable="false">
...
</table>
See your example modified here http://jsbin.com/inikib/4/edit

Resources