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.
Related
I'm using kendo ui to create some grids. The code example bellow is the one that drived me into my implementation. I faced a bug during the development and I tried some workarounds but none of them worked.
http://dojo.telerik.com/AsUDo/14
Here's the problem:
I need to create a grid with sortable behaviour (in the whole tr).
The whole line gets sortable only when I comment this line:
//ignore: "TD, input".
But then if I change the Product Name and then click in Unit Price, for instance, the text in the Product Name field is set to the previous value. It just doesn't get updated.
If I use the
ignore: "TD, input"
attribute though, the fields get updated whenever I type the Product Name and then change the Unit price or change any other field, but the only sortable column I get is the one with the template and that doesn't meet the requirement that my client asked.
Any thoughts?
The sortable mousedown interferes with the cell save order of events, so when you edit the row and click off to another cell, the sortable events "kill" the editing events and your change is lost.
If you change your sortable filter to
filter: ">tbody >tr:not(.k-grid-edit-row)",
This "disables" the sortable events on the currently edited row so that the editing events can complete.
The downside is that if you want to sort/drag the row being edited, you must first click off the row(so that it is no longer the .k-grid-edit-row) and then go back and drag that row.
This is how I have my sortable grids set up and I just live with the downside...or you live with using a sort handler instead of allowing the whole row to be dragged.
You may be able to play around with the filter to overcome my downside, but I have not been able to and in the grand scheme of things, there are more important things to spend time on...i.e. try to get the client to relax the not-that-important requirement.
I'll try to describe what I'd like to have.
At the moment, I have custom control Desk with:
an Accordion Container (dojo)
several Accordion Panes, of which
one contains custom control Agenda
In custom control Agenda, there's nothing really special, expect for
custom control Tiles
In custom control Tiles, I display meeting info in a nice way, as tiles. There can be multiple tiles on one row. In order to make things looking perfect, I have to spread these tiles over the full line, justified, using CSS (that part works, 99%). What doesn't work is that when the accordion is hidden when the page loads, I have no details on the size of each tile so I can't do my calculations (i.e. offsetWidth==0).
So I have to delay the calculations to when the accordion is activated and onShow is triggered. But how to pass this on downwards, all the way to the custom control Tiles?
Tiles is used in other places too, so it cannot be a fixed reference. It doesn't even know that it's inside an accordion...
Question:
How can I call/trigger a function that's inside the Tiles custom control from the top custom control, Desk, in a transparent way?
NB A code example, even an illustrative one, would be very complicated to make (I think).
Could someone give me a push into the right direction? Events and triggers maybe? Pass accordion id down to the Tiles cc and then do something brilliant?
Thanks!!
I have a solution right now, but it isn't exactly a beautiful and transparent one.
I gave the Tiles a styleClass="Tiles", and then I can find these Tiles using getElementsByClassName. It's not the proper way, but it's a way, the pragmatic one.
I have a calendar-like view that shows a table with one column per day of the week (see this image). Each row represents a specific thing that can be booked for a time. The idea is now that a booking can be extended by dragging the outer edge to the next day in the table, or shortened the same way. The active booking has a span on each side of the cell that is supposed to be the handle for dragging.
My main problem now is that the usual drag & drop features in browsers don't seem to fit my situation. I don't want to drag something and drop it anywhere else, I just want to drag to extend the item.
Is this still something that can be done with the usual HTML5 drag&drop feature or some generic drag&drop library? Or is there any other way to achieve this? Any pointers on how to approach this problem?
I'm using React for this, which might make some solutions difficult to integrate if they manipulate the DOM directly.
ummm not sure what to do here , I thinks its unlikely the link will change soon , I can describe the repo 'Allows individual or group selection of items using the mouse. Click and drag to lasso multiple items, hold the cmd/ctrl key to select non-adjacent items'. I can briefly describe what the lib code does: uses keydown, keyup and mousedown listeners to create an overlay and detect covered nodes in the DOM .
I have a simple DC.js bar chart. I have it set up so you can click on an element and it gets filtered. This is standard behavior. It remains lit up, and the others go dark. You can then select other elements and have them added to the filter.
I'm looking for a way to replicate that functionality without clicking on the element. So like, i click a link outside the chart and the chart acts like I just clicked on some element.
Has anyone seen this done before?
Thanks,
Edit:
The reason I'm trying to do this is for accessibility. There's no way for keyboard users to interact as far as I can tell.
A hacky way to do it is to use chart.select to get a d3 selection of the element you want, and then fire an artificial click event as described here:
How to invoke "click" event programmatically in d3?
A better way is to do what the base chart onClick does:
_chart.filter(filter);
_chart.redrawGroup();
https://github.com/dc-js/dc.js/blob/master/src/base-mixin.js#L610
where filter is the key you want to filter on.
I am using the KendoUI html editor, in inline mode. It works fine, but I have found some problems with the arranging of toolbar items. Namely:
I have added custom tools to the toolbar. They are not correctly 'tagged' with the k-group-start, or k-group-end classes, and thus thir edges, and margins are not correct.
I can't influence where the toolbar puts in the 'k-group-break' item (what makes a linebreak on the toolbar).
I have tried to modify these in the selection changed event (according to the demo page, that gets fired every time I click into the edited area), but the kendo built-in logic overwrites my changes after that.
Has anyone encountered this problem? What could be a good solution? I am pretty lost, since I haven't found anything on this topic in the kendo documentation, so some hack might be needed.
Just add a tool ".Separator()" in your tools list and it will create an empty "li" ..
<li class="k-separator k-group-start"></li>
you can than style this element to create the spaces, I have made this li as a block element so it pushed everything which follows down.
Hope this helps.
Cheers