Search TreeGrid from Toolbar

Suite and Optimus Suite 5
#1

Hi,

I’ve seen the sample here [url]http://www.dhtmlx.com/docs/products/dhtmlxTreeGrid/samples/04_grid_operations/02_treegrid_filtering.html[/url] for searching and filtering in a TreeGrid. I’d like to do something similar, but using an input box on the toolbar. Is it possible to create a search box on a toolbar that will search a grid if they are both connected to the same layout? How would you recommend doing this?

#2

Hi
There are some samples about using input in toolbar:
dhtmlx.com/docs/products/dht … /06_input/
And after init you can get object of this input:
inp = toolbar.getInput(‘myInput’);
And use i.e. onkeyup (and some other grid methods) to filter your grid:
inp.onkeyup = function(){
filterMyGrid();
}

#3

Darya,

This isn’t working for me.

I have attached dhtmlgrid_filter.js to my file. After initializing grid1 and toolbar1, I’ve added

toolbar1.addInput("input_search", 14, "", 100); .

After that I’ve got inp = toolbar1.getInput("input_search"); inp.onKeyUp = function (){filterGrid1();}

I’m not getting any errors, it’s just not working. Any idea what I’m doing wrong?

#4

You need write events correctly:

inp = toolbar1.getInput(“input_search”);
inp.onkeyup = function (){filterGrid1();}

#5

…oops :blush:

Fixed that, but now I’m getting ReferenceError: filterGrid1 in not defined.

grid1 = layout1.cells("a").attachGrid();
		grid1.selMultiRows = true;
...
grid1.setColTypes("tree,ed,ed,ed");
		grid1.setColSorting("str,str,str,str");
...
grid1.init();
		grid1.setSkin("dhx_web")
...
toolbar1 = layout1.cells("a").attachToolbar();
...
toolbar1.addInput("input_search", 14, "", 100);
			
			inp = toolbar1.getInput("input_search");
				inp.onkeyup = function(){filterGrid1();}
...

Thanks for all your help Darya, I really appreciate it! As you’ve probably guessed, I don’t have much experience with JavaScript.

#6

Just define function filterGrid1() :wink:

Newermind :slight_smile:
You are welcome

#7

I’m still doing something wrong…Now I have

function filterGrid1(){ grid1.filterByAll} inp = toolbar1.getInput("input_search"); inp.onkeyup = function(){filterGrid1();}
This doesn’t toss up any errors, but it also doesn’t work. :confused:
I’m sorry, I’m probably missing something obvious.

#8

Please, attach the whole html file - it seems to me, that you define your function filtergrid1() in wrong place.

#9

Darya,

Thanks again for all your help! You’ve been really great. :smiley:

I’ve attached an incomplete demo, since it won’t let me just attach the html file. I didn’t include any of the dhtmlx files since I have the pro version.
demo.zip (4.25 KB)

#10

Sorry, but it is now the whole html document.
Where is your tabbar? We need its structure.

layout1=tabbar.cells("a1").attachLayout("2U");
#11

Sorry! I was trying to simplify things for you. I think the part you need is this:

[code]dhxLayout = new dhtmlXLayoutObject(document.body, “1C”);
dhxLayout.cont.obj._offsetTop = 100;
dhxLayout.cont.obj._offsetHeight = -100;
dhxLayout.cont.obj._offsetLeft = 25;

dhxLayout.setSizes();
tabbar = dhxLayout.cells("a").attachTabbar("left");
	tabbar.setMargin("-10");
	tabbar.setSkin('dhx_web');
	
	tabbar.setImagePath("img/");
	tabbar.addTab("a1","<div><img src='img/contacts.png'></div>","*");
		tabbar.addTab("a2","<div><img src='img/calendar.png'></div>","*");
		tabbar.addTab("a3","<div><img src='img/task.png'></div>","*");	
		tabbar.addTab("a4","<div><img src='img/memos.png'></div>","*");
		tabbar.addTab("a5","<div><img src='img/journal.png'></div>","*");
	tabbar.setTabActive("a1");[/code]

I’ve also attached a new, unsimplified demo. Just in case that’s easier for you.

Thanks for your patience!
demo2.zip (7.46 KB)

#12

You need to replacethe next:

function filterGrid1(){ grid1.filterByAll} inp = toolbar1.getInput("input_search"); inp.onkeyup = function(){filterGrid1();}
with this:

toolbar.addInput("input_search",0,"",100); inp = toolbar.getInput("input_search"); inp.onkeyup = function(){ mygrid.filterBy(1,inp.value); };

Method filterByAll() is inappropriate in your case.

#13

This works! Yay! :smiley:

But I need to filter by more than just the one column. Is there any way to filter multiple columns?

#14

Please, try to set the third argument of filterBy() method to try to filter by several values.
Here is the tutorial:
docs.dhtmlx.com/doku.php?id=dhtm … any_values