Kendo Toolbar used in Kendo Grid Row using templates and MVVM

4 posts, 0 answers
  1. Jacques
    Jacques avatar
    135 posts
    Member since:
    Jun 2007

    Posted 12 Oct 2015 Link to this post

    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>

  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 14 Oct 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Jacques
    Jacques avatar
    135 posts
    Member since:
    Jun 2007

    Posted 21 Oct 2015 in reply to Alexander Valchev Link to this post

    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?

  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 23 Oct 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready