Grid header filtering row that contains 1 element for each column in grid with the same width.

I am trying to create what I call a "header-filter-row". 

Instead of using the inbuilt filter functionality, I would like to have 1 row over or below(preferably) the column headers, that contains a filtering widget, simple textbox or just plan nothing etc.
This makes simple searching much more efficient(in my opinion) and the enduser have a better overview of what is currently being filtered. Ofcourse the inbuilt filtering is superior in more complex cases. 

Here's an example of what I would like to archive from a competitive product:
http://dhtmlx.com/docs/products/dhtmlxGrid/samples/08_filtering/06_pro_search.html 

This is what i have been able to do so far with Kendo. 
http://jsfiddle.net/cBrpn/1/ 

Here I used the toolbar template, but I don't know how to make the search elements the same width as the columns(without having to explicitly set the width). 

Can you suggest a more dynamic way to achieve my goal ?

Regarding having the "filter-row" below the headers is not my primary concern, but it would be great to have the option though :-)