<script type="text/x-kendo-tmpl" id="thisTemplate"><div id="${data1}">
<div id="thisDiv" class="thisClass ${newClass}">
... Div content...
</div>
</script>
As I read in my data I would like to have ${newClass} be a string that is determined by a function:
i.e.
if(condition A) {
${newClass} = "a string of text";
} else {
${newClass} = "a different string of text";
}
In essence, I want ${newClass} to be a string that is determined by a function.
Does anyone know how to do this...?
12 Answers, 1 is accepted
I take a value from json, and if value is not empty, i want to display link, another way - display simple text.
Also, how to hide button ({command}) on some rows, where some value is empty (or =other_some_value)?
Does anyone know how to do this?
====================================================================================
If interesting, we can use that code for first part of question.
But how to hide button ({command}) on some rows, where some value is empty (or =other_some_value)?
<
script
id
=
"alert-template"
type
=
"text/x-kendo-template"
>
# if (type == 'success'){ #
<
div
class
=
'alert-message success'
>
<
a
class
=
"close"
href
=
""
>x</
a
>
<
p
>
#= message #
</
p
>
</
div
>
# } else if (type == 'error'){ #
<
div
class
=
'alert-message error'
>
<
a
class
=
"close"
href
=
""
>x</
a
>
<
p
>
#= message #
</
p
>
</
div
>
# } #
</
script
>
You can use regular javascript syntax to achieve the logic you need. For instance:
# var foo; if (bar) { foo = "bar" } else { foo = "baz" } #
#= foo #
Petyo
the Telerik team
if type can be 'Success' , 'SucCess' ... how to handle the condition syntax?
# if (type == 'success'){ #
<
div
class
=
'alert-message success'
>
<
a
class
=
"close"
href
=
""
>x</
a
>
<
p
>
#= message #
</
p
>
</
div
>
# } else if (type == 'error'){ #
<
div
class
=
'alert-message error'
>
<
a
class
=
"close"
href
=
""
>x</
a
>
<
p
>
#= message #
</
p
>
</
div
>
# } #
You can always use || in the if statement:
# if (type == 'success' || type == 'Success') { #
or you can just call toLowerCase():
# if (type.toLowerCase() == 'success') { #
Atanas Korchev
the Telerik team
But, when I load the template from external file. It won't work.
Please see my question at : http://www.kendoui.com/forums/framework/mvvm/mvvm-and-external-template.aspx#2235630
I would appreciate it very much.
Your template is not executed with the right data. Please call the template function with your actual data.
Regards,Atanas Korchev
the Telerik team
please suggest me how to call the template with my data.
Since the data is MVVM....
I am not sure if I understand you correctly.
A template is a JavaScript function. Its only argument is the data which the template should work with:
var template = kendo.template("<strong>#= name #</strong>");
var templateData = { name: "John Doe" } ;
var html = template(templateData);
console.log(html); //outputs "<strong>John Doe</strong>"
In a word you need to call your template function with the data it is supposed to process.
Atanas Korchev
the Telerik team
However, I try to apply the template / MVVM
Like the scenario: I have "mydiv" connecting to data-template "my-template" and the data-bind to source.
the template was executed correctly when I bind mydiv and observable object0000
[1] at the beginning, I create an index.htm file, the template is also defined in the same file.
It works perfectly!!! but the problem is in the second part....
<
div
id
=
"mydiv"
>
<
div
id
=
"listView"
data-role
=
"listview"
data-editable
=
"true"
data-template
=
"my-template"
data-bind
=
"source: MySource"
>
</
div
>
</
div
>
<
script
id
=
"my-template"
type
=
"text/x-kendo-template"
>
<
div
>${Status}</
div
>
<
div
>
# if (Status.toUpperCase() == "SINGLE"){#
<
img
src
=
"imgs/black_acs.png"
alt
=
"black_acs image"
/>
#}else if (Status.toUpperCase() == "MARRIED"){#
<
img
src
=
"imgs/blue_acs.png"
alt
=
"blue_acs image"
/>
#}else if (Status.toUpperCase() == "OTHER"){#
<
img
src
=
"imgs/red_acs.png"
alt
=
"red_acs image"
/>
#}#
</
div
>
</
script
>
<
script
>
$(document).ready(function ()
{
var viewModel = kendo.observable({
MySource: new kendo.data.DataSource({ // name and status
transport: {
read: {
url: "http://xxx.com/REST.VN/GetData",
type: "GET",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: function ()
{
var jsonParameters = {};
jsonParameters.parameter = "XXX";
return jsonParameters;
}
}
}
});
kendo.bind($("#mydiv"), viewModel);
});
</
script
>
The code above works fine.....
[2] ... after that, I decide to move the template as external file so that it can be reused by other pages.
I create another file called: template1.tmpl.htm
I do not change anything in the template. Just copy and paste to another file.
This is the content in the file.
<
script
id
=
"my-template"
type
=
"text/x-kendo-template"
>
<
div
>${Status}</
div
>
<
div
>
# if (Status.toUpperCase() == "SINGLE"){#
<
img
src
=
"imgs/black_acs.png"
alt
=
"black_acs image"
/>
#}else if (Status.toUpperCase() == "MARRIED"){#
<
img
src
=
"imgs/blue_acs.png"
alt
=
"blue_acs image"
/>
#}else if (Status.toUpperCase() == "OTHER"){#
<
img
src
=
"imgs/red_acs.png"
alt
=
"red_acs image"
/>
#}#
</
div
>
</
script
>
In the index.html, I create a template loader function as suggested in http://docs.kendoui.com/howto/load-templates-external-files
on the top of the page: <script src="templateLoader.js"></script>
At the script section, I modify:
<
script
>
$(document).bind("TEMPLATE_LOADED", function (e, data) {
_itemTemplate = kendo.template($("#my-template").html(), { useWithBlock: false });
_itemTemplate(data);
bindMe();
});
$(document).ready(function ()
{
templateLoader.loadExtTemplate("template1.tmpl.htm");
});
function bindMe()
{
var viewModel = kendo.observable({
MySource: new kendo.data.DataSource({ // name and status
transport: {
read: {
url: "http://xxx.com/REST.VN/GetData",
type: "GET",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: function ()
{
var jsonParameters = {};
jsonParameters.parameter = "XXX";
return jsonParameters;
}
}
}
});
kendo.bind($("#mydiv"), viewModel);
}
</
script
>
The result is not showing at all.....
I thought it is not loading the template, so I start debugging. The template is loaded.
(I won't think it is a data issue because it works fine when the template is on the same file.)
Then .... I think something might not correct in the template definition... (it should work fine since it works when template is on the same file)
I removed every thing from the template file:
<
script
id
=
"my-template"
type
=
"text/x-kendo-template"
>
<
div
>fixed text</
div
>
</
script
>
This time ... it works with fixed text .... !?!? it becomes interesting....
Then, I start adding data to the template
<script id="my-template" type="text/x-kendo-template">
<div>${Status}</div>
</script>
Guess what !? ... it is not working ...
After trying ....
<script id="my-template" type="text/x-kendo-template">
<div>${data.Status}</div>
</script>
It works.... I am able to get the list of Status.
Why do we have to use "data." in the template (external template file)? Previously, the template is defined in the same file, I don't have to put .data in front of field name.
Now... conditioning ..
If I remove .toUpperCase(), it works. but I NEED to use the function (and other functions) in the if-else statements.
Since the data can be SiNgle, sinGLE etc.
Why it is not working when I exclude the template from the original file?
<div>
# if (data.Status.toUpperCase() == "SINGLE"){#
<img src="imgs/black_acs.png" alt="black_acs image" />
#}else if (data.Status.toUpperCase() == "MARRIED"){#
<img src="imgs/blue_acs.png" alt="blue_acs image" />
#}else if (data.Status.toUpperCase() == "OTHER"){#
<img src="imgs/red_acs.png" alt="red_acs image" />
#}#
</div>
Please help ....
I am totally new to the MVVM and the template.
As I said before your template is not executed with the right data:
$(document).bind(
"TEMPLATE_LOADED"
,
function
(e, data) {
_itemTemplate = kendo.template($(
"#my-template"
).html(), { useWithBlock:
false
});
_itemTemplate(data); // data is the argument of the callback not your view model
bindMe();
});
If you still need help I suggest you send us a complete sample which we can check locally. Regards,
Atanas Korchev
the Telerik team
We are trying to keep our templates light of logic.
This can be done only if the template is set via MVVM. Here is an example: http://jsbin.com/epaGAXu/1/edit
Regards,Atanas Korchev
Telerik