UI-grid saveState service circular logic












2















Here is a summary of the problem: I set up a column sortChange() listener, which responds to sort changes by firing off a query to fetch newly sorted data. I save the grid state before the fetch, and restore the grid state after the fetch. The problem is that the restore gridState mechanism triggers the original sort listener, causing the whole process to start over again, and again, and again.



scope.sitesGrid.onRegisterApi = function(gridApi) {
scope.gridApi = gridApi;

scope.gridApi.core.on.sortChanged(scope, function () {
// load new sites on a sort change
scope.initialize();
});
};

scope.initialize = function() {
// save current grid state
scope.gridApi && (scope.gridState = scope.gridApi.saveState.save());

fetchSites().then(function (sites) {
scope.sitesGrid.data = sites
// restore current grid state, but inadvertently retrigger the 'sortChanged' listener
scope.gridApi.saveState.restore(scope,scope.gridState);
})
};


I was thinking that I could set up a click listener on each column header, instead of using a sortChange listener, however this solution seems ugly and requires going into every header cell template and making changes.










share|improve this question



























    2















    Here is a summary of the problem: I set up a column sortChange() listener, which responds to sort changes by firing off a query to fetch newly sorted data. I save the grid state before the fetch, and restore the grid state after the fetch. The problem is that the restore gridState mechanism triggers the original sort listener, causing the whole process to start over again, and again, and again.



    scope.sitesGrid.onRegisterApi = function(gridApi) {
    scope.gridApi = gridApi;

    scope.gridApi.core.on.sortChanged(scope, function () {
    // load new sites on a sort change
    scope.initialize();
    });
    };

    scope.initialize = function() {
    // save current grid state
    scope.gridApi && (scope.gridState = scope.gridApi.saveState.save());

    fetchSites().then(function (sites) {
    scope.sitesGrid.data = sites
    // restore current grid state, but inadvertently retrigger the 'sortChanged' listener
    scope.gridApi.saveState.restore(scope,scope.gridState);
    })
    };


    I was thinking that I could set up a click listener on each column header, instead of using a sortChange listener, however this solution seems ugly and requires going into every header cell template and making changes.










    share|improve this question

























      2












      2








      2








      Here is a summary of the problem: I set up a column sortChange() listener, which responds to sort changes by firing off a query to fetch newly sorted data. I save the grid state before the fetch, and restore the grid state after the fetch. The problem is that the restore gridState mechanism triggers the original sort listener, causing the whole process to start over again, and again, and again.



      scope.sitesGrid.onRegisterApi = function(gridApi) {
      scope.gridApi = gridApi;

      scope.gridApi.core.on.sortChanged(scope, function () {
      // load new sites on a sort change
      scope.initialize();
      });
      };

      scope.initialize = function() {
      // save current grid state
      scope.gridApi && (scope.gridState = scope.gridApi.saveState.save());

      fetchSites().then(function (sites) {
      scope.sitesGrid.data = sites
      // restore current grid state, but inadvertently retrigger the 'sortChanged' listener
      scope.gridApi.saveState.restore(scope,scope.gridState);
      })
      };


      I was thinking that I could set up a click listener on each column header, instead of using a sortChange listener, however this solution seems ugly and requires going into every header cell template and making changes.










      share|improve this question














      Here is a summary of the problem: I set up a column sortChange() listener, which responds to sort changes by firing off a query to fetch newly sorted data. I save the grid state before the fetch, and restore the grid state after the fetch. The problem is that the restore gridState mechanism triggers the original sort listener, causing the whole process to start over again, and again, and again.



      scope.sitesGrid.onRegisterApi = function(gridApi) {
      scope.gridApi = gridApi;

      scope.gridApi.core.on.sortChanged(scope, function () {
      // load new sites on a sort change
      scope.initialize();
      });
      };

      scope.initialize = function() {
      // save current grid state
      scope.gridApi && (scope.gridState = scope.gridApi.saveState.save());

      fetchSites().then(function (sites) {
      scope.sitesGrid.data = sites
      // restore current grid state, but inadvertently retrigger the 'sortChanged' listener
      scope.gridApi.saveState.restore(scope,scope.gridState);
      })
      };


      I was thinking that I could set up a click listener on each column header, instead of using a sortChange listener, however this solution seems ugly and requires going into every header cell template and making changes.







      angularjs angular-ui-grid ui-grid






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Sep 19 '16 at 22:54









      efreezyefreezy

      53111




      53111
























          2 Answers
          2






          active

          oldest

          votes


















          1














          How about some kind of scope variable to track the loading of data?



          scope.gridApi.core.on.sortChanged(scope, function () {
          if (!scope.isLoading) {
          scope.initialize();
          }
          });


          and



          fetchSites().then(function (sites) {
          scope.isLoading = true;
          scope.sitesGrid.data = sites;
          scope.gridApi.saveState.restore(scope,scope.gridState);
          scope.isLoading = false;
          })


          You might need to add some timeout() calls in places if there are timing issues with this. Creating a Plunker to demonstrate this would help in that case.






          share|improve this answer































            0














            I think i find solution. I created restore function in my directive (u can use it where you want). I just block executing next iteration until action is finished.



            function restoreState() {
            if ($scope.gridState.columns !== undefined && !isRestoring) { //check is any state exists and is restored
            isRestoring = true; //set flag
            $scope.gridApi.saveState.restore($scope, $scope.gridState)
            .then(function () {
            isRestoring = false; //after execute release flag
            });
            }

            }

            function saveState() {
            if (!isRestoring) {
            $scope.gridState = $scope.gridApi.saveState.save();
            }
            }





            share|improve this answer

























              Your Answer






              StackExchange.ifUsing("editor", function () {
              StackExchange.using("externalEditor", function () {
              StackExchange.using("snippets", function () {
              StackExchange.snippets.init();
              });
              });
              }, "code-snippets");

              StackExchange.ready(function() {
              var channelOptions = {
              tags: "".split(" "),
              id: "1"
              };
              initTagRenderer("".split(" "), "".split(" "), channelOptions);

              StackExchange.using("externalEditor", function() {
              // Have to fire editor after snippets, if snippets enabled
              if (StackExchange.settings.snippets.snippetsEnabled) {
              StackExchange.using("snippets", function() {
              createEditor();
              });
              }
              else {
              createEditor();
              }
              });

              function createEditor() {
              StackExchange.prepareEditor({
              heartbeatType: 'answer',
              autoActivateHeartbeat: false,
              convertImagesToLinks: true,
              noModals: true,
              showLowRepImageUploadWarning: true,
              reputationToPostImages: 10,
              bindNavPrevention: true,
              postfix: "",
              imageUploader: {
              brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
              contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
              allowUrls: true
              },
              onDemand: true,
              discardSelector: ".discard-answer"
              ,immediatelyShowMarkdownHelp:true
              });


              }
              });














              draft saved

              draft discarded


















              StackExchange.ready(
              function () {
              StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f39583267%2fui-grid-savestate-service-circular-logic%23new-answer', 'question_page');
              }
              );

              Post as a guest















              Required, but never shown

























              2 Answers
              2






              active

              oldest

              votes








              2 Answers
              2






              active

              oldest

              votes









              active

              oldest

              votes






              active

              oldest

              votes









              1














              How about some kind of scope variable to track the loading of data?



              scope.gridApi.core.on.sortChanged(scope, function () {
              if (!scope.isLoading) {
              scope.initialize();
              }
              });


              and



              fetchSites().then(function (sites) {
              scope.isLoading = true;
              scope.sitesGrid.data = sites;
              scope.gridApi.saveState.restore(scope,scope.gridState);
              scope.isLoading = false;
              })


              You might need to add some timeout() calls in places if there are timing issues with this. Creating a Plunker to demonstrate this would help in that case.






              share|improve this answer




























                1














                How about some kind of scope variable to track the loading of data?



                scope.gridApi.core.on.sortChanged(scope, function () {
                if (!scope.isLoading) {
                scope.initialize();
                }
                });


                and



                fetchSites().then(function (sites) {
                scope.isLoading = true;
                scope.sitesGrid.data = sites;
                scope.gridApi.saveState.restore(scope,scope.gridState);
                scope.isLoading = false;
                })


                You might need to add some timeout() calls in places if there are timing issues with this. Creating a Plunker to demonstrate this would help in that case.






                share|improve this answer


























                  1












                  1








                  1







                  How about some kind of scope variable to track the loading of data?



                  scope.gridApi.core.on.sortChanged(scope, function () {
                  if (!scope.isLoading) {
                  scope.initialize();
                  }
                  });


                  and



                  fetchSites().then(function (sites) {
                  scope.isLoading = true;
                  scope.sitesGrid.data = sites;
                  scope.gridApi.saveState.restore(scope,scope.gridState);
                  scope.isLoading = false;
                  })


                  You might need to add some timeout() calls in places if there are timing issues with this. Creating a Plunker to demonstrate this would help in that case.






                  share|improve this answer













                  How about some kind of scope variable to track the loading of data?



                  scope.gridApi.core.on.sortChanged(scope, function () {
                  if (!scope.isLoading) {
                  scope.initialize();
                  }
                  });


                  and



                  fetchSites().then(function (sites) {
                  scope.isLoading = true;
                  scope.sitesGrid.data = sites;
                  scope.gridApi.saveState.restore(scope,scope.gridState);
                  scope.isLoading = false;
                  })


                  You might need to add some timeout() calls in places if there are timing issues with this. Creating a Plunker to demonstrate this would help in that case.







                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Sep 20 '16 at 2:41









                  S. BaggyS. Baggy

                  786820




                  786820

























                      0














                      I think i find solution. I created restore function in my directive (u can use it where you want). I just block executing next iteration until action is finished.



                      function restoreState() {
                      if ($scope.gridState.columns !== undefined && !isRestoring) { //check is any state exists and is restored
                      isRestoring = true; //set flag
                      $scope.gridApi.saveState.restore($scope, $scope.gridState)
                      .then(function () {
                      isRestoring = false; //after execute release flag
                      });
                      }

                      }

                      function saveState() {
                      if (!isRestoring) {
                      $scope.gridState = $scope.gridApi.saveState.save();
                      }
                      }





                      share|improve this answer






























                        0














                        I think i find solution. I created restore function in my directive (u can use it where you want). I just block executing next iteration until action is finished.



                        function restoreState() {
                        if ($scope.gridState.columns !== undefined && !isRestoring) { //check is any state exists and is restored
                        isRestoring = true; //set flag
                        $scope.gridApi.saveState.restore($scope, $scope.gridState)
                        .then(function () {
                        isRestoring = false; //after execute release flag
                        });
                        }

                        }

                        function saveState() {
                        if (!isRestoring) {
                        $scope.gridState = $scope.gridApi.saveState.save();
                        }
                        }





                        share|improve this answer




























                          0












                          0








                          0







                          I think i find solution. I created restore function in my directive (u can use it where you want). I just block executing next iteration until action is finished.



                          function restoreState() {
                          if ($scope.gridState.columns !== undefined && !isRestoring) { //check is any state exists and is restored
                          isRestoring = true; //set flag
                          $scope.gridApi.saveState.restore($scope, $scope.gridState)
                          .then(function () {
                          isRestoring = false; //after execute release flag
                          });
                          }

                          }

                          function saveState() {
                          if (!isRestoring) {
                          $scope.gridState = $scope.gridApi.saveState.save();
                          }
                          }





                          share|improve this answer















                          I think i find solution. I created restore function in my directive (u can use it where you want). I just block executing next iteration until action is finished.



                          function restoreState() {
                          if ($scope.gridState.columns !== undefined && !isRestoring) { //check is any state exists and is restored
                          isRestoring = true; //set flag
                          $scope.gridApi.saveState.restore($scope, $scope.gridState)
                          .then(function () {
                          isRestoring = false; //after execute release flag
                          });
                          }

                          }

                          function saveState() {
                          if (!isRestoring) {
                          $scope.gridState = $scope.gridApi.saveState.save();
                          }
                          }






                          share|improve this answer














                          share|improve this answer



                          share|improve this answer








                          edited Nov 27 '18 at 13:44

























                          answered Nov 27 '18 at 13:33









                          Sławek SSławek S

                          12




                          12






























                              draft saved

                              draft discarded




















































                              Thanks for contributing an answer to Stack Overflow!


                              • Please be sure to answer the question. Provide details and share your research!

                              But avoid



                              • Asking for help, clarification, or responding to other answers.

                              • Making statements based on opinion; back them up with references or personal experience.


                              To learn more, see our tips on writing great answers.




                              draft saved


                              draft discarded














                              StackExchange.ready(
                              function () {
                              StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f39583267%2fui-grid-savestate-service-circular-logic%23new-answer', 'question_page');
                              }
                              );

                              Post as a guest















                              Required, but never shown





















































                              Required, but never shown














                              Required, but never shown












                              Required, but never shown







                              Required, but never shown

































                              Required, but never shown














                              Required, but never shown












                              Required, but never shown







                              Required, but never shown







                              Popular posts from this blog

                              A CLEAN and SIMPLE way to add appendices to Table of Contents and bookmarks

                              Calculate evaluation metrics using cross_val_predict sklearn

                              Insert data from modal to MySQL (multiple modal on website)