angular-kendo hide Grid Header directives

[Zhonghai]

Hi there,

trying to hide the grid header completely (.k-grid-header) via a custom directive, but some how the k-grid-header is not available when the directive compiles. what could be the reason? and clues guys?

app.directive('ngHideGridHeader', function ($parse) {
    return function (scope, element, attrs) {
        $(element).find(".k-grid-header").hide();
    }
});

 

<div kendo-grid="grid" k-options="gridOptions" ng-hide-grid-header></div>

[Mihai]

Hi,

That's like using a drilling machine to tighten a screw :-) but it should be possible.

First, the simple solution is to use CSS:

<style>
    /* or better, place it in a .css file that's loaded in your page */
    .hide-grid-header .k-grid-header {
        display: none;
    }
</style>

<div kendo-grid class="hide-grid-header" ...>

However, if you really want to use a directive: the reason why the widget is not there when your directive runs is that Angular-Kendo directives create widgets with a $timeout.  The following should work:

app.directive('ngHideGridHeader', function ($parse, $timeout) {

    return function (scope, element, attrs) {
           $timeout(function(){

            $(element).find(".k-grid-header").hide();
           });

    }

});

Hope this helps.

Regards,
Mihai
Telerik

 

 

[Zhonghai]

Good morning Mihai,

sorry for the delayed confirmation and thanks for your reply. Yes, you are absolutely right, the CSS solution is much cleaner and better.

thanks

Zhonghai