How to bind MVC Kendo Grid databound event?

[Laksh]

 I am using MVC Kendo UI. I have defined my grid in Razor

 

@(Html.Kendo().Grid<BatchDetails>()
    .Name("Grid")
    .Columns(col =>
    {
        col.Bound(p => p.BatchDetailID)
            .ClientTemplate("<input class='chkbox' type='checkbox' value='#=BatchDetailID#' />")
            .HeaderTemplate("<input type='checkbox' id='selectAll' />")
            .Width(30)
            .Sortable(false)
            .Filterable(false);
        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?

 

[Alexander Popov]

Hi Laksh,

The following should work as expected if the code is executed after the Grid has been initialized. For example: 

@(Html.Kendo().Grid<BatchDetails>()
    .Name("Grid")
    ...
)
$(document).ready(function(){
 var grid = $("#Grid").data("kendoGrid");
 grid.bind("dataBound", function(){
  //dosomething here
 });
})

Another approach you might use is declaring the function through the wrapper: 

.Events(e=>e.DataBound(@<text>function(e) {alert(1)}</text>))

Regards,
Alexander Popov
Telerik

[Laksh]

My document ready function is in .js file not in cshtml file. I can find the instance of the grid in document ready function if i move the .js file at the end of the .cshtml file. So that issue is resolved now.

 

Question

Can i attach dataBound event through .cshtml as below. If i do this i get error on view load.

0x800a1391 - JavaScript runtime error: 'onDataBound' is undefined

 

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div>
    @(Html.Kendo().Grid<MVCPOC.Models.AssessorAccounts>()
        .Name("Grid")
        .Columns(col =>
        {
            col.Bound(p => p.AssessorName).Title("AssessorName");
            col.Bound(p => p.Taxyear).Title("Year");
        })
                .AutoBind(true)
                .Pageable()
                .Sortable()
                .Events(x => x.DataBound("onDataBound"))
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Read(read => read
                        .Action("GetData", "Working")))
    )
</div>

<script src="~/Scripts/Working.js"></script>

 

The document ready function below is in separate .js file

$(function () {


    function onDataBound() {
        // grid could not find this function
    }

})

 

 

 

 

 

​

 

[Alexander Popov]

Hello Laksh,

In that case the function will be declared after the Grid's initialization and in a different scope, so the error is expected.

Regards,
Alexander Popov
Telerik

[Steven]

Do I still have to do the Id lookup or is there a binding option for the row id I can inject in this function definition during data binding(row creation)

                         commands.Custom("Edit").Text("Edit")
                            .Click(@<text>
                                function(e){
                                var id = this.dataItem($(e.currentTarget).closest("tr")).id;
                                var modalFormActionURL = "/PCDB/GLDepartments/Edit/";
                                var modalTitleLabel = "Editing Department";
                                var modalButtonText = "Update Department";
                                showModalAction(modalFormActionURL + id, modalFormActionURL, modalButtonText, modalTitleLabel);
                                }
                            </text>);

Thanks, Steven Packham

[Alexander Popov]

Hello Steven,

Indeed, looking up the Id is still necessary.

Regards,
Alexander Popov
Telerik

[Rana]

Hi, 

I am unable to find why my dropdown is not populating everything i have tried in static code example, it worked, but here something is messing with my logic.

I am using dropdownlist in the grid in asp.net mvc rasor view. 

Binding the dropdownlist in the dataBound method. shown below.

  var grid = $("#PTGrid").data("kendoGrid");
        grid.bind("dataBound", function (e){
            var grid = e.sender;
            var items = e.sender.items();

            items.each(function (e) {
                var dataRow = grid.dataItem(this);
                var ddt = $(this).find('.dropDownTemplate');

                $(ddt).kendoDropDownList({
                    optionLabel: "Selected Stores...",
                    dataSource: [{"Id":16,"FileInfoId":17,"StoreId":"7215","HasSalesManager":false},{"Id":17,"FileInfoId":17,"StoreId":"7703","HasSalesManager":false}],
                    dataTextField: "StoreId",
                    dataValueField: "StoreId",
                    change: onDDLChange
                });
               
            });
        });

 

The values i extract from debugging.

but somehow dropdown doesn't load anything. 

 

dtt has the input element. 

JSON.stringify(dataRow.SelectedStores) this is how I am assigning value to datasource. 

 

[Rana]

I resolved it, I should place JSON not string there in datasource, 

so I just did dataRow.SelectedStores.toJSON() and it resolved. :) 

[Petar]

Hi Rana,

Thank you for sharing what has resolved the issue in the application you are working on! Your reply will surely help someone who experiences the same issues as yours. 

Regards,
Petar
Progress Telerik