ag-grid master detail checkbox not persisting - ag-grid

In ag-grid master detail functionality, i added checkboxes to detail grid when i check row in the first detail grid and then scroll to bottom grid and expand/collapse that grid, the checkbox in first grid is gone (not persisted).
https://plnkr.co/edit/UeWohlz76GM7B4L80n91?p=preview
<AgGridReact
columnDefs={this.state.columnDefs}
masterDetail={true}
detailCellRendererParams={this.state.detailCellRendererParams}
detailRowHeight={this.state.detailRowHeight}
defaultColDef={this.state.defaultColDef}
onGridReady={this.onGridReady}
getRowHeight={this.state.getRowHeight}
groupDefaultExpanded={1}
rowData={this.state.rowData}
/>
Checkbox values should be persisted in the first(top grid).

My Stack rep is not established enough to add a comment, but NOTE, this is not a solution - more comment.
Ag-Grid removes detail grid from the DOM when master grid collapses it. With this, there is no Ag-Grid state to remember what was checked for the collapsed detail grid. In a similar master-detail grid table for a project, this was solved by
maintaining local state of the detail grid selected rows (check one on/off, it gets added/removed from a local state array)
using the detail onGridReady method, invoke a function to programmatically go through each detail row node. I believe you can use GridApi's forEachNode method to do this
As you iterate through each detail node, utilize the detail node's unique ID to see if the same unique ID is stored in selected detail rows local state setup in Step 1. If so, use the node's setSelected method to turn it on

Related

Ag-grid master/detail get all rows data on a cell value change

Is it possible to read all the grid data including the master and details rows when either a master or detail grid cell value is changed? I have added an event listener onCellValueChanged on both master & details grid options but only either master or detail row data is returned in the event.

Cell event in Nattable

I am new to Nebula Nat table, I have successfully created nattable in my application.
i have several columns one among them, one among them has a combo in it. i want to trigger a listener when ever there is change in the value of the cell . for example if i my combo box has value A and B. if change the value to A to B. i want to trigger a event and based on that event i want to change the value in the another cell.
I tired some of the listener nothing is comfortable, is there any listener in Nattable specific to cell. Because what ever the listener we have all specific nat table as a whole.
I analyzed more i found out that i can do capture selection in the cell using CellSelectionEvent. But what i need is to trigger whenever there is a change in the cell. but CellSelectionEvent triggers at the time of selection. Is there event i can use whenever there is a change in the cell.
With NatTable 1.6 the DataUpdateEvent was introduced for this.

How to create Spreadsheet in Flutter

How to create spreadhseet like Widget in Flutter (only for displaying data).
Currenly I have used Datatable but it does not support 1. fixed header 2. scrollable body.
I want following features:
The headers shoule be fixed.
the body should be scrollable (in both axes)
Currently my Datatable is inside a column > Expanded > SingleChildScrollView(horizontal) > SingleChildScrollView (vertical) > DataTable. Although I am able to scroll the complete Table in both the directions but 1. not simultaneously (i.e. it scrolls either horizontally or vertically), 2. Headers should not scroll, when scrolled vertically.
How can I achieve this ?
It seems that you need scroll controller that allows two or more scroll views to be in sync. In his case, you can use linked_scroll_controller plugin.
You can follow the example in this blog post for a step by step tutorial on how to achieve this.
Sample taken from the blog, check the complete source code here:
Here is an another package for this purpose: syncfusion_flutter_datagrid.
It has several features:
Editing - Allows users to edit cell values.
Sorting - Sort one or more columns in the ascending or descending order.
Stacked headers - Show unbound header rows.
Paging - Load data in segments.
Freeze Panes - Freeze the rows and columns when scrolling the grid.
And more, details in document
However, scrolling simultaneously is something different feature in this case.
You can try InteractiveViewer, but this not recommended in this case. Because both widgets, InteractiveViewer and DataTable, are very powerful widget that may build some conflict.

How to display two grids with different data on the same form

I have a form with two grids. I have one table with rows where each row has a status of Yes or No. I'd like to display all the yes's in the top and the no's in the bottom grid.
A similar scenario would be if I wanted to show SalesTable header records. The top grid would be only those with a status of Delivered, and the bottom grid those with a status of Invoiced.
How can I accomplish this?
I've gotten close by adding another datasource of the same table type. I add a QueryBuildRange to filter the records but I get two issues:
When I click on a row in the top/bottom, it moves both row lines at the same time (the highlighting thing
It wants to show an equal number of top rows as bottom rows for some reason?? If I have 3 delivered sales orders, and 5 invoiced sales orders, it will show 3 in the top and 3 in the bottom.
Seams like the Grid-controls are being controlled by the same DataSource.
Check the properties of the Grid-control: make sure they are not set to the same DataSource!
Anyway, it would be helpful to know how the Form is structured and how the QueryBuildRange was added.
I created a very simple Form and it worked correctly:
added two Datasets with T-SalesTable each
added two Grid-controls to the Design (or to a TabPage, both worked)
adjusted the DataSource-property of each Grid to point to each DataSource
added fields (the AutoReport group) from the corresponding DataSource to each Grid
this one worked correctly (despite having the same contents. Then I
added a range in the init method of each of the Datasets
and it still worked.

table with multiselection and clickable row

I already have a table - CellTable, with single selection model and i used onSelectionChange to find when row was clicked
Next I added to that column which containes check box
and here comes my problem
if i use single selection model, when i tick one row, other row become unticked
i tried to switch to multiselection model, but in this case, i can't click on row, and onSelectionChanges is executed only when i click on my check box, but i can tick more than one box
is any chance how i can have both - multiselection and clickable row?
regards
Yes it is possible.
But I am suprised that it doesn't work because the default behavior of the MultiSelectionModel should be that the row is selected as soon as you click it. However maybe in the presence of a CheckBoxCell column it is different.
Anyways you have to check following JavaDocs:
Constructor of the CheckboxCell
DefaultSelectionEventManager