Issue with saving and restoring filter state for Angular Smart table dropdown filters is not working correctly

Question

Issue with saving and restoring filter state for Angular Smart table dropdown filters is not working correctly

After carefully following the guidelines provided in the documentation for persisting the filter state, I encountered an issue. Despite successfully restoring the table state, including the filters, upon reloading the page, the <select> box appears empty, although the filter functionality is still operational.

Fortunately, the text filter continues to function effectively.

Version Information: Angular 1.4.7 Smart-table 2.1.5

You can access the Plunker example through the following link: https://embed.plnkr.co/fK6WfZSZrgSeIG732R2X/

.directive('stPersist', function() {
  return {
    require: '^stTable',
    link: function(scope, element, attr, ctrl) {
      var nameSpace = attr.stPersist;

      //save the table state every time it changes
      scope.$watch(function() {
        return ctrl.tableState();
      }, function(newValue, oldValue) {
        if (newValue !== oldValue) {
          localStorage.setItem(nameSpace, JSON.stringify(newValue));
        }
      }, true);

      //fetch the table state when the directive is loaded
      if (localStorage.getItem(nameSpace)) {
        var savedState = JSON.parse(localStorage.getItem(nameSpace));
        var tableState = ctrl.tableState();

        angular.extend(tableState, savedState);
        ctrl.pipe();

      }

    }
  };
});;

javascript angularjs smart-table

Answer 1

Answer №1

To enhance the Select statement, I suggest incorporating the ngSelected attribute:

<select st-search="category" st-input-event="change" class="input-sm form-control">
    <option value="">All</option>
    <option data-ng-repeat="category in categories" ng-selected="category.id == selectedCategory" value="{{category.id}}">{{category.name}}</option>
</select>

Additionally, you can access the category value from storage as shown below:

//retrieve the table state upon directive loading
if (localStorage.getItem(nameSpace)) {
    var savedState = JSON.parse(localStorage.getItem(nameSpace));
    var tableState = ctrl.tableState();

    // extract category filter (excluding 'All' selection)
    scope.selectedCategory = savedState.search.predicateObject.category || "";

    angular.extend(tableState, savedState);
    ctrl.pipe();
}

To gain insight into the data persistence process and the logic behind 'savedState.search.predicateObject.category', you can include the following JS snippet:

console.log(JSON.stringify(savedState));

https://plnkr.co/edit/bMbIVJ8OkEnfoYbWidu3?p=preview

Answer 2

To enhance the Select statement, I suggest incorporating the ngSelected attribute:

<select st-search="category" st-input-event="change" class="input-sm form-control">
    <option value="">All</option>
    <option data-ng-repeat="category in categories" ng-selected="category.id == selectedCategory" value="{{category.id}}">{{category.name}}</option>
</select>

Additionally, you can access the category value from storage as shown below:

//retrieve the table state upon directive loading
if (localStorage.getItem(nameSpace)) {
    var savedState = JSON.parse(localStorage.getItem(nameSpace));
    var tableState = ctrl.tableState();

    // extract category filter (excluding 'All' selection)
    scope.selectedCategory = savedState.search.predicateObject.category || "";

    angular.extend(tableState, savedState);
    ctrl.pipe();
}

To gain insight into the data persistence process and the logic behind 'savedState.search.predicateObject.category', you can include the following JS snippet:

console.log(JSON.stringify(savedState));

https://plnkr.co/edit/bMbIVJ8OkEnfoYbWidu3?p=preview

Answer 3

Answer №2

Here is my approach to solving the issue: I dynamically create a property in the scope with the suffix "_SelectedValue" for each property of the search.predicateObject. This allows each control to easily bind to it in the HTML.

      <select data-st-search="AbiSearch" data-st-input-event="change">
        <option value="">All</option>
        <option data-ng-repeat="row in rowCollection | unique:'AbiSearch' | orderBy: 'AbiSearch'"
                data-ng-selected="row.AbiSearch == AbiSearch_SelectedValue"
                value="{{row.AbiSearch}}">{{row.AbiSearch}}</option>
      </select>

JavaScript:

  if ($localStorage[nameSpace]) {
    var savedState = $localStorage[nameSpace];
    var tableState = ctrl.tableState();

    for (var propertyName in savedState.search.predicateObject) {
      if (savedState.search.predicateObject.hasOwnProperty(propertyName)) {
        scope[propertyName + "_SelectedValue"] = savedState.search.predicateObject[propertyName] || "";
      }
    }

    angular.extend(tableState, savedState);
    ctrl.pipe();
  }

Answer 4

Here is my approach to solving the issue: I dynamically create a property in the scope with the suffix "_SelectedValue" for each property of the search.predicateObject. This allows each control to easily bind to it in the HTML.

      <select data-st-search="AbiSearch" data-st-input-event="change">
        <option value="">All</option>
        <option data-ng-repeat="row in rowCollection | unique:'AbiSearch' | orderBy: 'AbiSearch'"
                data-ng-selected="row.AbiSearch == AbiSearch_SelectedValue"
                value="{{row.AbiSearch}}">{{row.AbiSearch}}</option>
      </select>

JavaScript:

  if ($localStorage[nameSpace]) {
    var savedState = $localStorage[nameSpace];
    var tableState = ctrl.tableState();

    for (var propertyName in savedState.search.predicateObject) {
      if (savedState.search.predicateObject.hasOwnProperty(propertyName)) {
        scope[propertyName + "_SelectedValue"] = savedState.search.predicateObject[propertyName] || "";
      }
    }

    angular.extend(tableState, savedState);
    ctrl.pipe();
  }

Answer 5

Answer №3

A more efficient solution is available when dealing with multiple tables on the same page that share the same filter name. This approach avoids creating numerous objects to independently store each property.

Here is an example of the HTML code:

      <select data-st-search="Enabled" data-st-input-event="change">
        <option value="">All</option>
        <option data-ng-repeat="row in rowCollection | unique:'Enabled' | orderBy: 'Enabled'"
                data-ng-selected="row.Enabled.toString() == {{StPersistName}}.Enabled_SelectedValue"
                value="{{row.Enabled}}">{{row.Enabled}}</option>
      </select>

And here is the corresponding JavaScript code:

  // Retrieve the table state upon directive initialization
  if ($localStorage[nameSpace]) {
    var savedState = $localStorage[nameSpace];
    var tableState = ctrl.tableState();

    // Check if the object is initialized
    if (!angular.isDefined(scope[nameSpace])) {scope[nameSpace] = {};}

    // Necessary for preselecting the filter in a dropdown menu
    for (var propertyName in savedState.search.predicateObject) { 
      if (savedState.search.predicateObject.hasOwnProperty(propertyName)) {
        scope[nameSpace][propertyName + "_SelectedValue"] = savedState.search.predicateObject[propertyName] || "";
      }
    }

    angular.extend(tableState, savedState);
    ctrl.pipe();
  }

Answer 6

A more efficient solution is available when dealing with multiple tables on the same page that share the same filter name. This approach avoids creating numerous objects to independently store each property.

Here is an example of the HTML code:

      <select data-st-search="Enabled" data-st-input-event="change">
        <option value="">All</option>
        <option data-ng-repeat="row in rowCollection | unique:'Enabled' | orderBy: 'Enabled'"
                data-ng-selected="row.Enabled.toString() == {{StPersistName}}.Enabled_SelectedValue"
                value="{{row.Enabled}}">{{row.Enabled}}</option>
      </select>

And here is the corresponding JavaScript code:

  // Retrieve the table state upon directive initialization
  if ($localStorage[nameSpace]) {
    var savedState = $localStorage[nameSpace];
    var tableState = ctrl.tableState();

    // Check if the object is initialized
    if (!angular.isDefined(scope[nameSpace])) {scope[nameSpace] = {};}

    // Necessary for preselecting the filter in a dropdown menu
    for (var propertyName in savedState.search.predicateObject) { 
      if (savedState.search.predicateObject.hasOwnProperty(propertyName)) {
        scope[nameSpace][propertyName + "_SelectedValue"] = savedState.search.predicateObject[propertyName] || "";
      }
    }

    angular.extend(tableState, savedState);
    ctrl.pipe();
  }

Issue with saving and restoring filter state for Angular Smart table dropdown filters is not working correctly

Answer №1

Answer №2

Answer №3

Similar questions

Selecting middleware to be executed based on Express JS request parameters

Ways to choose an option from a drop-down menu without the select tag using Selenium

the ReactJS data length is accessible when saving changes, but not when refreshing the browser

When a new ajax function is added, the original Ajax code stops functioning

Utilizing ActivatedRoute in conjunction with another Service

Disabling the shadow when setting the face color in Three.js

Don't waste time creating multiple popups for changing content - streamline your process

The NextJs image entered into an endless loop, throwing an error message that said: "The 'url' parameter is correct, but the response from the

Step-by-step guide on entering text into a hidden field with Selenium WebDriver and Java

The implementation of Axios cancel token failed to function properly in a real-time search feature within a React application

Retrieve a JSON array using an HTTP Get request in JavaScript (with jQuery)

Is there a way to retrieve the form name within my directive?

Sliding carousel from right to left

Using React Native to trigger a function based on a conditional statement

What's the best way to capture an element screenshot using JavaScript?

I'm baffled as to why this code isn't functioning properly

Utilizing Nested Click Events in jQuery to Enhance User Interaction

Challenge with the Nested List Weight Sum algorithm

I'm unsure of my recollection on how to utilize the /* syntax in JavaScript

Utilizing regular expressions on a URI parameter in JavaScript