How to bind MVC Kendo Grid databound event?

1 Answer 3375 Views
Grid
Laksh
Top achievements
Rank 1
Laksh asked on 01 Jun 2015, 09:46 PM

 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?

 

1 Answer, 1 is accepted

Sort by
0
Alexander Popov
Telerik team
answered on 03 Jun 2015, 01:34 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Laksh
Top achievements
Rank 1
commented on 03 Jun 2015, 10:07 PM

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
Telerik team
commented on 05 Jun 2015, 10:11 AM

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Steven
Top achievements
Rank 1
commented on 09 Jun 2016, 07:20 PM

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
Telerik team
commented on 13 Jun 2016, 08:25 AM

Hello Steven,

Indeed, looking up the Id is still necessary.

Regards,
Alexander Popov
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Rana
Top achievements
Rank 1
commented on 18 Dec 2020, 02:21 PM

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
Top achievements
Rank 1
commented on 18 Dec 2020, 02:33 PM

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

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

Petar
Telerik team
commented on 22 Dec 2020, 09:23 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Laksh
Top achievements
Rank 1
Answers by
Alexander Popov
Telerik team
Share this question
or