Blazor Hierarchical Grid Row Adding

O recurso Ignite UI for Blazor Adição de Linha em Blazor Grade Hierárquica permite que os usuários insiram e enviem novos registros de dados sem navegar para um formulário ou página separada. Com o IgbHierarchicalGrid, os usuários podem manipular dados por meio da adição de linhas embutidas e uma API poderosa para operações CRUD. Adicione um IgbActionStrip componente com ações de edição ativadas no modelo da grade. Depois disso, passe o mouse sobre uma linha e use o botão fornecido. Por fim, pressione ALT + + para gerar a linha adicionando a interface do usuário.

Blazor Hierarchical Grid Row Adding Example

Row Adding Usage

Em seguida, defina uma fonte de IgbHierarchicalGrid 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.

<IgbHierarchicalGrid AutoGenerate="false" Id="hGrid" PrimaryKey="Debut" RowEditable="true">
    <IgbColumn Field="Artist" Header="Artist" DataType="GridColumnDataType.String"></IgbColumn>
    <IgbColumn Field="HasGrammyAward" Header="Has Grammy Award" DataType="GridColumnDataType.Boolean"></IgbColumn>
    <IgbColumn Field="Debut" Header="Debut" DataType="GridColumnDataType.Number"></IgbColumn>
    <IgbColumn Field="GrammyNominations" Header="Grammy Nominations" DataType="GridColumnDataType.Number"></IgbColumn>
    <IgbColumn Field="GrammyAwards" Header="Grammy Awards" DataType="GridColumnDataType.Number"></IgbColumn>

    <IgbActionStrip>
        <IgbGridEditingActions AddRow="true"></IgbGridEditingActions>
    </IgbActionStrip>
    
    <IgbRowIsland AutoGenerate="false" Key="Albums" PrimaryKey="USBillboard200" RowEditable="true">
        <IgbColumn Field="Album" Header="Album" DataType="GridColumnDataType.Number"></IgbColumn>
        <IgbColumn Field="LaunchDate" Header="Launch Date" DataType="GridColumnDataType.Date"></IgbColumn>
        <IgbColumn Field="BillboardReview" Header="Billboard Review" DataType="GridColumnDataType.Number"></IgbColumn>
        <IgbColumn Field="USBillboard200" Header="US Billboard 200" DataType="GridColumnDataType.Number"></IgbColumn>
        <IgbColumn Field="GrammyAwards" Header="Grammy Awards" DataType="GridColumnDataType.Number"></IgbColumn>

        <IgbRowIsland AutoGenerate="false" Key="Songs" PrimaryKey="Number" RowEditable="true">
            <IgbColumn Field="Number" Header="Number" DataType="GridColumnDataType.String"></IgbColumn>
            <IgbColumn Field="Title" DataType="GridColumnDataType.String"></IgbColumn>
            <IgbColumn Field="Released" DataType="GridColumnDataType.Date"></IgbColumn>
            <IgbColumn Field="Genre" DataType="GridColumnDataType.String"></IgbColumn>

            <IgbActionStrip>
                <IgbGridEditingActions AddRow="true"></IgbGridEditingActions>
            </IgbActionStrip>
        </IgbRowIsland>

        <IgbActionStrip>
            <IgbGridEditingActions AddRow="true"></IgbGridEditingActions>
        </IgbActionStrip>
    </IgbRowIsland>
</IgbHierarchicalGrid>

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 como false.

Observação: a IgbGridEditingActions entrada que controla a visibilidade do botão adicionar linha pode usar o contexto da faixa de ação (que é do tipo IgbRowType para ajustar quais registros o botão mostra.

O interno BaseTransactionService é fornecido IgbHierarchicalGrid 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

IgbHierarchicalGrid 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.

Usar BeginAddRowById requer que você especifique a linha a ser usada como contexto para a operação por its RowID (PK). Em seguida, o método funciona como se o usuário final tivesse clicado no botão de faixa de ação adicionar linha para a linha especificada, gerando a interface do usuário sob ela. Você também pode fazer com que a interface do usuário apareça como a primeira linha na grade, passando null para o primeiro parâmetro.

@code {
    await this.grid.BeginAddRowByIdAsync('ALFKI', false);  // Spawns the add row UI under the row with PK 'ALFKI'
    await this.grid.BeginAddRowByIdAsync(null, false);     // Spawns the add row UI as the first record
}

O beginAddRowByIndex método funciona de forma semelhante, mas exige que você especifique o índice no qual a interface do usuário deve ser gerada. Os valores permitidos variam entre 0 e o tamanho da exibição de dados - 1.

@code {
    await this.grid.BeginAddRowByIndexAsync(10);   // Spawns the add row UI at index 10
    await this.grid.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.
A IgbHierarchicalGrid rolagem para exibir totalmente a interface do usuário de adição de linha automaticamente.
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 hierárquica 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 IgbHierarchicalGrid. Em um IgbHierarchicalGrid 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é IgbHierarchicalGrid sua posição se não estiver em view.

ALT + +- Entra no modo de edição para adicionar uma linha

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 IgbHierarchicalGrid 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.

Ao gerar a interface do usuário para o IgbHierarchicalGrid, qualquer layout filho atualmente expandido para uma linha para a qual o usuário final clica no botão adicionar linha é recolhido.

Customizing Row Adding Overlay

Customizing Text

Personalizar o texto da linha adicionando sobreposição é possível usando o RowAddTextDirective.

<IgbHierarchicalGrid Data="data" PrimaryKey="ProductID" AutoGenerate="false" RowEditable="true" RowAddTextTemplate="addTextTemplate">
</IgbHierarchicalGrid>

@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.

<IgbHierarchicalGrid Data="data" PrimaryKey="ProductID" AutoGenerate="false" RowEditable="true" RowEditActionsTemplateScript="rowEditActionsTemplate">
</IgbHierarchicalGrid>

//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
IgbHierarchicalGrid

Additional Resources

Edição de grade hierárquica

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

Blazor Hierarchical Grid Row Adding