One of the important User Interface features is the Smart Grid. The benefit of the SmartGrid is to provide a lot of information is a small space. For example, here you see a summary of Incident Events. displaying a few of the most important items from the Incident. Across the top of the Grid we see the header showing the various types of data being displayed. On the far right are the Action Buttons. The Details Button will take you to the full database record. The Edit button will take you to the page where you can edit and update the record. And the Delete button will take you to a page where you can first review the details and then delete the information if you choose. In some Grids, you may see an item highlighted as a hyperlink like the Incident Title is in this example. Clicking the link will drill down to the Details page for this item.


Parts of the SmartGrid


Along the bottom of the Grid is the paging section. If there are more records than fit in the first page of the Grid, you’ll see the option to page through all of the Records. You can also click on the Page Size and you can dynamically change the page size to see more or fewer records on a single Web page. You can also select All to see all records.



In the Grid Header you will see three dots next to the Header Title. Clicking the dots will expand the header menu for that column. You’ll see up to 4 options. Sort – ascending or descending. Simply click to sort by that column. You can also sort simply by clicking on the Header Title. Click once to sort Up, click again to sort Down and click again to remove the sort. A sort arrow appears to show your sorting direction. Clicking the Columns will show a pop-up of all the columns in the Grid. You can turn columns display on or off by clicking on the checkboxes.


The next option is Filter. We use a SmartFilter that changes based on the type of data in the column. Filters can be text searches, checkboxes, date, time and more. Filters allow you to search through your data in the Grid and then select just those items you want to drill into.


In some Grids there is also the capability of Grouping your data. If you see the Grouping area above the Header that means you can drag any groupable columns up and it will regroup the data based on that column. You can group using multiple columns and event reorder the grouping by dragging one grouping in front of the other. To ungroup, simply check the x on the group and it will be removed.

If you see a small triangle on the left side of the Grid, that indicates an Expansion Area. Click and the Grid will expand to display details about that item. In some cases, you may see all of the Details about that item, in other cases only a subset.


SmartGrids are used through the application to allow you to catch a quick snapshot of your data and then drill down to see more detail.