I have an ExtJS 6.5.1 app. I have a grid that uses the "rowwidget" plugin with a grid as the widget. If I scroll the parent grid all the way to the bottom then back to the top, it creates a duplicate widget for that row causing unexpected behavior.
Here is the fiddle.
Steps to reproduce:
1) Expand any row
2) scroll parent grid all the way to the bottom
3) scroll back to top
and you will notice the length of the widget component increasing meaning multiple instances are being created. After a while everything breaks and I get all sorts of errors.
I think I find the culprit, the grid is "bufferedRenderer: true" by default, set it to false
bufferedRenderer:false
otherwise it keeps erasing the widget when the row is out of view and when you scroll back it creates another one
Related
Let's say we use MUI Masonry and in each of the items there is a Collapse element that is expanded if it gets clicked. If you click an item that needs to be moved to another column, it moves the items outside the parent's specified width!
This CodeSandbox demonstrates the issue. The original view is like:
Now, after clicking the first item, which does not require moving, I see:
Which is what I expected, but if I click one of the items at the bottom that requires moving it, it creates a new column outside the parent's width.
At the moment dynamic height like that is not supported. See this issue.
I have a problem with Office UI Fabric's Panel (well, also Modal). I'm rendering them with multiple input fields to provide data for my app. Due to the number of fields the controls are rendered with a scroll bar. After scrolling down and clicking outside of the input, the focus is being set on the first textfield/dropdown in the container panel what causes the whole thing to be scrolled to the top. Is there a way to prevent setting the focus/scrolling to the first element when clicking outside of the input?
This was indeed a bug and has been resolved already. Tested it in the version 5.56.0.
Can we have a ExtJs5 Tree Grid Panel which provides below features:
Inifinite Scroll so that rows are rendered with some limit on scroll and not all records at sametime.
On Click of any root node of a particular row (could be 2/3 levels), i can fire a ajax call to populate a grid/form inside the expanded row.
Please provide your expert suggestions in this regard asap.
Thanks !
1. yes you can use infinite scrolling for TreeGrid. Checkout the example
2. If you want expand a row and inside that row you want a form or a grid, then I would say that is nearly impossible. You can only handle this with a custom renderer for the gridpanel and even with this you must create it via Ext.create and render it into the treepanel.
Why dont use something like this: https://fiddle.sencha.com/#fiddle/l26
I have just started with angularjs. Just wanted to know that if it is possible to create a sub grid inside another ng-grid. There would be some links in a column of the grid and when I click a particular link a grid corresponding to that link should be formed inside the already existing grid.The original grid would be having say 5 columns while the new grid will have say 4 columns. So something on the lines of colspan or something similar is what I look for.
If you are open for writing Angular Directive then you can use any grid ,other than ng-grid which has subgrid feature.
I know like Kendo Grid has subgrid feature and jqgrid has subgrid feature. I wrote a Grid using Google Closure library , this also has subgrid feature.
If I understand your question, you need something like master/details inside grid, it not part of base functionality. nggrid has fixed row height, for virtual scrolling purpose. On our project we have created custom grid plugin base on nggrid
Solution that we used is:
write custom sort function, which populate duplicated rows always below main
when we click expand button we duplicate current row n-times depend on subgrid height
in main row we create css overlay container which hides duplicated rows
load overlay container content via ajax
When we click hide button, we hide overlay, and remove duplicated rows.
Basicly, I have a window contains two tabs, the second tab is a GridPanel and is initially inactive.
I want to programly select two rows of this GridPanel(via CheckboxSelectionModel) by clicking a "show window" button , but found it not working. There will be a javascript error thrown and no rows selected. After I manually clicked the second tab to make the grid visible, everything works well.
what's the most possible mistake I made?
I'll paste the code soon if it's not a common mistake for extjs beginner.
This is because your tabpanel will not render any components that are not visible (i.e., any components in your second tab in this case).
If you add the following config option to your Ext.TabPanel it should fix your problem:
deferredRender: false