Search TreeGrid from Toolbar


I’ve seen the sample here [url][/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?

There are some samples about using input in toolbar: … /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(){


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?

You need write events correctly:

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

…oops :blush:

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

grid1 = layout1.cells("a").attachGrid();
		grid1.selMultiRows = true;
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.

Just define function filterGrid1() :wink:

Newermind :slight_smile:
You are welcome

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.

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


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. (4.25 KB)

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


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;

tabbar = dhxLayout.cells("a").attachTabbar("left");
	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>","*");

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

Thanks for your patience! (7.46 KB)

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.

This works! Yay! :smiley:

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

Please, try to set the third argument of filterBy() method to try to filter by several values.
Here is the tutorial: … any_values