How to Display a Grid in a Windows Azure Pack Management Portal Extension

Applies To: Windows Azure Pack

A grid is the basic way to show a list of data to the user. It has support for multi-select, column reordering and sorting, display of icons and text, and auto-refreshing itself from the defined data source. The typical pattern is for the extension to show a grid when the user selects a tab.

To Display a Grid When the User Selects a Tab

1. Put the following grid code in the opened function for the tab:

   // This function has been set to be the opened function earlier
   // For this to work, there should be a <div> in your template for the tab with a class of "gridContainer"
   function loadTab(extension, renderArea, initData) {
     // Create a dataset so the client-side framework knows how to get the data for refreshes
     var localDataSet = Exp.Data.getLocalDataSet(DomainTenantExtension.Controller.listOwnedDomainNamesUrl),
     // Define the columns in the grid. A number of pre-defined types exist.
     columns = [
       { name: "Name", field: "Name", sortable: false },
       { name: "Status", field: "Status", type: "status", displayStatus: waz.interaction.statusIconHelper(statusIcons), filterable: false, sortable: false },
       { name: "Type", field: "Type", filterable: false, sortable: false },
       { name: "Expires", field: "ExpiryDate", filterable: false, sortable: false, formatter: dateFormatter }
     ];
   
     grid = renderArea.find(".gridContainer")
       .wazObservableGrid("destroy")
       .wazObservableGrid({
         lastSelectedRow: null,
         data: localDataSet.data,
         keyField: "name",
         columns: columns,
         gridOptions: {
           // Function to call when a row is selected. Optional.
           rowSelect: onRowSelected
         },
         // If the grid is empty, a template can be rendered instead, typically suggesting to the user that they create a new resource
         emptyListOptions: {
           extensionName: "DomainTenantExtension",
           templateName: "domainsTabEmpty",
           arrowLinkSelector: ("{0} .dm-new-domain-link").format(renderArea.selector),
           arrowLinkAction: global.DomainTenantExtension.CreateWizard.showCreateWizard
           }
         });
       }
   

See Also

Performing Common Tasks in a Windows Azure Pack Management Portal Extension