This is a migrated thread and some comments may be shown as answers.

data-ajax-update cause kendo compile error!!

1 Answer 89 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Steven
Top achievements
Rank 1
Steven asked on 18 Oct 2018, 04:43 PM

@(Html.Kendo().Grid<BitteleERP.MVC.Models.Corporation>()
                .Name("grid")
            .Columns(columns =>
            {
                columns.Command(command => command.Custom("Edit").Click("edit")).Width(40);
                columns.Command(command => command.Custom("Delete").Click("deleted")).Width(40);
                columns.Bound(c => c.Name).Width(140);
                columns.Bound(c => c.Location).Width(190);
                columns.Bound(c => c.DefaultCurrency).Width(100);
            })
            .ToolBar(toolbar =>
            {
                toolbar.ClientTemplateId("GridToolbarTemplate");
            })
            .HtmlAttributes(new { style = "height: 380px;" })
            .Sortable()
            .Scrollable(scrollable => scrollable.Virtual(true))
            .HtmlAttributes(new { style = "height:84vh;" })
            .DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("Read", "Corporation"))
            )
)

 

<script id="GridToolbarTemplate" type="text/x-kendo-template">

    <div class="refreshBtnContainer">
        <a href="/Corporation/New" data-ajax="true" data_ajax_method="GET"  data_ajax_mode="replace" data-ajax-update="#ajax-content" class="k-pager-refresh k-link k-button " style="float:left" title="Add New"><span>Add New</span></a>
    </div>
</script>

--

data-ajax-update="#ajax-content" with # is not working with kendo

---

ncaught Error: Invalid template:'
    <div class="refreshBtnContainer">
        <a href="/Corporation/New" data-ajax="true" data_ajax_method="GET"  data_ajax_mode="replace" data-ajax-update="#ajax-content" class="k-pager-refresh k-link k-button " style="float:left" title="Add New"><span>Add New</span></a>
    </div>
' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='\n    <div class="refreshBtnContainer">\n        <a href="/Corporation/New" data-ajax="true" data_ajax_method="GET"  data_ajax_mode="replace" data-ajax-update="';ajax-content" class="k-pager-refresh k-link k-button " style="float:left" title="Add New"><span>Add New</span></a>
    </div>
;$kendoOutput+=;}return $kendoOutput;'
    at Object.compile (kendo.all.min.js:25)
    at Object.d [as template] (jquery.min.js:2)
    at HTMLDocument.<anonymous> (Corporation:252)
    at i (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at Function.ready (jquery.min.js:2)
    at HTMLDocument.K (jquery.min.js:2)

 

 

 

1 Answer, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 22 Oct 2018, 10:48 AM
Hello, Steven,

Thank you for providing the ToolBar ClientTemplate.

The reason for this behaviour is the "#" which is the literal that Kendo UI Templates use. Any such literals which are not part of the template syntax should be escaped:

<script id="GridToolbarTemplate" type="text/x-kendo-template">
    <div class="refreshBtnContainer">
        <a href="/Corporation/New" data-ajax="true" data_ajax_method="GET" data_ajax_mode="replace" data-ajax-update="\\#ajax-content" class="k-pager-refresh k-link k-button " style="float:left" title="Add New"><span>Add New</span></a>
    </div>
</script>

For more information about the template syntax, you can have a look at this documentation article:

https://docs.telerik.com/kendo-ui/framework/templates/overview#template-syntax

Let me know in case you have additional questions or concerns.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Steven
Top achievements
Rank 1
Answers by
Alex Hajigeorgieva
Telerik team
Share this question
or