Why no load event ?

[P-A]

Hi,

i'm a bit surprised, because i Just moved from Telerik MVC extensions to Kendo UI Complete for MVC, and i noticed that the load event of the grid disappeared.

And if i try to do what i want in the document load event ($(document).ready(......)), the grid is not yet constructed or available if i call it like this :

var

grid = $("#Grid").data("kendoGrid"); => error

Did I miss something ?

 

[P-A]

Could you please tell how i could go through this ? I really need to know when the grid is constructed

[Andy]

+1 on this. I am looking for a loaded event as well, so that I can get a reference to the control at runtime.

Not just for the Grid, but for DropDownList and other MVC wrappers.

[Atanu]

When using Kendo UI MVC wrappers, the initialization statement follows immediately the widget's HTML markup. So you can put your custom Javascript anywhere after the server-side widget declaration.

For example

@{
    Html.Kendo().Grid<......>()
    .Name("YourGridName")
    blah blah blah
    .......................
    .......................
    .......................
    .Render();
}

<script>
    here goes your on load event on $(document).ready(......)
</script>

Hope that helps.

[Andy]

I'm not seeing that behavior. In the example below, I have js just after the Kendo declaration, and the value of grid is undefined there. The only way I have been able to get the reference to the Grid is in an event such as Change, ColumnResize, etc.

     @(Html.Kendo().Grid(Model)
                .Name("Grid")
                .Columns(columns =>
                {
                    columns.Bound(p => p.RoleName).Width(200);
                    columns.Bound(p => p.Description);
                })
               
                {...}

            )

        <script type="text/javascript">
            var grid = $("#Grid").data("kendoGrid");
        </script>

[Atanu]

Andy,

I have also mentioned the $(document).ready function which you might have missed

Try

@(Html.Kendo().Grid(Model)
  .Name("Grid")
  .Columns(columns =>
  {
     columns.Bound(p => p.RoleName).Width(200);
     columns.Bound(p => p.Description);
  })
                 
 {...}
)
        
<script type="text/javascript">
$(document).ready(function() {
   var grid = $("#Grid").data("kendoGrid");
});
</script>

Hope that helps.