PowerSchool Grid Widget

PowerSchool has create a grid widget that allows filtering and sorting based on an angular created table.  This widget is a quick, easy way to add a lot of additional functionatlity.

This article is only useful for those using PowerSchool and have the angular basics.  If the following does not make senses to you, please learn the basics here https://angularjs.org/

  • ng-repeat=”row in table.rows”
  • {{row.school}}
  • app=angular.module(“someModule”,[])
  • $scope.rows=[{“col1″:”data”,”col2″:123},{“col1″:”data”,”col2″:123}];
  • ui_examples page

Now that the requirements are set forth, this article is meant to suppliment the information already available in the examples page in PowerSchool.  This is a collections of gotchas  that have been discovered.

Symptom  Fix
 The filters appear, but the add button does not work  This is usually acause by having and incorrect  pss-sort-fields attribute. Check the spell and that alll the columns you want filter on have this attribute
 Sorting a column does not work or sorts the wrong column  Make sure you pss-sort-fields match correctly to your columns when creating the rows of data
 The table does not appear but the total does  This can be cause by missing the ID for the div that contains data-pss-grid-widget
 The table does not appear and the total does not appear total.  This can be cause by several missing pieces.

  • Check to make sure the data-data is correct
  • Check you data-filtered-data is set a variable that is not being used in the controller
  • Make sure to use the $scope variable
    If you do not then you will have to prepend the controller name (not the alias) alias to this attribute