Flex Grid with Angular JS - Binding to an array of items

Flex Grid with Angular JS - Binding to an array of items

Posted by: awhitcomb on 15 November 2017, 10:53 am EST

• 

  awhitcomb

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 15 November 2017, 10:53 am EST

  Over the last few weeks, I have been implementing the Flex Grid in a new web application that we are creating. There are a few things that I am struggling with that I believe have to be caused by something I am not doing correctly when binding the flex grid to an array of items.

  For broader scope - since I haven’t tried making a standalone example yet - our page currently has two grid controls. The screenshots shown above will show the layout of the page. The first grid on the left is a read-only grid that shows a list of users. This grid is only used as a selection mechanism, and pushes the selection using a broadcast through the root scope. The second grid, on the right of the page, is an editing grid that shows time card punches for the selected user. After the page has loaded, everything loads and appears to work nicely.

  The issue I have been fighting starts to happen when I change the selected user in the left hand grid. I am currently creating a new CollectionView using the controller variable that holds my array of records whenever the selected row in the selection grid changes. Even when I do that, I have a very difficult time getting the grid to refresh correctly. My screenshot shows that I have a tab control that displays either the grid, or a more graphical / visual way of editing. Because I can see that the UI on the other tab updates whenever my controller punch array variable updates, I know that I am getting the correct data back from my OData calls and that my scope variable has updated correctly. The following screenshot shows what happens when I try changing to a different user.
  
  
  
  I did add a full grid refresh to the tab selection, so sometimes when I change to my other editing interface and then back to the grid tab, the grid will now appear with the correct data.
  
  
  
  So, I’m hoping that someone can help point me to a good example that works with an array of items that changes dynamically - aside from some of the OData / web service samples, all I see are static arrays that are never being changed and updated with new data.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 15 November 2017, 8:42 pm EST

  Hi,
  
  Did you try invalidate() method instead of refresh on tab change event. The FlexGrid’s invalidate method should be called once the tab gets changed. This should be done the job.

  If the issue persists, please let us know.

  ~Manish

• 

  awhitcomb

  • Post Options:
  • Link
    Copy

  Posted 16 November 2017, 3:30 am EST

  I will try that today and let you know. I had some confusion as to when you should use refresh rather than invalidate, so hopefully that’s all that is wrong.

• 

  awhitcomb

  • Post Options:
  • Link
    Copy

  Posted 16 November 2017, 11:04 am EST

  I did not have much luck using invalidate. Am actually running into the same kind of issue with the pie chart control. I will work on making some kind of sample that will demonstrate the problem I am having.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 19 November 2017, 11:13 pm EST

  Hi,
  
  Thanks, it would be helpful in investigation.

  ~Manish

• 

  awhitcomb

  • Post Options:
  • Link
    Copy

  Posted 20 November 2017, 5:05 am EST

  Have uploaded a revised sample. I think I figured out a few more things. I guess I needed to put a $timeout around the invalidate calls in order to get those to work correctly. I also seem to have the grid and chart updating (slowly, but they are updating) when I change to a different salesperson. There was also a script I forgot to include.

  GridTest.zip

  I will go back now and apply what I figured out from this sample to the real application and see if I get further. It’s worth noting that in the real application, I did this with two separate controllers instead of one controller like I did in this sample.

  If someone doesn’t mind a quick check of the new sample to see if it looks like I am on the right track, I’d still appreciate it. There are a lot of things I’m trying to figure out with the new application, so it would be good to know I didn’t overlook anything.

• 

  awhitcomb

  • Post Options:
  • Link
    Copy

  Posted 20 November 2017, 5:06 am EST

  I think I have a good example that shows what I’m running into. I’m sure it comes down to how I’m putting the data into the grid control, but am stuck on this at the moment.

  I have attached a zip file with a sample that loads data from the two json files. The json data in the files is based on queries from the AdventureWorks database.

  The sample seems to replicate the main issues I am having:

  1. The grid doesn’t show the data for the current employee when I change to the grid tab.
  2. If I am on the grid tab already and I select a different employee, the grid does not show me the data for the new employee I selected.

  I am aware that I don’t have the pie chart working exactly right. I have discovered that I need to create a separate query for the chart which handles the aggregate and grouping for me, then I will clean up that part of the sample.

  I also need to figure out a way to get the data to show up in the child grid since the first row is selected automatically.

  I do also realize that the way I did this sample with the json files isn’t the most efficient approach, but I felt it was a better simulation of what I’m actually doing with the web api / odata queries in the real application.

  Note: edited to remove old sample since I uploaded a new one below.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 20 November 2017, 11:18 pm EST

  Hi,
  
  Thanks for the sample.
  
  We are able to show records without using $timeout in the sample.

  ~Manish

• 

  awhitcomb

  • Post Options:
  • Link
    Copy

  Posted 21 November 2017, 3:52 am EST

  I think a lot of the issues I ran into in the real application had to do with the way I was showing and hiding the different pieces of the UI while data was being read from the web service. Things appear to be a lot smoother now that I’m always showing the grid. I’m not sure about the $timeout - will see if I have any luck without it. Thanks for the feedback.