Blazor Tree Grid Row Adding
O IgbTreeGrid
fornece uma maneira conveniente de realizar manipulações de dados por meio da adição de linha embutida e uma API poderosa para operações CRUD Blazor. Adicione um IgbActionStrip
componente com ações de edição habilitadas no modelo da grade, passe o mouse sobre uma linha e use o botão fornecido, pressione ALT + + para gerar a linha adicionando a interface do usuário ou ALT + SHIFT + + para gerar a interface do usuário para adicionar um filho para a linha selecionada.
Blazor Tree Grid Row Adding Example
Row Adding Usage
Em seguida, defina uma fonte de IgbTreeGrid
dados com vinculação, RowEditable
definida como true e um IgbActionStrip
componente com ações de edição habilitadas. A AddRow
entrada controla a visibilidade do botão que gera a linha que adiciona a interface do usuário.
<IgbTreeGrid AutoGenerate="false" Id="treegrid" PrimaryKey="ID" ForeignKey="ParentID" RowEditable="true">
<IgbColumn Field="Name" Header="Name" DataType="GridColumnDataType.String"></IgbColumn>
<IgbColumn Field="Title" Header="Title" DataType="GridColumnDataType.String"></IgbColumn>
<IgbColumn Field="HireDate" Header="Hire Date" DataType="GridColumnDataType.Date"></IgbColumn>
<IgbColumn Field="OnPTO" Header="On PTO" DataType="GridColumnDataType.Boolean"></IgbColumn>
<IgbActionStrip>
<IgbGridEditingActions AddRow="true"></IgbGridEditingActions>
</IgbActionStrip>
</IgbTreeGrid>
Observação: a configuração da chave primária é obrigatória para operações de adição de linha.
Observação: todas as colunas, excluindo a chave primária, são editáveis na linha que adiciona a interface do usuário por padrão. Se você deseja desabilitar a edição de uma coluna específica, é necessário definir a
Editable
entrada da coluna comofalse
.
Observação: as
IgbGridEditingActions
entradas que controlam a visibilidade dos botões adicionar linha e adicionar filho podem usar o contexto da faixa de ação (que é do tipoIgbRowType
para ajustar quais registros os botões são exibidos.
O interno BaseTransactionService
é fornecido IgbTreeGrid
automaticamente. Ele mantém as alterações de célula pendentes até que o estado da linha seja enviado ou cancelado.
Start Row Adding Programmatically
IgbTreeGrid
permite gerar programaticamente a interface do usuário de adição de linha usando dois métodos públicos diferentes. Um que aceita uma ID de linha para especificar a linha na qual a interface do usuário deve ser gerada e outro que funciona por índice. Você pode usar esses métodos para gerar a interface do usuário em qualquer lugar dentro da exibição de dados atual. Não há suporte para alterar a página ou especificar uma linha que seja, por exemplo, filtrada.
@code {
await this.treeGrid.BeginAddRowByIdAsync('ALFKI', true); // Spawns the add row UI to add a child for the row with PK 'ALFKI'
await this.treeGrid.BeginAddRowByIdAsync(null, false); // Spawns the add row UI as the first record
}
O BeginAddRowByIndex
método funciona de forma semelhante, mas a linha a ser usada como contexto é especificada pelo índice.
@code {
await this.treeGrid.BeginAddRowByIndexAsync(10, true); // Spawns the add row UI to add a child for the row at index 10
await this.treeGrid.BeginAddRowByIndexAsync(0); // Spawns the add row UI as the first record
}
Positioning
A posição padrão da interface do usuário de adição de linha está abaixo da linha para a qual o usuário final clicou no botão adicionar linha.
The
IgbTreeGrid
scrolls to fully display the add row UI automatically.A sobreposição para a interface do usuário de adição de linha mantém sua posição durante a rolagem.
Behavior
A interface do usuário de adição de linha tem o mesmo comportamento que a de edição de linha, pois foi projetada para fornecer uma experiência de edição consistente aos usuários finais. Consulte o tópico Edição de linha de grade de árvore para obter mais informações.
Depois que uma nova linha é adicionada por meio da interface do usuário de adição de linha, sua posição e/ou visibilidade é determinada pelo estado de classificação, filtragem e agrupamento do IgbTreeGrid
. Em um IgbTreeGrid
que não tem nenhum desses estados aplicados, ele aparece como o último registro. Uma barra de lanches é exibida brevemente contendo um botão que o usuário final pode usar para rolar até IgbTreeGrid
sua posição se não estiver em view.
Keyboard Navigation
- ALT + +- Entra no modo de edição para adicionar uma linha
- ALT + SHIFT + + - Enters edit mode for adding a child
ESC sai do modo de adição de linha sem enviar nenhuma alteração
TAB mova o foco de uma célula editável na linha para a próxima e da célula editável mais à direita para os botões CANCELAR e CONCLUÍDO. A navegação do botão CONCLUÍDO vai para a célula editável mais à esquerda dentro da linha editada no momento.
Feature Integration
Qualquer operação de adição de linha será interrompida se a visualização de dados do
IgbTreeGrid
for modificada. Todas as alterações feitas pelo usuário final são enviadas. As operações que alteram a visualização de dados incluem, mas não se limitam a, classificação, agrupamento, filtragem, paginação etc.Os resumos são atualizados após a conclusão da operação de adição de linha. O mesmo é válido para os outros recursos dependentes da visualização de dados, como classificação, filtragem etc.
Customizing Row Adding Overlay
Customizing Text
Personalizar o texto da linha adicionando sobreposição é possível usando o RowAddTextDirective
.
<IgbTreeGrid Data="data" PrimaryKey="ProductID" AutoGenerate="false" RowEditable="true" RowAddTextTemplate="addTextTemplate">
</IgbTreeGrid>
@code {
private RenderFragment<IgbGridEmptyTemplateContext> addTextTemplate = (context) =>
{
return @<span>Adding Row</span>;
};
}
Customizing Buttons
É possível personalizar os botões da sobreposição de edição de linha usando o RowEditActions
modelo.
<IgbTreeGrid Data="data" PrimaryKey="ProductID" AutoGenerate="false" RowEditable="true" RowEditActionsTemplateScript="rowEditActionsTemplate">
</IgbTreeGrid>
//In JavaScript:
igRegisterScript("rowEditActionsTemplate", (endRowEdit) => {
var html = window.igTemplating.html;
return html`<div class="row-actions">
<button @click="${evt => endRowEdit.implicit(false, evt)}">Cancel</button>
<button @click="${evt => endRowEdit.implicit(true, evt)}">Apply</button>
</div>`
}, false);
Observação: o uso
RowEditActions
do modelo alterará as ações de edição para editar e adicionar botões de sobreposição.
Styling
A interface do usuário de adição de linha compreende os botões nas IgbActionStrip
ações de edição, os editores de edição e a sobreposição, bem como a barra de lanches que permite que os usuários finais rolem até a linha recém-adicionada. Para estilizar esses componentes, você pode consultar estes guias abrangentes em seus respectivos tópicos:
API References
RowEditable
RowEditEnter
RowEdit
RowEditDone
RowEditCancel
EndEdit
PrimaryKey
IgbTreeGrid
Additional Resources
Nossa comunidade é ativa e sempre acolhedora para novas ideias.