Hi,
does anybody know how to implement a tooltip for a mouseover?
In one of our columns the text is to long to show, so we show only the first letters. The user should see the whole text when hovering over the cell or row...
Thanks for every idea!
Torsten
Hi Torsten,
If you would like to show a default browser tooltip, that is fairly simple. You just need to set the 'title' attribute of the cells. This can be done in the initialize client side event.
Here is an example handler.
function initGrid(grid, args) { var rows = grid.get_rows(); var rowCount = rows.get_length(); var cellCount = rowCount > 0 ? rows.get_row(0).get_cellCount() : 0; for (var r = 0; r < rowCount; ++r) { var row = rows.get_row(r); for (var c = 0; c < cellCount; ++c) { var cell = row.get_cell(c); var cellEl = row.get_cell(c).get_element(); cellEl.title = cell.get_text(); } } }
Hopefully this accomplishes what you need.
regards,
David Young
Can you elaborate some more on this code? I tried to work it out, but not worked? How to make this event fired? Can you provide a sample?
Thanks in advance,
Assyst
Can you demonstarte a sample code?
Thanks,
Assyst,
I will give you some sample code that will get you started. I have a blank <div id="placeHolder"></div> on my page and I attach to the initialize event on the grid.
function checkChanged(e) { var colText = e.target.getAttribute('colText'); var grid = $find("WebDataGrid1"); var col = grid.get_columns().get_columnFromKey(colText); col.set_hidden(!e.target.checked); } function init(grid) { var place = document.getElementById("placeHolder"); var cols = grid.get_columns(); var colCount = cols.get_length(); for (var x = 0; x < colCount; ++x) { var col = cols.get_column(x); var input = document.createElement("input"); input.type = "checkbox"; input.checked = true; input.setAttribute("colText", col.get_headerText()); $addHandler(input, 'click', checkChanged); var span = document.createElement("span"); span.innerHTML = col.get_headerText(); place.appendChild(input); place.appendChild(span); place.appendChild(document.createElement("br")); } }
David
Hi Dave,
And that grabs the thing in the basket. Now it's working fine. Thanks.
I have one more question to you. Will clarify it after i worked on it.
My question is that i want to show the filter row on a button click only and i want to remove the same on other button clicks. By default it have to display:none.
I tried to use document.getElementsByClassName(). But it didn't worked out. So i used document.getElementsById(). But when comes to mozilla and other browsers the width of the cells got shrinked. So it don't make sense. And i used the browser generated id to obtain the class which also is not the proper way. So how could i achieve this?
Is there any way to achieve the filter disable and enable on button click?
Sorry for the trouble caused. From next time onwards i will open up new posts.
Thanks & Regards,
Hi Assyst,
I'll answer this, but in the future, could you kindly open a new forum post for questions not pertaining to the original question of the post. That way if other users have the same question, they can more easily find an answer. You could also try checking our documentation as this can easily be found in the client documentation.
On the client, it is very simple to set the visibility of the filter row.
grid.get_behaviors().get_filtering().set_visibility(val). val should be either $IG.FilteringVisibility.Visible or $IG.FilteringVisibility.Hidden.
-Dave