I am using AG-Grid without a framework to create an Excel-like editable table. I have implemented the ability to select one or more rows and have them duplicated immediately under the original row.
You may find a plunker here.
The issue arises with attempting to call the Loading Overlay on scripts.js:421 and hide in on scripts.js:438.
gridOptions.api.showLoadingOverlay();
...
gridOptions.api.hideOverlay();
If you attempt to duplicate the rows, the provided overlay does not show. If you view the console, you can see that the div.ag-bl-overlay is manipulated but the loading overlay never shows.
I have also attempted to manually force an overlay onto the grid using any outside function. This too does not display.
How do I get the loadingOverlay to display while I am inside the 'duplicateRows()' function?
Related
I want to implement ng-bootstrap tool-tip(or any other tool-tip if that works) which will be shown when user hover over the data present inside slickgrid cells.
I am also attaching a snapshot of expected functionality below. I need to show similar kind of black tool-tip with some information when user hovers over the slick-grid data.
This is not possible through formatters and when I am rendering an angular component inside grid cells so that I could easily use ngb-tooltip there, then the tooltip is getting cropped to the size of grid-cell's dimensions. Part outside the area of grid-cell isn't visible. Even high z-index not working for it to be visible.
Help me out in this by suggesting some methods to implement this.
Here's a doozy. I have a TableView with programmatically added custom TableViewRows. They are custom in that they have a left-aligned label and a right-aligned switch (think of it as a browse filter). I inserted the same type of row at the top to programmatically toggle all switches on/off.
All of this works as intended EXCEPT when I have more rows than can fit on the screen and attempt to toggle all. In this case, the custom row switches off-screen haven't rendered when the view loaded and therefore don't fire their changed event when handled programmatically.
If I manually scroll to the bottom to force render all rows then attempt to toggle all, it works just fine.
Is there a way to force all TableView rows (even those off screen) to render when the view loads? Or is there a workaround that I can live with?
Here is my current workaround. In the window OnOpen event, I call my function to initialize table data. This is important because this makes sure the first load works.
Then I force scrollToIndex to the last row then immediately scrollToIndex back to the first row. Since I do this right after adding rows, I need to do use setTimeout to make sure it covers load time.
setTimeout(function() {
$.tblOptions.scrollToIndex(lastIndex, { animated: false, position: Titanium.UI.iPhone.TableViewScrollPosition.BOTTOM });
}, 0);
Since this creates a jumpy user experience, I hide the table during load, show an activity indicator, then re-show table after load.
This will work for now but I'm still wondering if there is a simpler solution.
I'm converting a large Dojo 1.1 application to Dojo 1.9.1 & in the process replacing dojox.Grid with dgrid.Grid. My initial issue was that the column headings were consistently being overwritten by the first row. Researching here I discovered that since the grids are being embedded either directly or indirectly within dijit layout widgets that I should use the dgrid.extensions.DijitRegistry mixin. However this in turn results in the grids not being displayed at all. They are being added but are being hidden by their style being explicitly set to zero width & height, which in the past I've identified as a symptom of a resize problem. These grids are on different tabs of a TabContainer each of which displays a custom widget. Each of these custom widgets implements a simple resize method which resizes the "containing" ContentPane upon which one or more grids are added.
My understanding is that the DijitRegistry mixin should cause the grid to be registered in the dijit registry & that this should mean that when resized the grid should be resized as a "dijit" child of the content pane.
Obviously something is wrong but I'm unsure where to look. Suggestions & solutions appreciated.
It's typically just a matter of calling resize(). One technique I use when creating custom widgets that contain a dgrid is to extend from a layout widget, such as BorderContainer, instead of dijit/_WidgetBase. This gives me a hook into the resize function. I simply override it, call this.inherited(arguments), then explicitly resize my grid. Other than that, you can use .on to connect to show events on whatever the grid's container is and have it resize whenever the container is shown.
I have a small AngularJS app using ngTable. The app has several tables, but most of them don't need pagination. I'm working on one table that will require pagination.
When the table renders, I know there are quite a few entries in the table (more than 100). When it first renders, it shows the first 10. It draws the page size selector ("10 25 50 100") on the bottom right, but it doesn't draw the page selector on the bottom left.
I can click the buttons in the page size selector, and it will redraw showing that many entries, but it still doesn't show the page selector.
I tried examining the default pagination template, and I even defined a custom one on my page, but just pasted in the default one, so I could play with it. I added some junk content to the page size selector div, and that never showed up when it rendered, even though I can see that change in the script block in firebug.
Anyone have any ideas what's going on here?
I've managed to construct a plunkr that demonstrates this.
You need add params.total($scope.completedQueries.length); before $defer.resolve because when you init ngTableParams array $scope.completedQueries is empty, it filled when called getData
I have a kendo grid which gets data and also font settings from the server.
The user has the option of either using scrolling or paging, but not both.
The problem is that when I set the font for the appropriate cells, that makes these rows bigger, so the rows no longer all fit inside the grid content area.
What I'm doing at the moment is all in the dataBound event:
Set the styling.
Given this styling, calculate how many rows can fit
in the content.
If the calculated row count doesn't match the
dataSource.pageSize, set the dataSource.pageSize as this value.
The problem is that the pageSize method resets the grid (thereby calling dataBound (only sometimes?!)), removing the styling and also the dataBound becomes unbound somehow.
I have a jsfiddle which fails in a different manner but I think for the same reasons as my program, but if someone could tell me how to get it working I could apply the logic to my program.
http://jsfiddle.net/y6vMx/5/
Why did you load the style when dataBound fires? Does the user have the option to change the style?
If I'll have to do something similar, I'll put styles to another event, like on page load or something similar.(the best way is to call it after you populate the grid)
I am also using kendo grid right now and I experience a lot of troubles..