Como exibir uma grade em um Windows extensão do Portal de Gerenciamento de Pacotes do Azure

 

Aplica-se a: Windows Azure Pack

Uma grade é a maneira básica de mostrar uma lista de dados para o usuário. Ele tem suporte para seleção múltipla, reordenação e classificação de colunas, exibição de ícones e texto e atualização automática da fonte de dados definida. O padrão típico é que a extensão mostre uma grade quando o usuário seleciona uma guia.

Para exibir uma grade quando o usuário seleciona uma guia

1. Coloque o seguinte código de grade na função aberta para a guia:

   // 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
           }
         });
       }
   

Consulte Também

Executando tarefas comuns em um Windows extensão do Portal de Gerenciamento de Pacotes do Azure