CODEWITHSUNDEEP
jquerykendo-uikendo-gridkendo-asp.net-mvc
LP13
LP13

Reputation: 34079

How to attach databound event of kendo Grid in document ready function?

I have a MVC Kendo UI grid and im trying to attach dataBound event. Below are the two approaches I was trying to use. I would preferred 1st approach if I can

@(Html.Kendo().Grid<BatchDetails>()
    .Name("Grid")
    .Columns(col =>
    {
        col.Bound(p => p.BatchKey).Title("State");
        col.Bound(p => p.OriginalCost).Title("Total Cost");
     })
        .AutoBind(true)
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)                    
            .Read(read => read
                .Action("GetData", "Home", new { batchID = Model.BatchID })))

)

1> I want to bind DataBound event of the grid in document ready function. but when i do that i get null reference

$function({
     var grid = $("#Grid").data("kendoGrid"); // grid variable is null here
     grid.bind("dataBound", function(){
     //dosomething here
 });

})

2> If i bind the event using the following approach then i have to declare the onDataGridBound function as Global. The Grid cannot access scoped function

 @(Html.Kendo().Grid<BatchDetails>()
      .Name("Grid")
      .Events(x => x.DataBound("onDataGridBound"))
  )

is there any way to declare onDataGridBound as scoped function, and grid can still access it?

Upvotes: 1

Views: 7557

Answers (1)

Rick S
Rick S

Reputation: 6586

According to the Telerik documentation you have to make sure your ready function is place after the widget declaration:

You can get a reference to the client-side object initialized by the server-side wrapper via the data jQuery method. Use the Name of the widget in an ID jQuery selector and obtain the reference in a document.ready handler, which is placed or called after the widget declaration. This will ensure that the widget is already initialized and the client-side object exists. After you get the object reference, you can use the widget's client-side API.

@(Html.Kendo().NumericTextBox()
    .Name("age")
)

<script>
$(function(){
    var numeric = $("#age").data("kendoNumericTextBox");
    numeric.value(10);
});
</script>

Upvotes: 3

Related Questions