hide datePciker in grid column

[Masip]

Hi,

Could i hide datePicke button in grid header column and only show it on mouse over ?

Regards

[Hetali]

Hi Masip,

To show the datepicker button in the Kendo UI Grid Header only when you hover over the datepicker, use the following custom approach:

ngAfterViewInit() {
  var dtp = document.querySelector(".k-datepicker");

  var dtpButton = document.querySelector(".k-datepicker .k-select");
  dtpButton['style'].visibility = "hidden";

  dtp.addEventListener("mouseenter", ()=> {
    dtpButton['style'].visibility = "visible";
  });
  dtp.addEventListener("mouseleave", ()=> {
    dtpButton['style'].visibility = "hidden";
  });
}

In this StackBlitz example, the datepicker button is visible when you enter the mouse in the datepicker in the Kendo UI Grid Header.

I hope this helps. Please let me know if I can further assist you.

Regards,
Hetali
Progress Telerik