Is there a way to display a component in EditorGridPanel without the need to click on the cell?
The problem I see on this demo is that the checkboxes are not Ext.form.Checkbox components, and not even inherited from it. The checkboxes are simply background images and since I am building a grid that needs ComboBoxes, it will not be simple to apply a similar hack.
Ok, I see what you're after now. Immediately display the combobox on each row upon grid rendering. That might be difficult to achieve, and I suspect it might have a negative effect on the overall performance of the grid (multiple comboboxes to render instead of just one).
In any case, have you looked at the clicksToEdit config option of EditorGridPanel? From ExtJS documentation:
The number of clicks on a cell
required to display the cell's editor
(defaults to 2).
Setting this option to 'auto' means
that mousedown on the selected cell
starts editing that cell.
How about if you tried setting this to 'auto'? That would at least reduce the amount of mouseclicks that the user has to do, before editing starts. Is that what you're really after with this?
(Note that I haven't tried this option myself, so I don't know how well it actually works with Comboboxes.)
Related
I am working with a big amount of data (1M - 5M), and rows in the grid should be groupable, sortable, and filterable. As ag-grid can populate table with data quickly enough, I use in-memory row model to satisfy requirements.
However, when I click column in order to sort all rows by this column, it takes some time to do this. Moreover, sequential clicking on columns while rows are still being sorted may crash grid as well as browser application.
Are there any ways to prevent user from clicking on columns (disable sorting, show loading overlay, or something like this)?
I am trying to use beforeSortChanged and afterSortChanged events to show overlay or modify DOM elements (to make grid a little bit grey and show loading circle), but it doesn't work properly: beforeSortChanged event handler seems to be stuck for a moment and then only executed.
Ag-grid is used inside Ember framework as a component.
How about using onCellClicked which is an attribute of the columnDefs. Should work in a similar manner to what you are looking for with beforeSortChanged.
I am trying to render data in table form to front-end in angular and there i've used ng-grid and ui-grid so far.
But they seems to be slowing down performance as there are lot more rows sometimes like 200+ per grid and more than 20 grids on single page.
So the browser most of the times hangs up i just needed to show data no operation is needed to be performed on data. it just needs to be rendered.
So anybody please help if you have any other idea to render this much data in grid form.
There are a few options for how to handle this in ui-grid.
There is an option in ui-grid for flatEntityAccess, that improves performance a bit with the bindings.
Many people put their grids in tabs, and use an ng-if around the tab so that it only renders the grid if that tab is active.
If you need all the grids in a list down the page, presumably not all the grids are visible to a user at the same time (you couldn't have 20 grids all visible, probably only one or two visible at a time. You can potentially detect the page scroll and use an ng-if on the grid so that only those that are actually visible are being rendered.
Ultimately the problem is that if you have 10 columns and perhaps 15 rows visible in each grid, that's immediately 150 watchers per grid, if you then have 20 grids you've got 2000+ watchers on your page, and all of them have to be evaluated whenever you scroll any of the grids. Note that the watchers per grid are correlated to the number of visible rows, number of visible columns, and then number of grids that are rendered. Ultimately you need to change one of those elements if you want it to go faster.
Lastly, you may want to check version - rc20 or even current unstable is faster than older release candidates.
Use one time binding in your grid row. {{::data.id}}. This will boost your page performance as watches are removed after first binding is done.
But remember if you change any model changes in you cannot see them in your view when you use one time binding.
One time binding was introduced in Angular 1.3. I you are using Angular 1.3 or above version.
If you are using version below 1.3 then probably you have to change you design. Rather then showing more than 20 grids, show only one at a time based on some select drop down.
You can try ng-table directive also. But if you are using 20 grids with more than 200 rows even that becomes slow.
Angular application become slow if they have watches more than 2000. In your case there are 20 * 200 = 4000 watch. Even more watch if u have more grids and row. So better change your design or use one time binding.
I'm using a dhtmlx-grid and have a problem in the following use case.
I enabled multiple selection and the grid uses smart rendering to load a large set of data.
After the initial load, I select the first row in the grid, and then drag down the scrollbar to the last row and shift-click the last row.
The expected behavior is that all the rows in the grid should be selected, but this isn't the case.
The not-rendered-rows in between are not selected.
Glad if somebody can suggest me some good solution.
Thanks
Unfortunately, only the rendered rows can be selected, so in case of enabled smart rendering mode you cannot implement the described steps. The only solution is to disable the smart rendering mode.
I'm currently working with a dojo datagrid that works perfectly well except for one small problem. Due to a large number of fields that must be accounted for, clicking on a column to sort the contents of the grid by the value within that column can be rather time consuming (several seconds). Is there any way to display to my users that the content of the grid is "loading"/"sorting"/etc during this downtime? I've looked around the web but only found loading masks and no sorting masks. As far as I can tell there are no built-in methods for detecting sorting or changes in sorting.
Thanks in advance.
This Post handles the onHeaderCellClick event which would catch the onClick in the header.
Declarative dojox.grid.datagrid's header has onclick event?
Theres a fiddle in the Post, which disrcibes it very well.
You can use it to make a loadingimage visible and hide it again, when sortig ends.
Regards, Miriam
I've found a few plugins that does this, but they either have more than what I want which gets in the way and none of them do exactly what I need. Some I simply can't get to work with firebug showing syntax errors in the style sheets even though it seems perfectly fine.
I want something very simple in terms of visuals. Basically I want this:
http://demos.devexpress.com/aspxgridviewdemos/groupingsorting/grouping.aspx
If you look at the link then you will see that you can re-order the columns by dragging the headers, but you can also drag the headers out to where it says "Drag a column header here to group by that column"
I just want a plain way to do this in javascript/jquery with some callback so I can store the column order in an array after you change the order. The data changes I can handle, it's the dragging of the columns and then changing the order or removing the column and adding it to the Group space above that I have issues with.
We actually do you devexpress controls, but for what we're doing it's to slow with all the callbacks their grid needs to do when you do anything on the thing. So we're in the process of creating our own ajax grid that does what we want and how we want it with only what we need.
I hope this makes sense and that someone can help.
I have recently looked at implementing something similar, so while I can't post a code example, I'd recommend looking at jQuery UI Draggable to let you drag the columns to where you want them.
Make the table column order configurable through javascript first. Then make the column headings draggable and based on the new position redraw the table based on the new column layout.
This approach should be faster as you can optimise for your use cases.