Questions on Kendo UI for jQuery Forum

1 answer

20.6K+ views

Correct way to do if statement in a client template?

I'm trying to put a conditional in a client template and can't figure out where in the docs this is addressed. Could you point me to the correct area? Here's the code that's not working. The conditional is "CanBeOverturned":

columns.Template(@<text></text>).ClientTemplate("<div>Reviewed Date : \\#=SubmissionDateString\\# | \\#=CorrectiveActionName\\# \\# if (CanBeOverturned == true) { <a href='javascript:var t=0;' onclick='javascript:return openOverturn(\"\\#=FeedbackFormId\\#\")' style='float:right;' class='openFeedbackForm')>+ Overturn</a> }</div>");

Thanks in advance for any help you can provide!

Templates

answered on 07 Jul 2020

5 answers

242 views

Cannot define template as data-template attribute

Hi team,

As the question says, Im trying to define my template content as part of an html data attribute, see dojo: https://dojo.telerik.com/UxAPOXeV

But i get a syntax error when the widget is initialized.

Please advise.

Thanks,
Grant

Templates

answered on 15 May 2020

7 answers

2.1K+ views

Nested Templates

Hi, is it possible to have one template within another?
I've given an example below to show what I mean. The example has a Customer data object that has a customer name and an array of notes. Notes are used on other objects so I have defined a template for them, but I can't work out how to render it from within the customer template:

<script type="text/x-kendo-template" id="NotesTemplate">
<div>
# for (var i = 0; i < data.length; i++) { #
<div>
<em>#= data[i].CreatedBy # on #= data[i].CreatedOn # </em>
<p>
#= data[i].NoteText #
</p>
</div>
# } #
</div>
</script>

<script type="text/x-kendo-template" id="CustomerTemplate">
<div>
Customer name #: data.CustomerName #

<div id="CustomerNotes"></div>

# $("\#CustomerNotes").html(_notesTemplate(data.Notes)); #

</div>
</script>

then...
_notesTemplate = kendo.template($("#NotesTemplate").html(), { useWithBlock: false });
_customerTemplate = kendo.template($("#CustomerTemplate").html(), { useWithBlock: false });

$("#CustomerDetails").html(_customerTemplate(customerData));

Any help much appreciated!

Templates

answered on 17 Jan 2020

2 answers

68 views

The datasource is hidden behind the template.

Hi,

I have created Onclick-select-dataSource.set linkage code using a template.

Everything went smoothly, but only one problem arose.

The problem is that the set dataSource is not visible.

But the data is definitely set and available. When you click on a cell and try to edit it, you see it.

But if it goes out of focus, it's hidden behind the template again.

How can I take out the datasource hidden behind the template and make it visible?

Templates

answered on 23 Dec 2019

5 answers

2.8K+ views

Data binding within template

Suppose I've got an array of items, and I'd like to edit an attribute of each of those items. So I create a div, bind my array of items to it, and then specify a template to use to render each item using the data-bind attribute to bind the value of my item an input box.

e.g. (this is derived from another example I found in a separate thread),

<div id="example" data-template="template" data-bind="source: arr"></div>

<script id="template" type="text/x-kendo-template">
  <div> Age: ${age}</div>
  <input type="text" data-bind="value: age"/>
</script>

and

var arr = new kendo.data.ObservableArray([
  { name: "John Doe", age: 23 },
  { name: "Jane Doe", age: 34 }
]);

var viewModel = kendo.observable({
  arr: arr
});

kendo.bind($("#example"), viewModel);

setTimeout(function() {
  viewModel.arr[1].set('age',54);
}, 2000);

From this example, I'd expect to see the first div and text box with values of 23, and the second div and text box with values of 34. Instead I get the first div with 23 and the first text box with 34, and the second div with 34 and the second text box empty. Then when the function specified in setTimeout runs, it changes the value in the first text box, instead of the second one.

Here's a JSFiddle where you can try it: http://jsfiddle.net/2R3tF/

Seems simple to me, but I must not be understanding the plumbing enough to figure out why this doesn't work. Can someone explain, and ideally provide a version that works?

Templates

answered on 05 Jul 2019

3 answers

520 views

Row index in templates

Are there any variables available in a template such as the row index number? Something like ${ rowIndex } that is available automatically.

Thanks

Templates

answered on 20 Mar 2019

2 answers

130 views

Templo

I have the following template defined

<script type="text/x-kendo-tmpl" id="tmplterminalSummary">

<div class="row grandTotalRow"><br>

<span class="col-md-1 col-xs-3 resultLabel text-left">Gift Cards Terminal</span><br>

<span class="col-md-2 col-xs-2 resultValue">#:kendo.toString(gcardGross,"c")#</span><br>

<span class="col-md-3 col-xs-2 resultValue">#:kendo.toString(gcardRefund,"c")#</span><br>

<span class="col-md-3 col-xs-2 resultValue">N/A</span><br>

<span class="col-md-3 col-xs-2 resultValue">#:kendo.toString(netGCard,"c")#</span><br>

</div>

</script>

The issue I am having is that sometimes gcardGross is undefined. This results in a run time error like this https://screencast.com/t/6lHLtsliMx5F

I have tried replacing it with a line like this but unfortunately the error continues to occur.

<span class="col-md-2 col-xs-2 resultValue">#:gcardGross?kendo.toString(gcardGross,"c"):kendo.toString(0,"c")#</span><br>

So how can I define a default value so that 0 is shown if the property is undefined.

Templates

answered on 01 Mar 2019

1 answer

63 views

Template and localisation help

I read several post, but I can't find the way to correctly use french/english string in my template without crashing the templete with the # caracter.

see this part of a template:

<div class="Stats">

<span class="LikeCount">#=Html.Kendo().TemplateEncode(@Resources.PortailGES.Aime)#<span id="LikeCount_#: Id #">#: LikeCount #</span></span>

<span class="DislikeCount">@*@Resources.PortailGES.AimePas*@ <span id="DislikeCount_#: Id #">#: DislikeCount #</span></span>

</div>

I try with #=Html.Kendo().TemplateEncode(@Resources.PortailGES.Aime)# but that not work

The string Ressource.PortailGES.Aime contain "J'aime" in french rendered in the template like: J'aime the crash the template.

Thanks for your help.

Templates

answered on 11 Dec 2018

2 answers

84 views

Firing Events of control inside Kendo template

Hi,

in my case i have to implement cascading on 2 drop down boxes defined inside kendo ui Template . For example i have a category drop down box and on selection of category sub category drop down box gets sub categories of selected categories shown as options.

i couldn't find example in documentation for that. First , Is this possible?if so , could you please provide me syntax for that. Also i am using Kendo SPA example for 2 separate JS and Html files for code.

Thanks

Templates

answered on 29 Nov 2018

2 answers

262 views

Kendo template error on initialization

Kendo gives me error and fails to load components during startup. I am using kendo version 2018.3.911.

This is the error I am getting.

kendo.all.js:232 Uncaught Error: Invalid template:'<div class="k-group-indicator" data-#=data.ns#field="${data.field}" data-#=data.ns#title="${data.title || ""}" data-#=data.ns#dir="${data.dir || "asc"}"><a href="\#" class="k-link"><span class="k-icon k-i-sort-${(data.dir || "asc") == "asc" ? "asc-sm" : "desc-sm"}" title="(sorted ${(data.dir || "asc") == "asc" ? "ascending": "descending"})"></span>${data.title ? data.title: data.field}</a><a class="k-button k-button-icon k-bare"><span class="k-icon k-i-close"></span></a></div>' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;$kendoOutput='<div class="k-group-indicator" data-'+(data.ns)+'field="'+($kendoHtmlEncode(data.field))+'" data-'+(data.ns)+'title="'+($kendoHtmlEncode(data.title || ""))+'" data-'+(data.ns)+'dir="'+($kendoHtmlEncode(data.dir || "asc"))+'"><a href="#" class="k-link"><span class="k-icon k-i-sort-'+($kendoHtmlEncode((data.dir || "asc") == "asc" ? "asc-sm" : "desc-sm"))+'" title="(sorted '+($kendoHtmlEncode((data.dir || "asc") == "asc" ? "ascending": "descending"))+')"></span>'+($kendoHtmlEncode(data.title ? data.title: data.field))+'</a><a class="k-button k-button-icon k-bare"><span class="k-icon k-i-close"></span></a></div>';return $kendoOutput;'

at Object.compile (kendo.all.js:232)

at Object.d [as template] (jquery-1.12.3.js:2)

at kendo.all.js:25533

at kendo.all.js:25912

at kendo.all.js:25919

at kendo.all.js:25525

at kendo.all.js:25528

compile @ kendo.all.js:232

d @ jquery-1.12.3.js:2

(anonymous) @ kendo.all.js:25533

(anonymous) @ kendo.all.js:25912

(anonymous) @ kendo.all.js:25919