How do I attach function to kendo grid after it initialized?

Question

I have a Kendo Grid and I have JavaScript function “getFilters”. The “getFilters” function is scoped function defined in document ready. Currently the grid is calling “getFilters” like below. But this doesn’t work because “getFilters” gets initialized after the grid initialization. So im getting error 0x800a1391 - JavaScript runtime error: 'getFilters' is undefined

I don’t want to make “getFilters” function as global. So How do I attach “getFilters” to the dasource after grid is initialized? I would like to do that in Document Ready

@(Html.Kendo().Grid<MyModel>()
    .Name("Grid")                    
        col.Bound(p => p.State).Title("State");            
        col.Bound(p => p.BatchStatus).Title("Status");
    })
    .AutoBind(false)
    .Pageable()
    .Sortable()                
    .DataSource(dataSource => dataSource
        .Ajax()                    
        .Read(read => read
            .Action("GetData", "MyController")
            .Data("getFilters"))
        .ServerOperation(false))
)

JavaScript document ready function

$(function () {

  function getFilters() {
    return SomeJSON;
  }


  var ds = $("#Grid").data("kendoGrid").dataSource;

      //How do i attach getFilters function to dataSource here?


})

Have a look at http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-dataBound — ezanker, Jun 09 '15 at 18:20

score 0 · Answer 1 · edited May 23 '17 at 12:05

0

You should move out the function getFilters from the document ready and place it inside the script tag above or below the grid initialization part

<script>
function getFilters() {
    return SomeJSON;
  }
</script>


@(Html.Kendo().Grid<MyModel>()
    .Name("Grid")                    
        col.Bound(p => p.State).Title("State");            
        col.Bound(p => p.BatchStatus).Title("Status");
    })
    .AutoBind(false)
    .Pageable()
    .Sortable()                
    .DataSource(dataSource => dataSource
        .Ajax()                    
        .Read(read => read
            .Action("GetData", "MyController")
            .Data("getFilters"))
        .ServerOperation(false))
)

Please refer here for a similar question in SO

edited May 23 '17 at 12:05

Community

1
1

answered Jun 09 '15 at 18:19

Amal Dev

1,938
1
14
26

Well our design pattern is to have all javascript into separate .js file. No In-Page javascript. That's why I want to attach the function in .JS file...Also Note that .js file is referenced at the bottom of the page, meaning AFTER all the elements are initialized. So that it can refer the Grid. – LP13 Jun 09 '15 at 18:33
Then can you please move out the function from document ready function in the js file itself ? – Amal Dev Jun 09 '15 at 18:35
Technically I can ( that's how i got it working currently), however again that's not our design pattern. All our functions are scoped functions and trying avoid any global function. Also if i put that function as global that means all the private variables its using i have to make those global as well. As mentioned in my original question i would like to avoid making it global. – LP13 Jun 09 '15 at 18:46
i just want to know if there is any way to assign the function after grid is initialized? – LP13 Jun 09 '15 at 18:47

score 0 · Accepted Answer · answered Jun 11 '15 at 02:02

I found the answer, this may help others. Here how you can attach function in document ready

  var grid = $("#grid").data("kendoGrid");
  grid.dataSource.transport.options.read.data = getFilters;

And then call read() to reload the grid. Every time you call read() the attached function "getFilters" will get executed.

  grid.dataSource.read();

How do I attach function to kendo grid after it initialized?

2 Answers2