Virtual data and parent child rows

Virtual data and parent child rows

Posted by: razam on 14 September 2017, 11:57 am EST

• 

  razam

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 September 2017, 11:57 am EST

  Hi,

  I am trying to mimic the ODataVirtialCollectiomView and load data as I scroll. I have rows that have children and want to display them when I click on expand. The children are loaded along with the parent rows. I have the data loading virtually as I scroll, but dynamic loading stops working. I get only the initial data showing after which the scrolling callback isn’t called. Is there something I am missing or need to do to make this work?

  I am trying to evaluate different grids for usage with react js and this is a very important feature for us before we decide to purchase. Can someone help?

  Thanks in advance.

• 

  razam

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:57 am EST

  I forgot to mention that I get an exception in the console stating the ‘children’ of undefined cannot be retrieved. This exception is seen as soon as the page is loaded.

• 

  razam

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:57 am EST

  Uncaught TypeError: Cannot read property ‘children’ of undefined
  
  at u._addNode (wijmo.grid.min.js:13)
  
  at u._bindRows (wijmo.grid.min.js:13)
  
  at wijmo.grid.min.js:13
  
  at i.r.deferUpdate (wijmo.min.js:13)
  
  at wijmo.grid.min.js:13
  
  at u.t.deferUpdate (wijmo.min.js:13)
  
  at u._bindGrid (wijmo.grid.min.js:13)
  
  at u.set [as itemsSource] (wijmo.grid.min.js:13)

• 

  razam

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:57 am EST

  I believe I have found the issue, but will need help fixing it. When I scroll rows off screen/ out of the viewport, I am removing the items from the underlying items source. As a result, the above exception is raised as the binding it being updated for a removed row. Can I fix this somehow without storing objects in memory and without subclassing FlexGrid?

• 

  skochan

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:57 am EST

  Hi,

  Could you please try clearing out the itemsRemoved object of the CollectionView when items are being removed from the Underlying source and let me know if it helps. If you are still facing the issue then please send across a small sample and we will investigate this in further detail.

   this.data = new wjCore.CollectionView(somedata);
   this.data.itemsRemoved.clear()

  Thanks,
  
  Abhishek

• 

  razam

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:57 am EST

  Hi,

  I just tried this, but unfortunately, I am still getting the same error:

  Uncaught TypeError: Cannot read property ‘children’ of undefined
  
  at u._addNode (wijmo.grid.min.js:13)
  
  at u._bindRows (wijmo.grid.min.js:13)
  
  at wijmo.grid.min.js:13
  
  at i.r.deferUpdate (wijmo.min.js:13)
  
  at wijmo.grid.min.js:13
  
  at u.t.deferUpdate (wijmo.min.js:13)
  
  at u._bindGrid (wijmo.grid.min.js:13)
  
  at u.set [as itemsSource] (wijmo.grid.min.js:13)
  
  at Object.Blotter.onGridReady [as initialized] (Blotter.tsx:138)
  
  at i (wijmo.react.min.js:13)

  My code is attached. Please advise.

• 

  razam

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:57 am EST

  Trying to upload again.
  
  2017/03/Archive.zip

• 

  skochan

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:57 am EST

  Hi,

  We are looking into it. We will get back to you on this soon.

  Thanks,
  
  Abhishek

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:57 am EST

  Hi Razam,
  
  Please try to replace Detail Grid sourceCollection instead of clearing this. For reference, please see the attached sample that implements the same.

  If it does not work, could you please confirm that our understanding is correct or not so that we can assist you accordingly?
  
  As per our understanding, you are loading data virtually using ODataVirtualCollectionView that is fine and has no issue, now you would like to display different data in child FlexGrid for rows based on some condition.

  Could you please elaborate what did you mean for ‘Dynamic Loading’ and how you would like to load data for child rows?

  Thanks ,
  
  Manish Kumar Gupta
  
  2017/03/FlexGrid_detailRow_OData.zip

• 

  razam

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:57 am EST

  Hi Manish,

  I am loading data as I scroll through the grid. I do not want to keep all this data in memory, so I delete it from the source collection when it is no longer in view (I do not just null it out). When I load the data, the parent and child row data are loaded at the same time. So, we do not need to lazy load child rows - only parent rows. The parent row either has child rows or it does not. There is no other condition.

  Right now, I generate 50 rows (some with child rows, some without) - 30 are in view while I keep 10 above and 10 below as buffer. As soon as the data is loaded into the grid, I get the above exception. As a result, when I scroll to the bottom, the scroll event isn’t raised and I cannot load more rows. It seems like setting child items path excepts all parent rows to be loaded into memory. Is this true? If so, can we somehow break this requirement? Or, can I defer children binding or manually bind the child rows? This is the only hurdle we have right now. We want to virtualize scrolling, which FlexGrid already does; and we want to show child rows (if parents have any), which FlexGrid already does. However, doing both seems to break the grid.

  I will try the sample and post back.

  Thank you,
  
  Rehan

  P.S. I know due to timezone differences, there is a day delay in getting a response. Is it possible to get replies on the same day? We are constrained by time and need to select a grid quickly.

• 

  razam

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:57 am EST

  We are using React, not Angular. Is there a FlexGridDetail control available for React?

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:57 am EST

  Hello,
  
  FlexGridDetailProvider is a class and can use simply using FlexGrid reference object. You can refer to documentation for more info.

  If possible, could you please provide a sample depicting your issue so that our team can debug and can assist you accordingly.

  Thanks,
  
  Manish Kumar Gupta

• 

  razam

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:57 am EST

  Also, although FlexGridDetailProvider works, why doesn’t setting childItemsPath work? Does the grid require all data to be in memory for childItemsPath to be used for displaying hierarchical data?

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:57 am EST

  Hi,
  
  Regarding FlexGridDetailProvider’s createDetailCell function:
  
  Yes , you can use JSX in createDetailCell Function since this method returns an element to be used as a detail cell and doesn’t care how the element is created.
  
  Please try the following code snippet for createDetailCell:

  detailProvider.createDetailCell = function (row) {
    // render React component into the DOM node
     ReactDOM.render(React.createElement(myCustomDetailComponent), theDiv)
    // add code to show in detail cell
    // return the DOM node:
    return theDiv;
  }
   

  Regarding childItemsPath in FlexGrid,
  
  FlexGrid requires all data to be in memory when using childItemsPath property with itemsSource as the CollectionView object needs child nodes to render them.

  Thanks,
  
  Manish Kumar Gupta

• 

  razam

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:57 am EST

  Thank you very much for all your help.

  I didn’t want to have to do:

  ReactDOM.render(React.createElement(myCustomDetailComponent), theDiv)

  but something more like

  return <MyCustomDetailComponent />;

  I guess this is fine. One more question, do you, or will you, make your components available as an npm module? We really do not want to have to import the script via html. We are also writing our application in TypeScript and have allowJs set to false for particular reasons.

  Thanks again.

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:57 am EST

  Hi,
  
  Reagrding FlexGridDetailProvider createDeatilCell function, we have initiated a discussion with our development team. We will let you know as soon as we get any update on this.
  
  Regarding NPM Packages,
  
  our development team is actively working on this and expected to be completed in the mid or end of May,2017.

  We assure you that once NPM Package will be included in release build or prerelease build, you will be notified here.

  Thanks ,
  
  Manish Kumar Gupta

• 

  razam

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:57 am EST

  Thank you.

  I had a couple more questions.

  1. I want to be able to click on a column header and toggle sort by asc, desc, and then none, or remove the sort descriptor. I thought this would be the default behavior, but it doesn’t seem to happen.
  2. I also want to unselect a selected row if I click on it a second time. Selection changing and changed both do not get invoked since the cell/row is already selected. Any other way to do this?

  Thank you again.

• 

  razam

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:57 am EST

  Hi,

  Thank you for the reply. I have the detail grid coming up now. I was wondering though, can I use JSX in the createDetailCell function?

  I’d rather not have to do: var cell = document.createElement(‘div’);

  Thank you.

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:57 am EST

  Hi,
  
  Here are the answers for your questions:
  
  1)
  
  >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
  
  I want to be able to click on a column header and toggle sort by asc, desc, and then none, or remove the sort descriptor. I thought this would be the default behavior, but it doesn’t seem to happen.
  
  <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

  For this, you need to handle sortingColumn event of FlexGrid and check column sort type using currentSort property of Column. If currentSort is ‘-’, cancel sorting and clear sortDescription.

  >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
  
  I also want to unselect a selected row if I click on it a second time. Selection changing and changed both do not get invoked since the cell/row is already selected. Any other way to do this?
  
  <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

  For this, you need to handle selectionChanged and click event. In selectionChanged event, set flag to true. Now in click event check flag, if flag is false, set CollectionView’s currentItem property to null and if true, set flag to false.

  For reference, please see the attached sample crated using PureJS that implements the same.

  Thanks,
  
  Manish Kumar Gupta
  
  2017/04/FlexGrid_customSort_click.zip

• 

  razam

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:57 am EST

  Perfect! That worked!

  I have yet another question. We want to maintain selection of a row based on the row’s ID. Our data though is virtual - loads on demand, and is deleted when not in the viewport. Setting preserve selected state doesn’t really work, as the data could be changing - being filtered in and out, sorted up and down, etc. Other than manually coding for this and maintaining IDs that are selected, is there a way to maintain selection state? This is also a problem when selecting all. As I scroll down, ultimately, the new rows coming in are not selected. Is there a way to correct this issue?

  Thank you!

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:57 am EST

  Hi,
  
  Unfortunately, there is no such mechanism or property other then tracking state.
  
  Since FlexGrid’s all property is related to CollectionView, here you are changing CollectionView so you need to maintain record for selected rows based on their ID’s.
  
  We are sorry for the inconvenience caused.

  Regards,
  
  Manish Kumar Gupta

• 

  razam

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:57 am EST

  Hi,

  Thank you, I will work on it. I guess I can add a handler to collection changed and select/unselect rows based on a property.

  Does the grid support Property Changed notifications? Also, with the preserve selected state property, I am noticing when I have that set to false, selected rows suddenly become unselected. I am not sure if this is related to data changing in the row or something else? Is the preserve selected state property to preserve state of selection as data in the row changes?

  Thank you,
  
  Rehan

• 

  razam

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:57 am EST

  Hi,

  Is there a way to bind a property on my model to the row’s isSelected property? Right now, I am doing this in a brute force fashion.

  Thank you

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:57 am EST

  Hello Rehan,

  We apologize for the delayed response.
  
  Regarding, collectionChanged handler, it depends on how you are changing data in FlexGrid.
  
  FlexGrid does not support PropertyChanged notification.
  
  Also, preserveSelectedState property is working as expected. On changing data source, it selects first item in the list and removes the current selection.
  
  If there are any specific steps to reproduce this issue, please let us know so that we can assist you accordingly.

  Regarding Row’s isSelected property, it evaluates to true value only when it is set explicitly. This seems like a strange behavior , hence this issue has been escalated to the concerned team for further investigation with tracking id 253237. We will let you know as soon as we get any notification.
  
  In the meantime, please use selection property to get selected row and set selected row.

  Thanks,
  
  Manish Kumar Gupta
  
  2017/04/FlexGrid_preserveSelectedState.zip

• 

  razam

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:57 am EST

  Hi,

  I was wondering if there was an update to npm packaging of wijmo controls.

  Also, what is the best way to implement server-side grouping? I have my model layer set. I just want the grid to recognize it instead of me having to specify groups via detail cells. Is this the only way to do so?

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:57 am EST

  Hello,
  
  NPM packages for React has been shipped with latest build 5.20171.293 which can be downloaded from here. NPM packages for React can be found at following location in downloaded build folder:

  FolderLocation\C1Wijmo-Eval_5.20171.293\NpmImages\wijmo--min

  We are sorry, this is the only way for this.

  Thanks,
  
  Manish Kumar Gupta

• 

  razam

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:57 am EST

  Thank you. Is it possible to include dependencies as well? We really do not want to have to specify react in the html pages.

  Also, what is the best way to represent hierarchical rows in the grid? We are doing grouping in on the server side. I’d like to use the grid’s grouping functionality instead of having to specify groups via detail cells. Is this the only way to do so? Right now, I am doing this via a detail cell with another FlexGrid. However, I would like to have synchronization in the column resizing, moving, etc. I have to do this manually at the moment. As a result, I have to dispose the flex grid and remove all handlers in the dispose detail cell handler.

  BTW, we have bought a license for flex grid and have platinum support. Is there another location where I should go for help to perhaps get expedited help?

  One last thing, we are displaying tick data in the grid, so we have very frequent updates. If I notify updates via :
  
  collectionView.onCollectionChanged(
  
  new NotifyCollectionChangedEventArgs(NotifyCollectionChangedAction.Change, data, index));
  
  CPU and memory skyrockets.

  However, if I do updates via begin/end Update, CPU and memory are much better, but selection and expanded details are all reset. Is there a better way to handle such frequent updates?

• 

  razam

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:57 am EST

  I see that the CollectionView has a groups property. I can create a CollectionViewGroup manually, but I do not want the grid to do the grouping, I just need it to do the rendering. My parent rows themselves have data, and the items in the groups share the same columns and have data. I get the parent-child structure from the server and just need the grid to display it like it normally does other groups. Is this at all possible?

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:57 am EST

  Hello,
  
  You can include dependencies as well throw NPM packages since it contains external modules. For your reference, please see the following demo sample:
  
  http://demos.wijmo.com/5/React/ReactExternalModules/ReactExternalModules/
  
  This can be found in React folder inside sample folder at following location:
  
  FolderLocation\C1Wijmo-Eval_5.20171.293\Samples\JS\React\ReactExternalModules

  If you have all the data loaded on client, FlexGrid hierarchical view is the best way for showing hierarchical data. Please refer to the Trees and Hierarchical Data section at following demo :
  
  http://demos.wijmo.com/5/React/FlexGridIntro/FlexGridIntro/

  If you would like to use grouping functionality instead of detail cells, please refer to the Grouping section in the above sample.

  You can ask your queries at following two places other then Forum:
  
  SupportOne portal
  
  On mail at @wijmoexperts@componentone.com

  Use default CollectionView notification instead of notifying manually. Please set CollectionView trackChanges property to true for getting edited and added data item in CollectionView.
  
  Most likely this will increase performance.

  If you would like to retain selection and expanded detail on beginUpdate and endUpdate method, you need to store such information before calling beginUpdate and endUpdate method. After updating data, you need to reset selection and expanded detail.

  Actually FlexGrid does not perform grouping, it just render grouped data in CollectionView. Actual Grouping is performed on CollectionView.
  
  For your last question, could you please share data sample with same structure that you get from server, so that we can look into it and suggest you accordingly.

  Hope it helps !

  Thanks,
  
  Manish Kumar Gupta

• 

  mdunham

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:57 am EST

  Hi,

  Thank you. I have aliased react and react-dom, but am getting the following compilation error:

  error TS2605: JSX element type 'FlexGrid' is not a constructor function for JSX elements. Property 'setState' is missing in type 'FlexGrid'.

  These are my import statements:

  import {
    NotifyCollectionChangedEventArgs, NotifyCollectionChangedAction, Control
  } from 'wijmo/wijmo';
  import {
    CellRangeEventArgs, SelectionMode,  RowCol, CellRange, Column,
    Row, HeadersVisibility, CellType, FormatItemEventArgs, FlexGrid
  } from 'wijmo/wijmo.grid';
  import * as wj from 'wijmo/wijmo.react.grid';
  import {FlexGridDetailProvider, DetailVisibilityMode} from 'wijmo/wijmo.grid.detail';

  and this is my JSX:

  <wj.FlexGrid
    style={{height: (this.props.blotterHeight) ? (this.props.blotterHeight - 42) + 'px' : '200px' }}
    className='wj'
    autoGenerateColumns={false}
    columns={this.columns}
    initialized={this.onGridReady}
    itemsSource={this.gridViewModel}
    stickyHeaders={true}
    headersVisibility={HeadersVisibility.All}
    showSort={true}
    allowDelete={false}
    trackChanges={false}
    selectionMode={SelectionMode.ListBox}
    preserveSelectedState={false}
    preserveOutlineState={true}
    isReadOnly={true}
    showMarquee={false}
    />

  Is there anything I am doing wrong?

  Thank you,
  
  Rehan

• 

  mdunham

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:57 am EST

  Also, the grid is readonly, so we are not allowing edits. We are updating the underlying models. We load data only for what’s visible in the viewport and then delete it when it’s no longer visible with buffers on both sides.

  For selection and expansion, that is what I was doing, but it causes the detail row to flicker - it collapses and then expands.

  For grouping, we have a RowViewModel which has a bunch of string properties and a children property of type CollectionView.
  
  The parent is to be the group header and the children items the items under the group. So, we really just want to render this as a group row. We are displaying this as hierarchical data in the grid right now. However, being that it is actually grouped data, we would like to use the grid’s grouping behavior without having to set a group descriptor. Maintaining a separate grid as a detail cell makes it difficult to synchronize columns between the master and child grids.

  Thank you,
  
  Rehan

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:57 am EST

  Hello,
  
  It would be great if you could share a demo sample depicting your issue so that we can debug and assist you in the right direction.

  Thanks,
  
  Manish Kumar Gupta

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 20 January 2018, 9:26 am EST

  Hi,
  
  We are sorry for the late reply.

  The selectedRows and selectedItems properties were designed to work with selectionMode == ListBox.

  The documentations states it this way:

  /**

  • Gets or sets an array containing the rows that are currently selected.

  • Note: this property can be read in all selection modes, but it can be

  • set only when selectionMode is set to SelectionMode.ListBox

  */

  In ListBox mode, the grid uses and manages the Row.isSelected property automatically. In other modes it does not.

  You can still use the property, but in modes other than ListBox, it is up to you to set and reset it using whatever logic you want.

  ~Manish