Blazor Grid Row Adding

O recurso de Adição de Linhas Ignite UI for Blazor no Blazor Grid permite que os usuários insiram e enviem novos registros de dados sem precisar navegar para um formulário ou página separado. Com issoIgbGrid, os usuários podem manipular dados por meio de adição de linhas inline e uma API poderosa para operações CRUD. Adicione umIgbActionStrip componente com ações de edição ativadas no template da grade. Depois disso, passe o mouse por uma fileira e use o botão fornecido. Por fim, pressione ALT + + para gerar a linha adicionando a interface.

Blazor Grid Row Adding Example

Row Adding Usage

Depois, defina umIgbGrid com a fonte de dados vinculada,RowEditable definido como verdadeiro e umIgbActionStrip componente com ações de edição ativadas. OAddRow input controla a visibilidade do botão que gera a linha de interface adicionada.

<IgbGrid AutoGenerate="false" Id="grid" Data="NwindData" PrimaryKey="ProductID" RowEditable="true">
    <IgbColumn Field="ProductID" Header="Product ID" DataType="GridColumnDataType.Number"></IgbColumn>
    <IgbColumn Field="ReorderLevel" Header="Reorder Level" DataType="GridColumnDataType.Number"></IgbColumn>
    <IgbColumn Field="ProductName" Header="Product Name" DataType="GridColumnDataType.String"></IgbColumn>
    <IgbColumn Field="UnitsInStock" Header="Units In Stock" DataType="GridColumnDataType.Number"></IgbColumn>
    <IgbColumn Field="OrderDate" Header="Order Date" DataType="GridColumnDataType.Date"></IgbColumn>
    <IgbColumn Field="Discontinued" Header="Discontinued" DataType="GridColumnDataType.Boolean"></IgbColumn>

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

Observação: a configuração da chave primária é obrigatória para operações de adição de linha.

Nota: Todas as colunas, exceto a chave principal, podem ser editadas na linha que adiciona a interface por padrão. Se você quiser desativar a edição para uma coluna específica, então precisa definir aEditable entrada da coluna parafalse.

Nota: OIgbGridEditingActions input que controla a visibilidade do botão de adicionar linha pode usar o contexto action strip (que é do tipoIgbRowType para ajustar finamente qual registro o botão mostra).

O internoBaseTransactionService é fornecidoGrid automaticamente. Ele mantém as mudanças pendentes de célula até que o estado da linha seja submetido ou cancelado.

Start Row Adding Programmatically

Gridpermite gerar programaticamente a interface de adicionar linha usando dois métodos públicos diferentes. Uma que aceita um ID de linha para especificar a linha sob a qual a interface deve surgir e outra que funciona por índice. Você pode usar esses métodos para gerar a interface em qualquer lugar dentro da visualização de dados atual. Alterar a página ou especificar uma linha que, por exemplo, é filtrada não é suportado.

UsarBeginAddRowById exige que você especifique a linha a ser usada como contexto para a operação por itsRowID (PK). O método então funciona como se o usuário final tivesse clicado no botão de adicionar linha para a linha especificada, gerando a interface sob ela. Você também pode fazer a interface aparecer como a primeira fileira da grade passandonull pelo 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
}

OBeginAddRowByIndex método funciona de forma semelhante, mas exige que você especifique o índice onde a interface deve aparecer. Os valores permitidos variam entre 0 e o tamanho da visualizaçã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.
OsGrid rolos para exibir completamente a interface de adicionar 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 para obter mais informações.

Após uma nova linha ser adicionada através da interface de adicionar linha, sua posição e/ou visibilidade é determinada pelo estado de ordenação, filtragem e agrupamento doGrid. Em umGrid que não tem nenhum desses estados aplicado, aparece como o último registro. Uma barra de lanche é exibida brevemente, contendo um botão que o usuário final pode usar para deslizarGrid até sua posição caso não esteja à vista.

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 doGrid for modificada. Quaisquer alterações feitas pelo usuário final são enviadas. Operações que alteram a visão de dados incluem, mas não se limitam a, ordenaçã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 oRowAddTextTemplate.

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

@code {
    private RenderFragment<IgbGridEmptyTemplateContext> addTextTemplate = (context) =>
    {
        return @<span>Adding Row</span>;
    };
}

Customizing Buttons

Personalizar os botões da sobreposição de edição de linhas é possível usando oRowEditActions modelo.

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

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

Nota: UsarRowEditActions o template vai alterar as ações de edição tanto para edição quanto para adicionar botões de sobreposição.

Styling

A interface de adicionar linhas inclui os botões nasIgbActionStrip ações de edição, os editores de edição e a sobreposição, além da barra de lanche, que permite aos usuários finais rolar até a linha recém-adicionada. Para estilizar esses componentes, você pode consultar estes guias completos em seus respectivos temas:

API References

RowEditable
RowEditEnter
RowEdit
RowEditDone
RowEditCancel
EndEdit
PrimaryKey
IgbGrid

Additional Resources

Edição de grade

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

Blazor Grid Row Adding