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
Related
I want to reorder panels in an ExtJS 6.6 modern panel.
In an image archive, I want to have query form where I dynamically add query conditions. Each condition is a separate panel with the specific fields for that condition. They are added (like rows) in a vbox layout. The conditions may be ANDed and ORed, which means the condition order is important. In the form, I'd like to move the conditions up/down.
My approach to solve this is to remove the panel and then insert it at the new position.
I have a sample fiddle at https://fiddle.sencha.com/#view/editor&fiddle/2opr
The panel to be moved is removed but never inserted again.
When I've googled for this, many results comes up but they show solutions for older classic guis (calling the view's doLayout method), I'm using 6.6.0 modern where there is no doLayout method.
No need to remove the panel from the container, apparently removing destroys the panel.
Just change from this:
var item = this.removeAt(index);
to this:
var item = Ext.ComponentQuery.query('#' + itemId)[0];
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
I am working on react ag grid and I am using infinite scrolling feature of ag grid.
I want feature where I can delete row and grid will immediately refresh its data.
But "remove row" feature is not available for infinite scrolling.
https://www.ag-grid.com/javascript-grid-infinite-scrolling/#api-inserting-removing-rows
Can anyone please suggest me anyway achieving this?
Thanks
There's a hint right there if you scroll down a bit:
Adding / removing rows directly in the grid for infinite scrolling is
not recommended as it will complicate your application. It will make
your life easier if you update the data on the server and refresh the
block cache.
And then scroll down to the "Insert And Remove Example", there's example code showing how to remove rows (with a mocked up data source):
function removeItem(start, limit) {
// here you would make a call to your data source to remove the rows
allOfTheData.splice(start, limit);
// get fresh data from the source
gridOptions.api.refreshInfiniteCache();
}
You can make a use of the following grid api
this.gridApi.setRowData(this.rowData);
If you are fetching the data from server side, then get the data first and then call the setRowData() method.
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.
I created a model with ~30 columns, so every time I need to edit or delete something in CRUD, I have to scroll to the rightmost to find the edit or delete button. Is it possible to move them to the first 2 columns in the grid?
Also, it seems the CRUD class is derived from "View" rather than "Grid", so the addPaginator() function does not work here. Is there any way I can separate the data into different pages in CRUD? Thanks
CRUD is a container for both Grid and Form. Depending on how the page is called, it will initialize a proper sub-element. To do something with grid, such as adding pagination, you need this:
if($crud->grid)$crud->grid->addPaginatior();
Also if you are looking to re-order columns, then this is what you need to do:
if($crud->grid)$crud->grid->addOrder()
->move('edit','first')
->move('delete','after','edit')
->now();
Edit button moves just as Romaninsh said, but I'n not able to move the delete button...