Putting a Datepicker in the Header of a grid

Suite and Optimus Suite 5
#1

Hello,

I wanted to put a Datepicker in de Header of a grid so it’s easiert to filter and the input is formated right away. I’ve read that the header can contain any html, so i tried to simply put an input field like this in the header:

<input type='text' id='calendar_input'>

So it looks like this:

grid.attachHeader("#rspan,#text_filter,#text_filter,#text_filter,#text_filter,#text_filter,<div id='calendarSel' style='padding-right:2px'></div>);

And I declared a calender like this:

var	myCalendar = new dhtmlXCalendarObject(["calendar_input"]);

This puts an input field in the header, which is correct. But when I click into that text-field it sorts the colum ascending and descending, like clicking the header itself. Also the calendar doesn’t show up.

Is there any possibility to achieve this?

#2

okay - i managed to get the Datepicker to open when clicked into the textfield of the colum. But the colum still sorts as soon as I click into the field…

#3

Seems like this question has already been answered here:

viewtopic.php?f=2&t=13491

To prevent the custom text-field vom triggering the sorting is to add

onclick="(arguments[0]||window.event).cancelBubble=true;"

so it looks like this for example:

<input style="width:80%" type='text' id='calendar_input' onclick="(arguments[0]||window.event).cancelBubble=true;" >
#4

I apologize for the delay. Your solution is correct you need to add cancelBubble event to your div.