How can I know whether kendo grid rendering finished or not?

9 posts, 2 answers
  1. hustcer
    hustcer avatar
    20 posts
    Member since:
    Apr 2014

    Posted 06 May 2014 Link to this post

    How can I know whether kendo grid rendering finished or not?
    I want to do something after the grid was rendered, but there isn't a 'rendered' event, Any suggestions?

    BTW:
    If I init a kendoGrid with the following data source:
    $("#grid").kendoGrid({<br>  dataSource: [<br>    { name: "Jane Doe", age: 20 },<br>    { name: "John Doe", age: 30 }<br>  ]<br>});


    How can I show commandA when age<25, and commandB when age>25?
    Thanks.
  2. Answer
    Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2310 posts

    Posted 06 May 2014 Link to this post

    Hello Justin,

    If you would like to access the Grid rows, you should bind to the dataBound event, which is fired when the data is ready. For most of the other tasks you could use document.ready.

    As for the second question, you could achieve this in the dataBound event handler i.e. access the Grid rows, retrieve the associated models, check the age value and hide/remove the unneeded command buttons. Here is an example, which demonstrates the approach in action.

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. hustcer
    hustcer avatar
    20 posts
    Member since:
    Apr 2014

    Posted 06 May 2014 in reply to Dimiter Madjarov Link to this post

    Thank you very much, I got it!
  4. hustcer
    hustcer avatar
    20 posts
    Member since:
    Apr 2014

    Posted 06 May 2014 in reply to Dimiter Madjarov Link to this post

    It works, but render the buttons and then remove it, It's not that natural. There is a bad smell, IMO.
  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2310 posts

    Posted 06 May 2014 Link to this post

    Hi Justin,


    I am not sure what is the scenario and the exact Grid configuration on your side. Please share some additional details and if possible a runnable example (you could update mine too), so I could assist you further.

    I am looking forward to hearing from you.

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. hustcer
    hustcer avatar
    20 posts
    Member since:
    Apr 2014

    Posted 06 May 2014 in reply to Dimiter Madjarov Link to this post

    I mean the first problem was resolved. but the second one:
    My situation is quite similar to this one:
    http://jsbin.com/notukesu/2/edit
    It works but:
    dataBound: function(){
        var grid = this;
        grid.tbody.find("tr").each(function(e){
          var model = grid.dataItem(this);
           
          if(model.age < 25) {
            $(this).find(".k-grid-edit").remove();
          }
        });
      }

    the buttons was rendered and then removed, I think render them conditionally is better.

  7. Answer
    Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2310 posts

    Posted 06 May 2014 Link to this post

    Hello Justin,


    Conditional rendering of the Grid commands is not supported. Nevertheless you could achieve this with a template column. The downside of this approach is that you should manually add the command markup to the cell. The Grid will then automatically attach the appropriate handlers through jQuery delegates. Here is the updated example.

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. hustcer
    hustcer avatar
    20 posts
    Member since:
    Apr 2014

    Posted 06 May 2014 in reply to Dimiter Madjarov Link to this post

    Thanks very much
  9. Harlan
    Harlan avatar
    19 posts
    Member since:
    Dec 2014

    Posted 01 Apr 2016 Link to this post

    The dataBound and document ready events did not work for what we needed. Instead we opted to use the kendoWidgetCreated event and check to see that all the controls that we cared about had been created, like this (we're using AngularJS):

     

    $scope.$on("kendoWidgetCreated", function (e) {
        if ($scope.grid && $scope.makeFilter && $scope.modelFilter) {
            $scope.grid.resizeGrid();
        }
    })

Back to Top