How to bind MVC Kendo Grid databound event?

6 posts, 0 answers
  1. Laksh
    Laksh avatar
    25 posts
    Member since:
    Mar 2011

    Posted 01 Jun 2015 Link to this post

     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?

     

  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 03 Jun 2015 Link to this post

    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
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Laksh
    Laksh avatar
    25 posts
    Member since:
    Mar 2011

    Posted 03 Jun 2015 in reply to Alexander Popov Link to this post

    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
        }  
     
    })

     

     

     

     

     

     

  5. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 05 Jun 2015 Link to this post

    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
  6. Steven
    Steven avatar
    4 posts
    Member since:
    May 2016

    Posted 09 Jun in reply to Alexander Popov Link to this post

    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
  7. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 13 Jun Link to this post

    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
Back to Top
UI for ASP.NET MVC is VS 2017 Ready