I have created a table using semantic-ui in my Meteor JS web app.
That table displays the list of names that is on my DB.
I would like to make the rows of that semantic-ui table selectable in the true sense and not just selectable in appearance.
At the moment, when the mouse hovers over a row, that row gets highlighted (changes shade) which makes it appear selectable, but when you click on it, it does not call or trigger a javascript function and therefore it is not truly selectable.
How do I make that table truly selectable?
How does one do this?
Is it possible?
or do I just have to add a button beside the texts for each table and have the user click that button instead?
I could add the buttons in each cell but I really would prefer it if the whole row is selectable instead.....
Thank you very much...
You just have to add class or id on <tr> and then use that class to add function you want to that row. For creating a function you will need to use meteor template events and you can learn more about it here.
I also created an rough example on jsfiddle that you can follow, just replace with your own classes and template and file names. :)
I hope that helps you!
Related
I have this project where each cell must have a different type: Some of them are inputs, some of them are dropdowns, and on some of them I have to implement a modal hen I click the cell.
I am using react tables and I can't find a way to render different type of cells in the same table.
you can use bootstrap for table. it is very easy to use to get responsive table.
Does anyone know how can I make this http://prntscr.com/9z7pk with HTML and JS? I made this image so you can understand better what I mean.
I already have this done with 2 multiple select inputs but I don't know how can I insert in html to put the checkbox.
Thanks in advance!
If you find yourself having a lot of these complex widgets in your application you should look into a framework like extJS or other similar frameworks. It will save you headaches and will prevent you from reinventing a wheel that has been reinvented too many times already.
Unfortunately a multiple select won't let you inject tickboxes or other arbitrary content into menu items - it relies on the OS-native multi-select hotkeys (typically shift and control).
What you could try is styling both items as ol or ul lists, and the document items as li elements within them. Whenever you add an item to the right-hand list, render a new li element and update an <input type="hidden" /> with a comma-delimited list of selected items.
Depending on how you want the interaction to work, you could:
Implement add/remove buttons as depicted, requiring you to implement multi-selection in the lists yourself. A widget framework such as extJS (as zi42 mentioned) can help with this.
Put an "add" link next to all items in the left box and a "remove" link next to all items in the selection box, except for the mandatory items.
Dispose of the dual boxes and instead place checkboxes against every item in a single, unified list, excepting the mandatory items which should have a checked-but-disabled checkbox input.
Is there a way in jqgrid to select multiple cells? Ideally I want to toggle different cells and be able to restrict it in a way that only 1 cell can be toggled on in each row.
Is jqgrid suited for this or should I be using a different library?
Your requirement reminds me the requirement to select words in the grid instead of rows. You can implement this, but jqGrid could not help you here. On the other side if you select a row you can use Edit or Delete navigator button to remove it. There are internal parameters selarrrow and selrow which hold the id of the selected row.
If you really need to implement such custom selection you can use beforeSelectRow or onCellSelect event handler to do this. Yon can save the list of selected cells in your custom variable. You can use .addClass("ui-state-highlight").attr("aria-selected","true") for the <td> element instead of <tr> what jqGrid do. It is important that you will be not able to use any editing features of jqGrid in the case.
Kind of a two-part question. First, in ExtJS 4, how would i go about attaching a hover listener (aka mouseenter, mouseout) to the rows of a grid panel?
Secondly, reason I want that event is so I can show a couple action buttons within one of the cells when any cell in the row is hovered over. What would be the most efficient way implement this menu (creating the actual html elements). My first thought was to create a renderer for the cell that will hold the menu and return the html for the buttons in that renderer, initially hidden. However that seems like it would be alot of extra html being put into the dom since those same buttons would be created for each row thats displayed in the grid.
Part 1:
You can do this by tracking the itemmouseenter and itemmouseleave events on the grid view. However, for these events to be fired, you need to make sure you enable trackOver on the grid view.
Note that this all applies to the grid view config, not the grid config, and that the trackOver config is off by default for performance reasons. You want to be careful about doing too much in these events.
Part 2:
A better way to do this may be to define an editor for the cell, which is a component containing the buttons you wish to use. You can trigger the editing with the events discussed in part 1. This will mean your buttons get reused in the same way other editors do, and can be Ext components rather that html cludges.
I had a similar issue with showing menus for toolbar buttons on hover (and hiding them on mouseout). I wrote up a HoverButton extension which you should be able to easily extend to be a HoverRow if you need, using the events mentioned in Simon's solution.
Ext.HoverButton
Hope it helps.
Is it posible to make a drop down list always visible in a editabel grid ? With the default setup/configuration the drop down only apear when the cell is clicked on ?
Thanks
I do not think this is possible because of the way the editor is set up. The editor (wether it is a row editor or cell editor) is a re-usable object that is loaded with 1 record at a time. If the editor would be shown for multiple rows at a time you would require multiple editor objects as well.