Change Select Filter When select Row Item

Hi,

I am displaying 2 grids on one page.

When select any row from first grid, it will popup data in second grid. All works well.

Problem is in Select Filter.
In second grid, I put 2 column with select filter. When it loads data for first time, it tooks dropdown values as distinct values of result grid values.

Now if i click on second row or any other row, select filter dropdown values are not changing.

Also I need to select default value as first value in select filter.

Please help how to achieve this.

I tried with grid.refreshFilters() but it is not working.

Thanks in advance.

Here are the screenshots which explain a bit better.

Screenshot 1 - This is default listing when page loads.
Screenshot 2 - This shows values in second grid when i select row from first grid. It takes dropdown values in select filter automatically with distinct values.
Screenshot 3 - This updates second grid when I select another row. But Select Filter Dropdown values are not updating as per result records distinct values.

Anybody here who can help me please ?






Are you using client side or server side filters?

//Client side filtering
refreshFilters must be enough, but it must be called after data loading ( from loading callback )

//Server side filtering
situation is a bit more complicated. Connector loads options collections only once, and will not request them again. To change such behavior before data loading in second grid, try to call something like

grid._con_f_used[index] = 2; grid._colls_loaded = true;

where index - index of column with select filter

As for setting default value, from the loading callback of second grid, you can call something like

grid.getFilterElement(index).value = "default value";
grid.filterByAll(); //force filtering by default value

Hi Stanislav,

Thanks for answering.

Sorry but it may be possible that I am somewhere wrong so I cant find soln. Here I am explaining in
details.

Below are the code for 3 cells in page.

statusBarA = dhxLayout.cells(“a”).attachStatusBar();
statusBarB = dhxLayout.cells(“b”).attachStatusBar();
statusBarC = dhxLayout.cells(“c”).attachStatusBar();

Now for first cell,

mygrid = dhxLayout.cells(“a”).attachGrid();
mygrid.setImagePath("./dhtmlx/dhtmlxGrid/codebase/imgs/");
mygrid.setHeader(“ID,Route Name,Category,Direction,Service,Created Time,Modified Time”);
mygrid.attachHeader(",#connector_text_filter,#connector_text_filter, , , , “);
mygrid.setInitWidthsP(“1,25,15,11,19,15,15”);
mygrid.setColAlign(“left,left,left,left,left,left,left”);
mygrid.setColTypes(“ro,ed,ed,co,co,ro,ro”);
mygrid.setColSorting(”,connector,connector,connector,connector,");
mygrid.enableSmartRendering(true);
mygrid.enableMultiselect(false);
mygrid.enableMultiline(true);
mygrid.setSkin(“dhx_skyblue”);
mygrid.attachEvent(“onRowSelect”, editRoute);
mygrid.setColumnHidden(0,true);
mygrid.enableContextMenu(menu);
mygrid.init();

mygrid.loadXML(“routes_connector.php”,function(){

statusBarA.setText(mygrid.getRowsNum()+" stops");
mygrid.entBox.id="menu_context_id";
menu.addContextZone("menu_context_id");

});

mygrid.attachEvent(“onBeforeContextMenu”, function(zoneId){
if(mygrid.getRowsNum()<2){
menu.setItemDisabled(“deleteSelected”);
}else{
menu.setItemEnabled(“deleteSelected”);
}
return true;
});

onRowSelect, I am calling editRoute function to load data of “c” cells.

Here is “c” cell…
mygrid3 = dhxLayout.cells(“c”).attachGrid();
mygrid3.setImagePath("./dhtmlx/dhtmlxGrid/codebase/imgs/");
mygrid3.setHeader(“Pos.,ID,Full Name,Day Pattern,Start Date, End Date,Master”); mygrid3.attachHeader(",#connector_text_filter,#connector_text_filter,#connector_select_filter,#connector_select_filter");
mygrid3.setInitWidthsP(“6,15,30,12,12,12,13”);
mygrid3.setColAlign(“left,left,left,left,left,left,left”);
mygrid3.setColTypes(“ro,ro,ro,co,ro,ro,co”);
mygrid3.enableSmartRendering(true);
mygrid3.enableDragAndDrop(true);
mygrid3.enableMercyDrag(false);
mygrid3.enableMultiselect(true);
mygrid3.setSkin(“dhx_skyblue”);
mygrid3.attachEvent(“onDrag”, grid3drag);
mygrid3.attachEvent(“onDrop”, grid3drop);
mygrid3.submitOnlyChanged(false);
mygrid3.enableContextMenu(menu2);
mygrid3.init();

Here is edit route function…

function editRoute(rId,cInd){
var selectedId=mygrid.getSelectedRowId();
mygrid3.clearAll();
// I put this code as you answer
mygrid3._con_f_used[6] = 2;
mygrid3._colls_loaded = true;

mygrid3.loadXML("route_stops_connector.php?routeid="+selectedId, function(){
	mygrid3.getFilterElement(6).selectedIndex = 1;		   
	mygrid3.filterByAll();  		
	statusBarC.setText(mygrid3.getRowsNum()+" stops");		
});

}

In route_stops_connector.php,

I am loading options using…
// filter master starts
$filter_query = “Query goes here”;
$filter_res = mysql_query($filter_query);
$filter_arr = array();

while($filter_row = mysql_fetch_array($filter_res)) {
$filter_arr[$filter_row[‘master_id’]] = $filter_row[‘master_id’];
}
$grid->set_options(“scheduled_run_master_id”,$filter_arr); // value => label
// filter master ends

As you said, it is loading option for first time only. It is not updating if I select other row. Now as you said, I put below 2 lines in editroute function.
mygrid3._con_f_used[6] = 2;
mygrid3._colls_loaded = true;

As my filter select box is in 6th column, I put 6 instead of index. Now it is not loading any values in selectbox.

I hope I make it clear this time.

Thanks.

Sorry was a typo from my side :frowning:

Must be

mygrid3._con_f_used[3] = 2; //as you have 2 select filters mygrid3._con_f_used[6] = 2; mygrid3._colls_loaded = false; //was incorrectly set to true in previous sample

Other code looks correct and must work after above fix.

Thanks that works. Perfect!

Now I have another issue. I try to apply the same for updating select filter.

Here is the case.

I have only 1 grid on page with 8 columns in it. Each have select filter.

Now if i select first filter, it updates records. Now i need to update rest of select filters with only new result set distinct values. But it is not updating.

I put the same code. and in connector, I took filter using $_REQUEST[“dhx_filter”] and than set the options accordingly. Is this wrong way ?

Thanks.

In which moment of time you are resetting filters collection?

Connector starts data reloading from onFilterStart event, so if you are using it as well to trigger collection clearing - be sure that attachEvent executed before grid.init ( in such case it will be executed before connectors code, and reloading request will refetch collections from the server side )