Undefined and null reference errors with flex grid

Undefined and null reference errors with flex grid

Posted by: david-d-lee on 14 September 2017, 11:56 am EST

• 

  david-d-lee

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:56 am EST

  Hi,

  I have the following code that I am using to bind to a data source.

          <wj-flex-grid class="bento-flex-grid"
                        items-source="vm.assessmentEvents">

  I am using the following type-script code to set the data source.

              this.assessmentEventService.getAssessmentEvents(this.asmtEventId).then((data) => {
                  this.assessmentEvents = data;
              });

  However, I am getting the Undefined and null reference errors as seen in the screenshots. It seems to be a timing issue because I do not get the errors at all from time to time.

  I am using the following Wijmo Library 5.20163.259.
  
  

  

  

• 

  david-d-lee

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:56 am EST

  I have more information. I also have details defined in HTML.

  <wj-flex-grid-detail max-height="250" detail-visibility-mode="detailMode">
                  <wj-flex-grid items-source="$item.baseValueSegments"
                                class="bento-flex-grid">

  Removing this caused the grid specific wijmo errors to go away. I am still getting the first “Undefined and null reference errors”.

• 

  troytaylor

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:56 am EST

  Hi David,

  It appears that your DetailProvider object is uninitialized or null because the FlexGrid doesn’t exist at the moment you are trying to create a detail row. I would suggest checking that FlexGrid has been initialized and the itemsSource has been set before creating the DetailRow.

  Also, there are 2 ways to create a DetailRow. You can either use the directive in markup or in code. The RowDetails sample demonstrates both approaches. You only need to do one or the other, not both.

  As for the “undefined/null” reference errors, I would make sure you are loading the wijmo modules into your project in the following order.

  wijmo.min.js
  
  wijmo.grid.min.js
  
  wijmo.grid.detail.min.js

  It is hard to tell exactly what is going on here, but if you have a sample that reproduces the error it will be very helpful if you can share it us.

  Regards,
  
  Troy

• 

  david-d-lee

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:56 am EST

  Hi Troy,

  Thanks for the response. I don’t think I am explicitly writing some code to create the detail row. I am setting the items-source on the parent level, which in turn should propagate to the child - which it itself is a grid as well. Please refer to the example I have here. I am just following the directive in markup approach only.

  So vm.foos is the parent, and for each foo, I have a property called bars which will be shown as a grid in the row detail.

  <wj-flex-grid class="bento-flex-grid" headers-visibility="Column" items-source="vm.foos">
  ...
              <wj-flex-grid-detail control="dp" detail-visibility-mode="Code" is-animated="true">
                  <wj-flex-grid items-source="$item.bars"
                                headers-visibility="Column"
                                class="bento-flex-grid">

  Attached is a screenshot showing the order you mentioned. I did notice wijmo.angular at the end. Let me know if this looks right to you.

  

• 

  troytaylor

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:56 am EST

  Hi David,

  Thank you for the screenshot and the additional information.

  The order of wijmo modules is accurate, so we can cross that off the list.

  I believe your error is due to the binding in the FlexGrid inside the DetailRow. The $item variable is a reference to the row in the parent FlexGrid. I am assuming bars is a field in your data model, so when you bind the itemsSource to $item.bars, you are actually binding to a single property value instead of an Array or CollectionView. Instead, you should use the $item variable to get the data you want the inner FlexGrid to bind to. The easiest way to do this is to create a function in your application controller that can return some objects based on the row that is being expanded using the $item variable. So if you create a function called getData, your markup would look something like this:

  <wj-flex-grid items-source="getData($item.bars)"
                                headers-visibility="Column"
                                class="bento-flex-grid">

  I hope this helps.

  Regards,
  
  Troy

• 

  david-d-lee

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:56 am EST

  Hi Troy,

  Thanks for the response. It seems I may not have given you all of the details of what I have found. The JS errors that are seen - null/undefined including the create row detail errors only happen when I have IE’s debugger window up. However, if I don’t have the debugger window up, I am able to see the binding happen correctly. As we can see in the screenshot (which I have edited to protect some information), the child grid is binded correctly in that scenario.

  Note that when I do have the IE’s debugger window up, I am forced to hit an exception breakpoint and I have to click on the play button to continue. Thus, I think it could be a timing issue?

  I am testing/developing in IE 11.

  Thanks,

  David Lee
  
  

• 

  chengjing-fp

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:56 am EST

  Hi David!

  I just left you a voicemail, but I also wanted to take a quick second to reply to your post on the forum as well.

  It’s very interesting to me that this error only occurs when you’re using the IE debugger/console. We’ve never worked with any issues like that before, and I can’t find any reported Wijmo issues with the same behavior.

  Would you be able to provide a sample that replicates this issue? I am unable to recreate it locally on my machine.

  If you could create a sample, I think we should be able to get this figured out pretty quickly. Let me know!

  Thank you,
  
  Christian

• 

  chengjing-fp

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:56 am EST

  P.S. I forgot to mention that if you’re uncomfortable sharing code or additional information on the forums, you can email me at christian.gaetano@grapecity.com.

  Thanks again!

• 

  benwilly

  • Post Options:
  • Link
    Copy

  Posted 9 July 2019, 1:07 am EST

  Null Vs. Undefined

  The concrete difference between them is that null is explicit, while undefined is implicit.

  In JavaScript, both null and undefined have a falsy value so when you do a equality check with == they are considered the same. If you use a strict equality check with === they are considered different.

  Unassigned variables are initialized by JavaScript with a default value of undefined. JavaScript never sets a value to null. That must be done programmatically.

  You can change the value of undefined by undefined=true; but you cannot change the value or null. This means that, null is object type where as undefined is undefined type.

  While performing primitive operations, null is converted to zero (0) whereas undefined is converted to NaN.

  More…

  http://net-informations.com/js/iq/nuvsun.htm