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.
Related
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 grid with sorting on. I want to allow users to sort by any column, but at the same time I want one record to always display at last position (that record is recognized by ID). Is there a way to do this?
I'm using ExtJS 4.2.2.
I wouldn't keep a blank record for editing in the grid all the time. What I usually do is to provide the user a means to add record when he needs, let him to edit and save it.
You may have different requirements, anyway, you can see how this logic works here: Editable and Writable ExtJS Grid Example
This approach saves you from solving the sorting problem.
I need to populate my subgrid which shows some of the columns from main grid without actually going and getting data again using URL? Example:Main Grid is getting data from server (10 columns) using jsonReader. Out of which I want to show 7 columns in the parent row and 3 columns in the subgrid row . Can I do this? (Or some other way to achieve this expand concept?)
One possible workaround to use the sub-grid as 1-1 with main grid, instead of as parent-child : query all the columns as normal in the parent grid, but set the ones you don't want in main row as hidden. Then in sub-grid load event, access those fields using the "parent" row id and create them as custom fields or simply emit custom html.
This does cause duplication of the fields though, since the original main grid fields are still present, even if hidden. The html ids will get duplicated and may cause conflicts if you don't handle them.
Perhaps there is a cleaner way to do it than this (which I'm sure #Oleg will show us any minute now!)
But I wish jqgrid had a documented feature to more easily handle this kind of thing. It is very useful because you get the benefit of full inline editing in the subgrid, so you can design a much nicer edit form (eg. multiline textareas) than when confined to one straight line.
Note the presence of this feature in other grids.
Jquery EasyUI Datagrid demo
Telerik Grid Editing Demo
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.
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.