Choosing custom filters triggers column sort

I have the grid in smart mode with server-side sorting and a blank secondary header row:

[code]mygrid = new dhtmlXGridObject(‘mygrid_container’);
mygrid.setImagePath(“codebase/imgs/”);
mygrid.setEditable(true);
mygrid.setSkin(“light”);
mygrid.setHeader(“Col1,Col2,Col3,Col4,Col5,Col6,Col7,Col8,Col9,Col10,Col11,Col12,Col13,Col14,Col15”);
mygrid.attachHeader(",");
mygrid.setInitWidths(“35,35,35,35,35,35,55,,,,,,,*,35”);
mygrid.setColTypes(“ch,ch,ch,ch,ch,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro”);
mygrid.setColAlign(“center,center,center,center,center,center,left,left,left,left,left,left,left,left,left”);
mygrid.setColSorting(“na,na,na,na,na,na,server,server,server,server,server,server,server,server,server”);
//mygrid.setColSorting(“na,na,na,na,na,na,na,na,na,na,na,na,na,na,na”);
mygrid.setDateFormat("%b-%y");
mygrid.enableResizing(“true,true,true,true,true,true,true,true,true,true,true,true,true,true,true”);
mygrid.enableSmartRendering(true);
if (mygrid.setColspan)
{
mygrid.attachEvent(“onBeforeSorting”, customColumnSort);
}

 		mygrid.init();    
	mygrid.load(gridQString);

[/code]

And I add some custom headers:


		    var hdr=mygrid.hdr.rows[2].cells[6];
			hdr.innerHTML="<select id=\"selectCol6\" class=\"headerFilter\"><option>All</option></select>";
		    var hdr=mygrid.hdr.rows[2].cells[7];
			hdr.innerHTML="<select id=\"selectCol7\" class=\"headerFilter\"><option>All</option></select>";
		    var hdr=mygrid.hdr.rows[2].cells[8];
			hdr.innerHTML="<select id=\"selectCol8\" class=\"headerFilter\"><option>All</option></select>";
		    var hdr=mygrid.hdr.rows[2].cells[9];
			hdr.innerHTML="<select id=\"selectCol9\" class=\"headerFilter\"><option>All</option></select>";
		    var hdr=mygrid.hdr.rows[2].cells[13];
			hdr.innerHTML="<select id=\"selectCol10\" class=\"headerFilter\"><option>All</option></select>";
		    var hdr=mygrid.hdr.rows[2].cells[14];
			hdr.innerHTML="<select id=\"selectCol11\" class=\"headerFilter\"><option>All</option></select>";

But when I click on any of those custom filters, it attempts the server side sort, which causes the grid to refresh, thus not allowing me to select the filter properly. I have also tried the makeFilter() call on each of the elements above, but that results in a javascript error “_locator is not an object”…

If this isn’t possible, I’m going to have to move the filters above the grid and fix the column widths to make sure the filters align properly with the columns. That is less than ideal, for sure.

Anyone have any ideas on how to accomplish custom filters in-grid header using dynamic rendering and server-side sorting?

TIA
Chadwick

You should cansel bubbling of onlick event for the custom filter

<select style="width:100%" onclick="(arguments[0]||window.event).cancelBubble=true;" onChange="filterBy()"></select>

dhtmlx.com/docs/products/dht … ntent.html

Perfect! That is exactly what I was looking for!.. Now to just integrate it with server-side filtering… :smiley:

Thanks a ton!