GridColumn / GridColumns

Por padrão, MainGrid e SubGrid renderize qualquer conjunto de colunas que a visualização ativa do Dataverse retorne. O GridColumn componente permite que você assuma controle explícito: quando um ou mais GridColumn filhos são declarados, a grade renderiza apenas essas colunas, na ordem declarada, e a projeção do lado do servidor é reescrita para buscar exatamente o conjunto declarado. Use isso para reduzir a grade até as colunas que importam para uma página específica, reordená-las, personalizar a largura/alinhamento, fornecer templates por célula ou colunas de superfície que não estejam na visualização subjacente — sem editar a visualização do Dataverse em si.

Demo ao vivo

Um MainGrid sobre a contact mesa misturando um GridTemplateColumn com três crianças comunsGridColumn. A primeira célula é sintética — compõe um avatar inicial mais um nome em negrito a partir de valores brutos firstname + lastname puxados para a projeção via DependsOn. Os três restantes demonstram modelos por célula ChildContent em colunas encadernadas: um mailto: link, um número de telefone com ícone inline e um crachá de idade codificado por cores que lê a via GetValueOrDefault<T>() bruta IntValue para a comparação de limiar. Clique no ícone de engrenagem e ative Editável para ver as colunas EditChildContent do modelo em ação — a célula do Nome Completo troca do renderizado avatar para dois editores lado a TextEdit lado vinculados a firstname + lastname.

Exemplo de reação
Exemplo de Blazor
Qualquer pessoa pode ver os contatos na grade abaixo. Faça login para criar, visualizar e atualizar seus próprios contatos.
Todos os Contatos
Todos os Contatos

Tamanho da página

102050100
Editable
Nome completo
E-mail
Telefone
Idade
AM Abagail Miller
---
AP Abdul Pollich
---
AP Abel Parisian
---
AK Abigale Kuvalis
---
AP Adell Paucek
---
AR Adella Roob
---
AW Adolf Weber
---
AT Adonis Torphy
---
AG Agustin Goyette
---
AR Agustin Rau
---
React TypeScript
Razor

Uso Básico

Coloque GridColumn componentes dentro de uma GridColumns capa sob a grade. Nomes de colunas declaradas sobrescrevem a projeção do <attribute> FetchXML — o servidor busca as colunas declaradas mesmo que elas não estejam na seleção de colunas da visualização ativa. O TableName parâmetro é opcional no modo declarado: quando omitido, o próprio TableName da grade é usado (não é necessário repeti-lo em cada coluna).

React
Blazor

Substituir, não aditivo

Declarar qualquer GridColumn filho muda a grade para o modo de substituição: colunas declaradas são o conjunto inteiro de colunas renderizado E todo o conjunto de colunas buscadas. Colunas de visualização não declaradas aqui são removidas tanto da renderização quanto da projeção do servidor. Se quiser a maioria das colunas de visualização com um ou dois ajustes, abandone completamente o wrapper ou construa uma visualização personalizada via CustomViewDefinitions.

Parâmetros Exigidos

Cada GridColumn declaração leva:

  • ColumnName — Obrigatório. Nome lógico da coluna a projetar. Suporta notação pontual para colunas de entidades vinculadas aliasadas (primarycontactid.emailaddress1); o alias já deve existir como a <link-entity> no FetchXML da visualização ativa.
  • TableName — Opcional. Nome lógico da tabela cujos metadados descrevem esta coluna. Quando omitido, recorre à grade TableName — útil para manter a margem do consumidor curta em grades de tabela única.

Largura da coluna

Use Width para sobrescrever a largura armazenada da visualização. Aceita qualquer comprimento CSS — pixels ("150px"), porcentagens ("20%"), ou "auto". Sem uma largura explícita, a grade volta ao padrão derivado dos metadados e à distribuição natural da tabela.

React
Blazor

Alinhamento

Use Align para sobrescrever o alinhamento horizontal tanto do cabeçalho quanto das células do corpo. Colunas numéricas e de dinheiro têm por padrão ( Align.End alinhadas à direita) via o recurso de respaldo orientado por metadados; colunas booleanas têm por padrão . Align.Center Defina explicitamente quando quiser um alinhamento não padrão, ou para alinhar uma célula com template personalizado de forma consistente.

React
Blazor

Colunas de Entidades Vinculadas

Colunas de entidades ligadas com aliasings usam notação de pontos que corresponde ao que o FetchXML da visualização as aliasiza. O alias já deve estar definido como a <link-entity> na visualização ativa. Definido TableName para a tabela de origem para que o alias aponte para que a resolução dos metadados caia na entidade correta. O servidor retorna essas colunas com seu nome de exibição localizado qualificado pela tabela pai (por exemplo, "Email (Contato Primário)") — sem necessidade de humanização do lado do cliente.

React
Blazor

Modelos por célula

Forneça ChildContent para renderizar cada célula com marcação personalizada. O template recebe GridRowContext — sua PrimaryRecord propriedade expõe a linha completa TableRecord (valores de colunas digitadas, valores formatados, permissões, tudo). Útil para formatação condicional (texto vermelho acima de um limite), ícones, distintivos, links ou qualquer outra coisa que você possa construir a partir do registro da linha.

React
Blazor

Registro Pai em SubGrids

Quando a grade é montada como um SubGrid, GridRowContext.ParentRecord expõe o registro de 's ao redor RecordContext(o pai da SubGrade). Procure dentro de um ChildContent modelo quando a formatação condicional precisar comparar a coluna de uma linha com a do pai — por exemplo, destacar contatos que industrycode não correspondam à conta do pai, ou rotular linhas pertencentes ao dono do pai. null em um registro independente MainGrid onde não há registro pai.

React
Blazor

Paridade de reação

O lado React tem a mesma superfície que cellRenderero parentRecord prop de '.CellRendererProps.parentRecord

GridTemplateColumn

Use GridTemplateColumn quando uma coluna não mapeia para uma única coluna do Dataverse — combine vários valores brutos em uma célula, renderize um distintivo de status com chave em vários campos ou emita uma célula de ações puramente decorativas sem dependência de dados. Diferente de GridColumn, uma coluna template não ColumnNametem : declare as colunas pelas quais o renderer lê DependsOn e o framework as funde na projeção FetchXML, para que os dados cheguem quando ctx.Row.PrimaryRecord seu template roda. Ele ChildContent recebe um GridTemplateColumnContext (use o Context="ctx" atributo para nomear) que carrega a linha, o pai SubGrid opcional e uma consulta pré-construída DependsOnMetadata com base nos nomes das colunas que você declarou.

React
Blazor

Coluna modelo vs. GridColumn ChildContent

GridColumn ChildContent Ainda personaliza uma coluna limitada — ordenação, despacho de edição e o cabeçalho da coluna todos são dados de seu único ColumnName. Alcance apenas GridTemplateColumn quando não houver uma única coluna subjacente para vincular (células compostas, células decorativas de ação, crachás de status combinando múltiplos campos). Misturar os dois é aceitável — eles se entrelaçam em ordem declarada ao longo do conjunto de colunas da grade.

Colunas decorativas (sem dependência de dados)

Pule DependsOn completamente quando a célula renderiza conteúdo puramente decorativo, como botões ou ícones inline. A estrutura ainda monta a coluna na posição correta da tabela renderizada; Nada é adicionado à projeção do servidor para essa coluna.

React
Blazor

Modelos de Edição Inline

Combine o modo ChildContent de leitura de a GridTemplateColumncom um EditChildContent para tornar a coluna editável quando a opção de Editável da grade estiver ativada. O modelo de edição recebe — GridTemplateColumnEditContext o mesmo contexto de linha do modelo de leitura (editCtx.Row.PrimaryRecord, o opcional editCtx.Row.ParentRecord em um SubGrade, a editCtx.DependsOnMetadata consulta) mais um auxiliar imperativoeditCtx.SetValue(columnName, value).

EditChildContent dispara quando a grade é editável (AllowEdit="true" na grade mais o usuário já virou o botão Editável no menu de engrenagens da barra de ferramentas), a linha não está pendente-deletação, e a própria coluna declara um modelo de edição. Colunas de modelo decorativas que não EditChildContent permitem permanecer em modo somente leitura mesmo no modo de edição — úteis para colunas de ações que sempre devem renderizar os mesmos botões.

Padrão 1 — Editores padrão disponíveis

O caso mais comum: a célula é composta por múltiplas colunas vinculadas, e você quer deixar o usuário editar cada uma. Coloque os editores correspondentes <TextEdit> / <ColumnEdit> <NumberEdit> / dentro EditChildContent — o framework cascata o registro primário e o matching EditContextValidator da linha para esse escopo, para que os editores se registrem automaticamente para rastreamento sujo e validação exatamente como fazem sob um bound <GridColumn>.ChildContent Não é necessário fiação extra.

React
Blazor

Padrão 2 — Widget personalizado com SetValue

Quando a superfície do editor não mapeia 1:1 para uma coluna do Dataverse — uma única caixa de texto "Primeiro Último" que se divide em duas colunas, um controle deslizante vinculado a múltiplos campos percentuais, um seletor personalizado por intervalo de datas escrevendo início e fim — renderize sua própria entrada e chame editCtx.SetValue(columnName, value) para cada coluna afetada. A framework roteia a escrita para o endereço correto AliasedTableRecord (lidando com os nomes das colunas link-entity da notação ponto) e dispara o evento do ValueChanged registro para que o dirty-tracking e a fila de atualização pendente da linha detectem a alteração.

React
Blazor

Validação no caminho imperativo

Editores padrão se registravam EditChildContent automaticamente com as EditContextValidator linhas e participavam do portão de validação antes do save do framework. O editCtx.SetValue caminho contorna esse pipeline — o framework não pode validar valores que não vieram de um editor registrado. Se seu widget personalizado precisar impor restrições, execute-as dentro do ValueChanged callback antes de chamar SetValue, ou volte ao padrão de editor drop-in quando possível.

Em uma SubGrade

Tudo que se aplica a MainGrid funciona de forma idêntica em SubGrid. Parear colunas declaradas com botões de barra de ferramentas no Buttons fragmento de renderização para uma experiência de edição inline focada, direcionada à coleção relacionada ao registro pai — e combine com @@context.ParentRecord templates de célula para formatação condicional que se baseia no pai do SubGrid.

React
Blazor

Referência de parâmetros

Parâmetro
Descrição
ColumnName
Obrigatório. Nome lógico da coluna; suporta notação pontuária para colunas de entidades vinculadas com aliasing.
TableName
Opcional. Nome lógico da tabela cujos metadados descrevem esta coluna. Herda a TableName grade quando omitida.
Width
Comprimento CSS opcional para a largura da coluna.
Align
Opcional sobreposição de alinhamento horizontal (Align.Start, Align.Center, Align.End). Volta ao padrão orientado por metadados quando omitido.
Title
Opcional substituição do rótulo de cabeçalho. Volta ao nome de exibição localizado da coluna.
HeaderTooltip
Dica opcional de cabeçalho — útil para explicar colunas computadas ou aliasadas. (Nomeado para evitar a colisão insensível a maiúsculas minúsculas com o parâmetro bool herdado Tooltip em TemplateColumn.)
Visible
Opcional. false suprime a coluna da tabela renderizada e da projeção do servidor mesmo quando outras colunas declaradas estão presentes. O padrão é .true
IsDefaultSortColumn / InitialSortDirection
Opcional. Marque uma coluna declarada como a ordenação inicial da grade. A direção de ordenação é padrão ascendente.
ChildContent
Modelo opcional de recebimento GridRowContextpor célula . Renderiza dentro de cada célula do corpo quando fornecida; acesse a linha via @@context.PrimaryRecord e (em uma SubGrade) o pai via @@context.ParentRecord.
Parâmetro: ColumnName
Descrição: Obrigatório. Nome lógico da coluna; suporta notação pontuária para colunas de entidades vinculadas com aliasing.
Parâmetro: TableName
Descrição: Opcional. Nome lógico da tabela cujos metadados descrevem esta coluna. Herda a TableName grade quando omitida.
Parâmetro: Width
Descrição: Comprimento CSS opcional para a largura da coluna.
Parâmetro: Align
Descrição: Opcional sobreposição de alinhamento horizontal (Align.Start, Align.Center, Align.End). Volta ao padrão orientado por metadados quando omitido.
Parâmetro: Title
Descrição: Opcional substituição do rótulo de cabeçalho. Volta ao nome de exibição localizado da coluna.
Parâmetro: HeaderTooltip
Descrição: Dica opcional de cabeçalho — útil para explicar colunas computadas ou aliasadas. (Nomeado para evitar a colisão insensível a maiúsculas minúsculas com o parâmetro bool herdado Tooltip em TemplateColumn.)
Parâmetro: Visible
Descrição: Opcional. false suprime a coluna da tabela renderizada e da projeção do servidor mesmo quando outras colunas declaradas estão presentes. O padrão é .true
Parâmetro: IsDefaultSortColumn / InitialSortDirection
Descrição: Opcional. Marque uma coluna declarada como a ordenação inicial da grade. A direção de ordenação é padrão ascendente.
Parâmetro: ChildContent
Descrição: Modelo opcional de recebimento GridRowContextpor célula . Renderiza dentro de cada célula do corpo quando fornecida; acesse a linha via @@context.PrimaryRecord e (em uma SubGrade) o pai via @@context.ParentRecord.

Parâmetros GridTemplateColumn

Parâmetro
Descrição
Id
Identificador estável opcional. Quando omitido, o framework gera automaticamente um como __template-{index} baseado na posição da coluna do modelo entre os outros templates. Passe um id explícito quando suas declarações puderem se reordenar dinamicamente.
Title
Rótulo de cabeçalho obrigatório. Não há metadados de coluna limitada para derivar um padrão.
DependsOn
Opcional. A coluna lógica do Dataverse nomeia o renderizador que lê da linha. O framework funde esses dados na projeção FetchXML para que os dados caiam em ctx.Row.PrimaryRecord. Omitido/vazio para células decorativas.
SortBy
Opcional. Nome lógico da coluna para ordenar quando o cabeçalho é clicado. Omitido = cabeçalho não é sortável.
Width
Comprimento CSS opcional para a largura da coluna.
Align
Substituição opcional de alinhamento horizontal. Padrão para Align.Start (não há padrão baseado em metadados, já que não há um tipo de coluna subjacente).
Tooltip
Texto opcional da dica de cabeçalho.
Visible
Opcional. false suprime a coluna da tabela renderizada E elimina suas DependsOn entradas da projeção do servidor. O padrão é .true
ChildContent
Recebimento de template GridTemplateColumnContextpor célula requerido. Leia a linha via ctx.Row.PrimaryRecord (e em um SubGrid, o pai via ctx.Row.ParentRecord); use ctx.DependsOnMetadata[name] para metadados por coluna quando o renderizador precisar.
EditChildContent
Template opcional de edição recebendo GridTemplateColumnEditContext. Invocado em vez de ChildContent quando a grade está em modo de edição inline e a linha é mutável. Mesma linha do modelo de leitura mais editCtx.SetValue(name, value) para escritas imperativas. Veja os Modelos de Edição Inline acima para os dois padrões de autoria.
Parâmetro: Id
Descrição: Identificador estável opcional. Quando omitido, o framework gera automaticamente um como __template-{index} baseado na posição da coluna do modelo entre os outros templates. Passe um id explícito quando suas declarações puderem se reordenar dinamicamente.
Parâmetro: Title
Descrição: Rótulo de cabeçalho obrigatório. Não há metadados de coluna limitada para derivar um padrão.
Parâmetro: DependsOn
Descrição: Opcional. A coluna lógica do Dataverse nomeia o renderizador que lê da linha. O framework funde esses dados na projeção FetchXML para que os dados caiam em ctx.Row.PrimaryRecord. Omitido/vazio para células decorativas.
Parâmetro: SortBy
Descrição: Opcional. Nome lógico da coluna para ordenar quando o cabeçalho é clicado. Omitido = cabeçalho não é sortável.
Parâmetro: Width
Descrição: Comprimento CSS opcional para a largura da coluna.
Parâmetro: Align
Descrição: Substituição opcional de alinhamento horizontal. Padrão para Align.Start (não há padrão baseado em metadados, já que não há um tipo de coluna subjacente).
Parâmetro: Tooltip
Descrição: Texto opcional da dica de cabeçalho.
Parâmetro: Visible
Descrição: Opcional. false suprime a coluna da tabela renderizada E elimina suas DependsOn entradas da projeção do servidor. O padrão é .true
Parâmetro: ChildContent
Descrição: Recebimento de template GridTemplateColumnContextpor célula requerido. Leia a linha via ctx.Row.PrimaryRecord (e em um SubGrid, o pai via ctx.Row.ParentRecord); use ctx.DependsOnMetadata[name] para metadados por coluna quando o renderizador precisar.
Parâmetro: EditChildContent
Descrição: Template opcional de edição recebendo GridTemplateColumnEditContext. Invocado em vez de ChildContent quando a grade está em modo de edição inline e a linha é mutável. Mesma linha do modelo de leitura mais editCtx.SetValue(name, value) para escritas imperativas. Veja os Modelos de Edição Inline acima para os dois padrões de autoria.