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

[hustcer]

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.

[Dimiter Madjarov]

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

 

 

[hustcer]

Thank you very much, I got it!

[hustcer]

It works, but render the buttons and then remove it, It's not that natural. There is a bad smell, IMO.

[Dimiter Madjarov]

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

 

 

[hustcer]

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.

[Dimiter Madjarov]

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

 

 

[hustcer]

Thanks very much

[Harlan]

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