I have a gantt control on a page. The toolbar has to have a similar button like the AddTask when clicking on it a context menu should appear.
The gantt configuration looks like this
@(Html.Kendo().Gantt<
TaskViewModel
, DependencyViewModel>()
.Name("gantt")
.Toolbar(tb =>
{
tb.Add().Name("append");
tb.Add().Name("pdf");
tb.Add().TemplateId("expandCollapseTemplate");
})
And the template like this
<
script
id
=
"expandCollapseTemplate"
type
=
"text/x-kendo-template"
>
<
a
class
=
"k-button expandbutton"
><
span
class
=
"k-icon"
></
span
>Expand/Collapse</
a
>
@(Html.Kendo().ContextMenu()
.Name("expandMenu")
.Filter(".expandbutton")
.CloseOnClick(true)
.Direction(ContextMenuDirection.Bottom)
.OpenOnClick(true)
.ShowOn("click")
.Items(items =>
{
items.Add().Text("Expand Parent");
items.Add().Text("Expand all");
items.Add().Text("Collapse all");
})
.ToClientTemplate()
)
</
script
>
However I get an exception:
Unhandled exception at line 25, column 7809 in http://localhost:56541/Scripts/kendo.all.min.js
0x800a139e - JavaScript runtime error: Invalid template:'<button class="k-button k-button-icontext k-gantt-create" type="button" data-action="add"><span class="k-icon k-i-plus"></span><span>Add Task</span></button><button class="k-button k-button-icontext k-gantt-pdf" type="button" ><span class="k-icon k-i-file-pdf"></span><span>Export to PDF</span></button>
<a class="k-button expandbutton"><span class="k-icon"></span>Expand/Collapse</a>
<ul class="k-widget k-reset k-header k-menu k-context-menu k-menu-vertical" id="expandMenu"><li class="k-item k-state-default"><span class="k-link">Expand Parent</span></li><li class="k-item k-state-default"><span class="k-link">Expand all</span></li><li class="k-item k-state-default"><span class="k-link">Collapse all</span></li></ul><script>
kendo.syncReady(function(){jQuery("#expandMenu").kendoContextMenu({"direction":"bottom","openOnClick":true,"filter":".expandbutton","showOn":"click"});});
</script>
' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='<button class="k-button k-button-icontext k-gantt-create" type="button" data-action="add"><span class="k-icon k-i-plus"></span><span>Add Task</span></button><button class="k-button k-button-icontext k-gantt-pdf" type="button" ><span class="k-icon k-i-file-pdf"></span><span>Export to PDF</span></button>\n <a class="k-button expandbutton"><span class="k-icon"></span>Expand/Collapse</a>\n <ul class="k-widget k-reset k-header k-menu k-context-menu k-menu-vertical" id="expandMenu"><li class="k-item k-state-default"><span class="k-link">Expand Parent</span></li><li class="k-item k-state-default"><span class="k-link">Expand all</span></li><li class="k-item k-state-default"><span class="k-link">Collapse all</span></li></ul><script>\n\tkendo.syncReady(function(){jQuery("';expandMenu").kendoContextMenu({"direction":"bottom","openOnClick":true,"filter":".expandbutton","showOn":"click"});});
</script>
;$kendoOutput+=;}return $kendoOutput;'
I have used the same template on a grid and no exception was thrown.
The telerik version that I tested was with 2018.1.221.545. Was this issue fixed in the latest version or what am I doing wrong?