I have a angular page which shows 1000 of nested record (parent- child up to n-level) and further user can add/edit/delete the record from UI at any location. Each row contains a button to add row above/below, based on that new row is created. This UI has also drag and drop functionality over each row so if any row is draged over another then parent child rows created. For this we have a json collection in nested way and in UI we have created a directive which is called recursively to show the nested record using ng-repeat.
We are facing performance issue here, if user try to add a new row at any specific point we are adding a new blank row in json data on specified index and based on this blank row a blank form is shown which renders very slowly.
Functionality is working but whenever a new add/update/deleted happens over row then it stuck and takes time to re-render the UI.
I cannot implement pagination here to restrict rows as user can create parent child relation by dragging over any row so all record should be shown.
Any one can suggest if other way around for this performance issue?
Related
I'm using Syncfusion in our React application. For a particular page, we are using a TreeGrid component. When we expand a data row, is it possible to keep that expanded parent row frozen in place while we scroll thru the data in the child rows?
I've attached a screen shot. In this example, I expanded the "Interested" row to show the subrows beneath it. I'm trying to freeze the top "Interested" row while I scroll. We'd also want to be able to expand multiple parent rows (Interviewed, App Started, etc.), be able to scroll thru them with the parent row frozen, and when through all of each parent's children, go to the next parent row and freeze that one while we scroll the next set of children.
Does that make sense? Please let me know if this is possible, and if you have any questions. Thanks!
sync table
Query: When we expand a data row, is it possible to keep that expanded parent row frozen in place while we scroll thru the data in the child rows?.
Currently, we don’t have support for freezing the parent rows while scrolling the child rows of the treegrid. And currently we don't have any plan to implement this feature.
We are using Angular6. Is it possible to create child rows under a parent row in ng-grid? For example: I have a number rows in ng-grid where each row with attributes of a school, and when I select a single row in it, it will display a child grid (pop up) with each row giving details of children under that school.
I havent seen such angular example in web.
here is the sample code of row selection.
Please suggest the change to enhance to load child table popup on row selection
I am using ag-grid enterprise in my project where i am inserting data into the grid. Once the editing of data is completed i am pressing submit button to save the entries in the backend. Before saving there are some validations which i am performing by passing gridApi to the method and there gridApi.foreEachNode i am validating the data. I have a new scenario where if all the cells of the row is empty. The row should be deleted so that user should not have to delete every empty row before submitting. how can i delete the row node inside foreEachNode?
I recommend that build up an array of row ids for the empty rows as you iterate through forEachNode, and then once you are done iterating, use the ids from the array to delete the rows.
However, I'd like to recommend an entirely different approach...
That is, don't treat the grid as the "source of truth" for your data.
Rather, keep a data model in your application, and use the grid just as a visual component (though a complex one), that represents the data in your model.
React is particularly suited for this, as you can use, e.g. Redux to represent your model and provide operations on it.
In this scenario, you would do these operations on your model, and then update the grid with the new value of your model. And your model would then be in a good state to send to your back-end.
I have a jsff page inside a bounded task flow. It displays a table. Each row of table has an edit icon. on click of which a new jsff page opens containing the information of the selected row ready to be edited.
Here user can update and save the information and check the information back on the first page by clicking a Done button on second page.Pretty much simple.
The problem is I have some complex implementation due to which I should not update the row information through ADF way. I take the information entered by the user and pass it to plane java file. There in the plane java file I instantiate an AM and update the information through this AM.
The problem with this approach is that when I click the Done button to come back on table page to check the saved data, the data on the table is stale.
This seems as If the table is being updated outside the ADF framework and so it is not aware of the underlying the data change hence the ADF UI table is not synced with physical table automatically.
JDev : 11.1.1.7.11
Options tried : Upon click of Done button I tried to requery the VO of ADF table by
1) Clearing the VO cache row and repopulating it
2) Re executing the iterator binding
3) Re executing the iterator binding programatically.
Thanks
Folks,
I am trying to display EXT JS with Row Expander plugin in a Visual Force page.
Check this link http://mikhailstadnik.com/ext/examples/nested-grid.htm
As per the link, I am successful in displaying Accounts in first grid and respective Contacts in child grid.
Problem is: When I click on first row, it is expanded and shows the respective contacts.
When I click on second row and first row is not closed, the data which I can see for second row (Contacts) are visible at first row contacts also.
So, I think when second row is clicked, I need to close the first row.
Please suggest me how to do this..
The plugin you are talking about features collapseRow(row) method.
Each time you are trying to expand a row (use beforeexpand event for that) you need to loop through all the rows and collapse expanded ones.
Here is how you check if the row is expanded:
Ext.fly(row).hasClass(this.rowCollapsedClass) // this is referring to plugin instance