I have a tree table and on mouse over i need to have buttons to remove one of the rows of the tree table . I am currently using html div element inside setDescription. The Html style properly and i am getting a proper html element inside the tool tip. Now i need to have a button to remove or rename a specific rows from the tree table and setDescrition only allow String so there is no way i can embed Vaadin component inside the tool tip .
Is there a way to communicate from the html element with the vaadin application using javascript or something else .
button.setDescription("<div class=\"popup-rename-div\"> <input type=\"button\" class =\"popup-rename\" onclick=\"alert('test')\"> </div>");
Alert works fine and also i can access my js function using this but i want to open a window for removing and renaming the tree table rows in the same page . will it be possible to send a request to the vaadin application to open a sub window in the same page for tree table manipulation.
Currently i am using vaadin 6.6.3 with tree table.
I would think it’s bad practice to set the description to HTML like you’re doing in your example. Instead, you may want to setup the buttons within vaadin and then alter the CSS for the buttons to make them initially invisible. You can assign a given CSS class to the button(s) (using Button::setStyleName) and then use a jQuery / YUI class selector to setup event handlers for the buttons. The event handlers can then be responsible for adjusting the visibility and positioning of the button elements depending on your needs.
Actually i want the html component to popup on mouseover , And I am not sure whether there is any other way to detect mouseover and popup the html content. setDescription is the only one i know at the moment which detects mouseover and can be used to popup some message or html elements,
Hi Dave, I understand. I think the same type of solution would apply. Any HTML element which supports the mouseover event can be assigned a CSS class. After you assign the class, the jQuery / YUI class selector can be used to assign a mouseover listener / handler. The listener handler can then insert the appropriate HTML to show the HTML component you want (from your example, you want a div with some buttons to show). This can be almost entirely in JS with or without Vaadin.
Here’s some examples of how to use the eventing API from YUI:
I can use ajax or jquery for that matter but what i want is for the javascript query to trigger some short of listener in the same page to open some modal window so i can manipulate the tree table row values. For example if there are 4 rows in the tree table, so when mouse over tool tip comes up i should be able to edit the row contents by firing some javascript method that communicate with the server and opens up the edit window in the same page to modify the tree table contents . the same way if i put a button in the tree table column field and when i click an edit window pops up . similar to that but for this i want it in mouse over and not by clicking any vaadin component.