1

I am using MVVM framework(view/viewmodel). I have a hyperlinked field on one of the kendo grid columns. My requirement is that on clicking the hyperlink on the grid, viewmodel function should call. I am trying to achieve this but not able to call. Please suggest any approach for this.

OnaBai
  • 40,767
  • 6
  • 96
  • 125
Rahul Pal
  • 96
  • 7

1 Answers1

3

Define a template as: 

template: '<a href="\\#" onclick="SayHello(this)">Click-me</a>',

And then define SayHello function as:

function SayHello(me) {
    alert("hello");
    var item = $("#grid").data("kendoGrid").dataItem($(me).closest("tr"));
    console.log("item", item);
    item.sayGoodbye();
}

NOTE: That SayHello needs to be global.

Where sayGoodbye is defined in your model.

Example here http://jsfiddle.net/OnaBai/2p3yH/

OnaBai
  • 40,767
  • 6
  • 96
  • 125
  • Since, i am using MVVM model. Is there any way to call viewmodel function directly? – Rahul Pal May 09 '13 at 20:01
  • Argh, inline event handlers! ;^) That's traditionally a code smell, but I think it's as close to The Easy, if not Right, Thing to do as you'll get. Otherwise, you have to apply the event handler in the grid's databound event -- **and then continue reapplying every time your row is re-rendered!** What a pain. Eg, w/ the popup editor, that means reapplying to the active row with each popup window's deactivate event, inserting code like `arguments[0].container.data("kendoWindow").bind("deactivate", function () { /*stuff*/});` in the `edit` event handler. Was hoping there'd be a better answer :( – ruffin Jan 05 '16 at 18:08
  • @ruffin - didn't get your point. How can we achieve this without adding an inline event handler? especially in the case grid has multiple rows. – Sahil M. Feb 02 '22 at 11:55
  • @SahilM. That was 6 years ago, so I'm not 100% in context. [Polluting the global context is usually something to avoid](https://stackoverflow.com/a/8862711/1028230), but this fix appeared, as I said earlier, "_as close to The Easy Thing to do as you'll get_". **Better would've been to be able to define that in a handler in the `grid = $("#grid").kendoGrid({` definition** ([code from the fiddle](http://jsfiddle.net/OnaBai/2p3yH/)), but they don't (?) allow/expose it; [Telerik uses OnaBai's strategy in their own example](https://docs.telerik.com/kendo-ui/knowledge-base/grid-click-to-toggle-cell) – ruffin Feb 02 '22 at 14:03
  • Oh, I have no idea this discussion had in so long past. Thanks, @ruffin for your attention to my comments. I am agreed with you and am curious about how can I tackle this thing without an inline hanlder. I will be tried it out in after-work hours :) – Sahil M. Feb 02 '22 at 15:29
  • 1
    @SahilM. My guess is you can't, and I think OnaBai's solution is the practical one (I gave it a +1). If Telerik's own code is using a global handler ([it is](https://docs.telerik.com/kendo-ui/knowledge-base/grid-click-to-toggle-cell)), the best you can do, if anything, is probably just keep it in a child scope that contains the `$("#grid").kendoGrid` call **and** the event handler. – ruffin Feb 02 '22 at 20:09