Kendo Toolbar used in Kendo Grid Row using templates and MVVM

[Jacques]

I'm trying to achieve something that I thought was rather simple...

1. A kendo Grid bound to a viewModel with a collection of quotes
2. Each row in the grid must have a list of actions much like Sitefinity's Pages section, i.e. each page has a list of actions
3. The first action in a row loads the quote in a different SPA view which works because we make use of the Url property of the menuButtons button
4. The second action is supposed to download a PDF which we're trying to do by binding the click event of the button which is where things go wrong

Note: We could probably achieve this using the router's handler, but I'm hoping to avoid that approach.

If I put a click handler on the menuButton or after the row "type: 'splitButton' it can never find the handler. The same goes for the entire toolbar click handler as can be seen in the examples below.

I also thought of creating a second template that will be called by the first template in which I would create a button and again try binding a click handler.

Problems

When I try to bind directly to any of the click handlers I get a JS handler error coming from Kendo like it can't find the defined handler. "TypeError: handler is not a function - kendo.all.js (line 10790, col 20)"

When I try the templates approach I keep getting a ​Invalid Template exception.

 

<script id="gridRowActionItem" type="text/x-kendo-template">
    <a href="#" data-bind="events: { click: rowItemInToolbarClicked }">Click Me</a>
</script>

<script id="gridRowActions" type="text/x-kendo-template">
    <div id="toolbar"
           data-role="toolbar"
           data-items='[
                  {
                type: "splitButton",
                text: "Continue",
                menuButtons: [
                    { text: "Continue Quote", url: "\\#/quote/step1/#:data.quoteId#" },
                    { text: "Download PDF" }
                ]
            },
                {
                    template: kendo.template($("#gridRowActionItem").html())
                }
           ]'
            data-bind="events:{click: OnActionsClick}">
        </div>
</script>

<div id="quotes"
        data-role="grid"
        data-bind="source: quotes"
        data-editable="true"
        data-columns="[
            { 'field': 'description' },
            { 'field': 'status'},
            { 'field': 'broker', 'title': 'Broker},
            { 'field': 'date', 'title': 'Date},
            {
                template: kendo.template($('#gridRowActions').html())
            }]">
</div>

[Alexander Valchev]

Hi Jacques,

The provided information is not sufficient enough in order to determine where exactly the problem comes from. Is it possible for you to create a small Kendo Dojo example which demonstrates the issue? In this way I will be able to examine your case in details and provide you with concrete recommendations how to resolve it.
Thank you in advance.

Regards,
Alexander Valchev
Telerik

 

 

[Jacques]

Hi Alexander,

Wow, I thought the information was quite sufficient. Before I waste time. Is this scenario supported? And if so, is there any documentation you can point me to that will guide me through the process?

[Alexander Valchev]

Hi Jacques,

The problem description does not contains any information about the ViewModel structure and where event handlers are defined.

I prepared a working example. The OnActionsClick event fires in the way you defined it if the event handler is property of the ViewModel. The click property of the "Download PDF" button will fire it it is accessible from the global scope because it is attached as a configuration option, not via data-bind attribute.

• http://dojo.telerik.com/aNOBo

I hope that will help you identify the problem in your concrete case.

Regards,
Alexander Valchev
Telerik