show/hide custom filter in header Problem

I have a custom filter in one of my grid header column. A html text input control is attached to custom filter. As the grid loads custom filter is displayed and works great.

Now i have a button in tool bar that show/hide filter header row. Once i hide the filter header row by calling deattach(), and next time i try to attache filter header row with custom filter; the html text input control mapped to custom filter is not found in document.

It seems once deattch() is called it remvoes the input box from DOM.

Code is as below:

grid.attachHeader("<div id='my_filter'></div>,#text_filter");
$("my_filter").appendChild($("myFilterDiv").childNodes[0]);
grid.makeFilter("anInputElement", 0);
....
....

<div id="myFilterDiv"><input type="text" id="anInputElement" name="anInputElement"/></div>

Yes, detachHeader() method remvoes the input box from DOM. But after you are calling grid.attachHeader("

,#text_filter"); necessary html element should be attached again

Probably html element will be attached once i call makeFilter on that. Until then it is no more available.

And to call makeFilter i need to appendChild as given in code in my post. But there is no child found as html Input was removed from DOM.

Try to use:

$("my_filter").innerHTML="<div id="myFilterDiv"><input type="text" id="anInputElement" name="anInputElement"/></div>";

Thanks it worked perfect.