CODEWITHSUNDEEP
javascriptasp.net-mvc-3kendo-ui
Crystal
Crystal

Reputation: 29518

binding function callbacks onto kendo grids

I'm trying to get callbacks on events in a kendo grid. My coworker has already started creating the grid using the MVC helpers. So I'm trying to bind to the grid like this:

Html.Kendo().Grid<DetailViewModel>()
        .Name("details")
        .Events(events => events.DataBound(@<text>function () {
                                            $('input:checkbox.details-checkbox').click(function () {
                console.log("checked");
                handleChecked();
             });
           }</text>))

So looking at the documentation, I don't know why I have to use the @ tags here. I thought I could just put in the name of my callback, like "handleChecked". That doesn't work though for me. So I wrapped it in the @ tag. So the way it currently is setup, it does get the "checked" text to the console. However, I actually want a method to be called when the checkbox is hit. I'd rather not have to put it in that function block since it's going to get messy. So what I tried doing is on document ready, define handleChecked. That looks like:

@{
Html.Telerik().ScriptRegistrar()
    .Scripts(wa => wa.AddSharedGroup(@Url.AssetName(AssetGroups.SinglePageApps)))
    .OnDocumentReady(
        @<text>
             $(document).ready(function () {

                          function handleChecked() {
                console.log("handle checked");
             }
             console.log("document.ready");
             });

         </text>);
}

So when I try to run it and click on a checkbox, I get handleChecked() is undefined. So I'm not sure what's the best way to bind to a row in the kendo grid after the grid gets populated with the data. It's getting rendered server side right now and I am trying to put a function callback to the DataBound event, but having some troubles. Any thoughts? Thanks in advance.

Upvotes: 0

Views: 1836

Answers (1)

Derick Bailey
Derick Bailey

Reputation: 72888

The big issue preventing things from working the way you want is that you're wrapping the JavaScript functions in DOMReady functions.

In JavaScript, a function defines scope - that means any variable or function defined within another function will only exist in the outer function.

For example:


function foo(){
  function bar(){ console.log("bar"); }
  bar();
}

foo(); // => logs "bar" to the console
bar(); // fails; bar is undefined / not a function

When I call foo() at the bottom of this, the foo function defines a nested bar function, which it then calls. When I call bar() after that, though, it fails. This is because bar only exists within the foo() function. As soon as the foo function exits, bar is out of scope and is no longer available.

Given that, you don't want to wrap your handleChecked function inside of a DOMReady function. Instead, you want to place that function somewhere that will be accessible from the entire application.

To keep things simple for now, I would recommend that you just put the function directly in your Razor page, in a <script> tag:

<script type="javascript">
  function handleChecked(){
    // ... do stuff here ...
  }
</script>

There is no need to have any Razor syntax around this. This is just normal HTML and JavaScript embedded in the page.

Once you have this, you can provide the "handleChecked" function name directly to your events.DataBound function call:


  // ...
  .Events(events => events.DataBound("handleChecked"))
  // ...

Now that the function is available from anywhere in the page, it will be found when the "DataBound" event fires.

Hope that helps.

Upvotes: 2

Related Questions