Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.

Blazor Edición de cuadrícula

La Ignite UI for Blazor admite la edición de celdas y filas con actualización por lotes. Tenga en cuenta que, por el momento, esto está limitado a columnas sin plantilla.

Blazor Grid Editing Example

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbDataGridModule),
                typeof(IgbGridColumnOptionsModule)
);
            await builder.Build().RunAsync();
        }
    }
}cs

using System;
using System.Collections.Generic;
using System.Linq;

namespace Infragistics.Samples
{
    public static class DataGenerator
    {
        readonly static string[] websites = { ".com", ".gov", ".edu", ".org" };
        readonly static string[] emails = { "gmail.com", "yahoo.com", "twitter.com" };
        readonly static string[] genders = { "male", "female" };
        readonly static string[] maleNames = { "Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce" };
        readonly static string[] femaleNames = { "Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally" };
        readonly static string[] lastNames = { "Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla" };
        readonly static string[] countries = { "USA", "UK", "France", "Canada", "Poland" };
        readonly static string[] citiesUS = { "New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas" };
        readonly static string[] citiesUK = { "London", "Liverpool", "Manchester" };
        readonly static string[] citiesFR = { "Paris", "Marseille", "Lyon" };
        readonly static string[] citiesCA = { "Toronto", "Vancouver", "Montreal" };
        readonly static string[] citiesPL = { "Krakow", "Warsaw", "Wroclaw", "Gdansk" };
        readonly static string[] citiesJP = { "Tokyo", "Osaka", "Kyoto", "Yokohama" };
        readonly static string[] citiesGR = { "Berlin", "Bonn", "Cologne", "Munich", "Hamburg" };
        readonly static string[] roadSuffixes = { "Road", "Street", "Way" };
        readonly static string[] roadNames = { "Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill" };

        public static Random Rand = new Random();

        public static string GetWebsite()
        {
            return GetItem(websites);
        }

        public static string GetEmail()
        {
            return GetItem(emails);
        }

        public static double GetNumber(double min, double max)
        {
            return Math.Round(min + (Rand.NextDouble() * (max - min)));
        }

        public static int GetInteger(double min, double max)
        {
            return (int)GetNumber(min, max);
        }

        public static string GetPhone()
        {
            var phoneCode = GetNumber(100, 900);
            var phoneNum1 = GetNumber(100, 900);
            var phoneNum2 = GetNumber(1000, 9000);
            var phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2;
            return phone;
        }

        public static string GetGender()
        {
            return GetItem(genders);
        }

        public static string GetNameFirst(string gender)
        {
            if (gender == "male")
                return GetItem(maleNames);
            else
                return GetItem(femaleNames);
        }

        public static string GetNameLast()
        {
            return GetItem(lastNames);
        }

        public static string GetItem(string[] array)
        {
            var index = (int)Math.Round(GetNumber(0, array.Length - 1));
            return array[index];
        }

        public static string GetCountry()
        {
            return GetItem(countries);
        }

        public static string GetCity(string country)
        {
            if (country == "Canada")
            {
                return GetItem(citiesCA);
            }
            else if (country == "France")
            {
                return GetItem(citiesFR);
            }
            else if (country == "Poland")
            {
                return GetItem(citiesPL);
            }
            else if (country == "USA")
            {
                return GetItem(citiesUS);
            }
            else if (country == "Japan")
            {
                return GetItem(citiesJP);
            }
            else if (country == "Germany")
            {
                return GetItem(citiesGR);
            }
            else
            { // if (country === "United Kingdom") {
                return GetItem(citiesUK);
            }
        }

        public static string GetStreet()
        {
            var num = Math.Round(GetNumber(100, 300)).ToString();
            var road = GetItem(roadNames);
            var suffix = GetItem(roadSuffixes);
            return num + " " + road + " " + suffix;
        }

        public static DateTime GetBirthday()
        {
            var year = DateTime.Now.Year - GetInteger(30, 50);
            var month = GetNumber(10, 12);
            var day = GetNumber(20, 27);
            return new DateTime(year, (int)month, (int)day);
        }

        public static DateTime GetDate()
        {
            var year = DateTime.Now.Year;
            var month = GetNumber(10, 12);
            var day = GetNumber(20, 27);
            return new DateTime(year, (int)month, (int)day);
        }

        public static string Pad(int num, int size)
        {
            var s = num + "";
            while (s.Length < size)
            {
                s = "0" + s;
            }
            return s;
        }

        public static string GetPhotoMale(int id)
        {
            return "https://static.infragistics.com/xplatform/images/people/GUY" + Pad(id, 2) + ".png";
        }

        public static string GetPhotoFemale(int id)
        {
            return "https://static.infragistics.com/xplatform/images/people/GIRL" + Pad(id, 2) + ".png";
        }

        private static int maleCount = 0;
        private static int femaleCount = 0;
        public static string GetPhoto(string gender)
        {
            if (gender == "male")
            {
                maleCount++;
                if (maleCount > 24) maleCount = 1;
                return GetPhotoMale(maleCount);
            }
            else
            {
                femaleCount++;
                if (femaleCount > 24) femaleCount = 1;
                return GetPhotoFemale(femaleCount);
            }
        }

        public static string GetGenderPhoto(string gender)
        {
            return "https://static.infragistics.com/xplatform/images/genders/" + gender + ".png";
        }

        public static string GetCountryFlag(string country)
        {
            return "https://static.infragistics.com/xplatform/images/flags/" + country + ".png";
        }

        public static string GetIncomeRange(double salary)
        {
            if (salary < 50000)
            {
                return "Low";
            }
            else if (salary < 100000)
            {
                return "Average";
            }
            else
            {
                return "High";
            }
        }

    }

}cs

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;

namespace Infragistics.Samples
{
    public class ObsEmployeeInfo : INotifyPropertyChanged
    {
        public string ID { get; set; }
        public string Address { get; set; }
        public double Age { get; set; }
        public string Gender { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Name { get; set; }
        public string Street { get; set; }
        public string City { get; set; }
        public string Email { get; set; }
        public string Phone { get; set; }
        public string Photo { get; set; }
        public double Salary { get; set; }
        public double Sales { get; set; }
        public string Income { get; set; }
        public int Index { get; set; }

        public DateTime Birthday { get; set; }
        public ObservableCollection<ObsEmployeeProductivity> Productivity { get; set; }

        private string _Country;
        public string Country
        {
            get { return _Country; }
            set { if (_Country != value) { OnCountryChanged(value); } }
        }

        public string CountryFlag { get; set; }

        protected void OnCountryChanged(string countryName)
        {
            // syncronizing country name and country flag
            _Country = countryName;
            CountryFlag = DataGenerator.GetCountryFlag(countryName);
            City = DataGenerator.GetCity(countryName);
            OnPropertyChanged("Country");
        }

        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }

    public class ObsEmployeeProductivity
    {
        public double Value { get; set; }
        public int Week { get; set; }
    }

    public static class ObsEmployeeData
    {
        public static ObservableCollection<ObsEmployeeInfo> Create(int? count, bool? useProductivity)
        {
            if (count == null) count = 100;

            var employees = new ObservableCollection<ObsEmployeeInfo>();
            for (int i = 0; i < count; i++)
            {
                var age = Math.Round(DataGenerator.GetNumber(20, 40));
                var gender = DataGenerator.GetGender();
                var firstName = DataGenerator.GetNameFirst(gender);
                var lastName = DataGenerator.GetNameLast();
                var street = DataGenerator.GetStreet();
                var country = DataGenerator.GetCountry();
                var city = DataGenerator.GetCity(country);
                var email = firstName.ToLower() + "@" + DataGenerator.GetEmail();
                var photoPath = DataGenerator.GetPhoto(gender);

                var employee = new ObsEmployeeInfo
                {
                    Index = i,
                    Address = street + ", " + city,
                    Age = age,
                    Birthday = DataGenerator.GetBirthday(),
                    City = city,
                    Email = email,
                    Gender = gender,
                    ID = DataGenerator.Pad(1001 + i, 4),
                    FirstName = firstName,
                    LastName = lastName,
                    Name = firstName + " " + lastName,
                    Photo = photoPath,
                    Phone = DataGenerator.GetPhone(),
                    Street = DataGenerator.GetStreet(),
                    Salary = DataGenerator.GetNumber(40, 200) * 1000,
                    Sales = DataGenerator.GetNumber(200, 980) * 1000,
                };
                employee.Country = country;
                employee.Income = DataGenerator.GetIncomeRange(employee.Salary);

                if (useProductivity.HasValue && useProductivity.Value)
                {
                    employee.Productivity = GetProductivity(52);
                }
                employees.Add(employee);
            }

            return employees;
        }

        public static ObservableCollection<ObsEmployeeProductivity> GetProductivity(int weekCount)
        {
            var productivity = new ObservableCollection<ObsEmployeeProductivity>();

            for (var w = 1; w <= weekCount; w++)
            {
                var value = DataGenerator.GetNumber(-50, 50);
                var prod = new ObsEmployeeProductivity
                {
                    Value = value,
                    Week = w
                };
                productivity.Add(prod);
            };

            return productivity;
        }
    }
}cs


@using System.Collections.ObjectModel
@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="options horizontal">
        <button @onclick="OnCommitClick" disabled="@ButtonsDisabled">Commit</button>
        <button @onclick="OnUndoClick" disabled="@ButtonsDisabled">Undo</button>
        <button @onclick="OnRedoClick" disabled="@ButtonsDisabled">Redo</button>
        <label>
            Edit Mode:
            <select @bind="GridEditMode">
                <option>@EditModeType.None</option>
                <option>@EditModeType.Cell</option>
                <option>@EditModeType.CellBatch</option>
                <option>@EditModeType.Row</option>
            </select>
        </label>
        <label>
            Excel-style Editing
            <select @bind="GridEditModeClickAction">
                <option>@EditModeClickAction.SingleClick</option>
                <option>@EditModeClickAction.DoubleClick</option>
            </select>
        </label>
    </div>
    <div class="container vertical">
        @if (Data != null)
        {
            <div style="overflow: hidden">
                <IgbDataGrid Height="100%" Width="100%" @ref="DataGridRef"
                             EditModeClickAction="@GridEditModeClickAction"
                             DefaultColumnMinWidth="120"
                             AutoGenerateColumns="false"
                             DataSource="Data"
                             EditMode="@GridEditMode"
                             ActivationMode="@GridActivationMode.Cell"
                             SelectionMode="@DataGridSelectionMode.SingleRow"
                             SelectionBehavior="@GridSelectionBehavior.ModifierBased"
                             IsColumnOptionsEnabled="true"
                             RowEditStarted="OnRowEditStarted"
                             RowEditEnded="OnRowEditEnded">
                    <IgbTextColumn Field="Name" Width="@("*>150")" />
                    <IgbTextColumn Field="Street" HeaderText="Street" Width="@("*>160")" />
                    <IgbTextColumn Field="City" HeaderText="City" Width="@("*>120")" />
                    <IgbNumericColumn Field="Salary" HeaderText="Salary" PositivePrefix="$" ShowGroupingSeparator="true" Width="@("*>120")" />
                    <IgbImageColumn IsEditable="false" Field="Photo" HeaderText="Photo" ContentOpacity="1" HorizontalAlignment="@CellContentHorizontalAlignment.Center" Width="@("*>110")" />
                    <IgbDateTimeColumn Field="Birthday" HeaderText="Date of Birth" Width="@("*>170")" />
                    <IgbTemplateColumn Field="ButtonColumn" HeaderText="Delete Row" CellUpdatingScript="onUpdatingTemplateColumn" />
                </IgbDataGrid>
            </div>
        }
    </div>
</div>

@code {

    public static IgbDataGrid DataGridRef;
    private EditModeClickAction GridEditModeClickAction = EditModeClickAction.SingleClick;
    private EditModeType _editMode;
    public EditModeType GridEditMode
    {
        get { return _editMode; }
        set
        {
            _editMode = value;
            if (_editMode == EditModeType.CellBatch)
            {
                ButtonsDisabled = false;
            }
            else
            {
                ButtonsDisabled = true;
            }
        }
    }

    private bool ButtonsDisabled { get; set; }

    public static ObservableCollection<ObsEmployeeInfo> Data { get; set; }

    protected override void OnInitialized()
    {

        Data = ObsEmployeeData.Create(100, false);
        this.GridEditMode = EditModeType.Cell;
    }

    private void OnCommitClick(MouseEventArgs e)
    {
        DataGridRef.CommitEdits();
        StateHasChanged();

    }

    private void OnUndoClick(MouseEventArgs e)
    {
        DataGridRef.Undo();
        StateHasChanged();

    }

    private void OnRedoClick(MouseEventArgs e)
    {
        DataGridRef.Redo();
        StateHasChanged();

    }

    private void OnRowEditEnded(IgbGridRowEditEndedEventArgs e)
    {
        if (_editMode == EditModeType.CellBatch)
        {
            ButtonsDisabled = false;
        }
        else
        {
            ButtonsDisabled = true;
        }
        StateHasChanged();
    }
    private void OnRowEditStarted(IgbGridRowEditStartedEventArgs e)
    {
        if (_editMode == EditModeType.CellBatch)
        {
            ButtonsDisabled = true;
        }
        else
        {
            ButtonsDisabled = false;
        }
        StateHasChanged();
    }

    [JSInvokable]
    public static void ButtonClickActionAtBlazorLevel(object parameter)
    {
        int param = int.Parse(parameter.ToString());
        var rowItem = DataGridRef.ActualDataSource.GetItemAtIndex(param);
        DataGridRef.RemoveItem(rowItem);
    }
}razor

function onUpdatingTemplateColumn(grid, args) {
    let content = args.content;
     
    var row = args.cellInfo.dataRow;

    if (content.childElementCount === 0) {
        var deleteButton = document.createElement("button");
        deleteButton.id = row;

        var deleteSpan = document.createElement("span");
        deleteSpan.textContent = "DELETE";

        deleteButton.appendChild(deleteSpan);

        deleteButton.onclick = function () {
            var button = deleteButton;
            DotNet.invokeMethodAsync('Infragistics.Samples', 'ButtonClickActionAtBlazorLevel', button.id);
        }

        content.appendChild(deleteButton);
    }
}

// this code allows calling above functions from a .razor file
igRegisterScript("onUpdatingTemplateColumn", onUpdatingTemplateColumn, false);js

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css

Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

Descripción general

La edición en la cuadrícula de datos de Blazor se configura mediante la EditMode opción de la cuadrícula Blazor. Esta propiedad tiene tres opciones diferentes, que se enumeran a continuación:

None: la edición no está habilitada.
Cell: Permitir que las celdas entren en modo de edición y confirmar el valor al salir del modo de edición.
CellBatch: permite que las celdas entren en modo de edición, pero los cambios se almacenarán en caché más tarde hasta que se confirmen.
Row: permite que las filas entren en modo de edición y confirmen el valor al salir.

Cuando se establece en CellBatch, para confirmar los cambios debe realizar el método commitEdits desde la cuadrícula. La cuadrícula pondrá en cursiva las celdas hasta que se confirmen, lo que proporciona control sobre cuándo enviar los cambios a la fuente de datos.

Además, el manejo de errores se puede realizar conectando el evento onCellValueChanging e inspeccionando nuevos valores antes de confirmarlos. La cuadrícula expone un método setEditError que puede generar un mensaje de error. Esto mantiene la celda en modo de edición hasta que se ingresa un valor válido. De lo contrario, se puede ejecutar el método rejectEdit de la cuadrícula para revertir el valor no válido. Si no se encuentra ningún valor no válido, también puede confirmar los cambios llamando al método acceptEdit de la cuadrícula.

Las confirmaciones se pueden aprobar o rechazar en el nivel de la grilla conectando onDataCommitting a través de los métodos acceptCommit o rejectCommit pasando el argumento del evento commitID como parámetro. Este evento también expone una colección changes que almacena todas las modificaciones antes de confirmarse. Por ejemplo, puede verificar si una confirmación proviene de una operación de agregar, actualizar o eliminar a través de la propiedad TransactionType expuesta en la colección changes y realizar una acceptCommit o rejectCommit cuando sea necesario.

Excel Style Editing

EditOnKeyPress le permite comenzar a editar instantáneamente al escribir de manera similar a como se comporta Excel. Además, puede configurar la propiedad EditModeClickAction en SingleClick para permitir a los usuarios editar celdas rápidamente mientras navegan a otras celdas. De forma predeterminada, es necesario hacer doble clic para ingresar al modo de edición.

Code Snippet

A continuación se muestra cómo configurar la edición en la cuadrícula de datos y la confirmación de los datos.

<IgbDataGrid Height="100%" Width="100%" @ref="DataGridRef"
    DataSource="DataSource"
    EditMode="EditModeType.CellBatch" />
<button @onclick="OnCommitClick">Commit Data</button>

@code {
    public IgbDataGrid DataGridRef;

    private void OnCommitClick(MouseEventArgs e)
    {
        this.DataGridRef.CommitEdits();
    }
}
razor

Undo/Redo batch changes

A continuación se muestra cómo revertir los cambios mientras la actualización por lotes está habilitada.

<IgbDataGrid Height="100%" Width="100%" @ref="DataGridRef"
    DataSource="DataSource"
    EditMode="EditModeType.CellBatch" />
<button @onclick="OnUndoClick">Undo</button>
<button @onclick="OnRedoClick">Redo</button>

@code {
    public IgbDataGrid DataGridRef;

    private void OnUndoClick(MouseEventArgs e)
    {
        this.DataGridRef.Undo();
    }

    private void OnRedoClick(MouseEventArgs e)
    {
        this.DataGridRef.Redo();
    }
}
razor

Error Validation and Commit Integrity

A continuación se muestra cómo incorporar el error al verificar si las celdas están vacías al salir del modo de edición y se aceptan confirmaciones que provienen únicamente de celdas actualizadas.

<IgbDataGrid Height="100%" Width="100%"
    @ref="DataGridRef"
    CellValueChanging="OnCellValueChanging"
    DataCommitting="OnDataCommitting">
 </IgbDataGrid>

@code {
    public IgbDataGrid DataGridRef;

    public void OnCellValueChanging(IgbGridCellValueChangingEventArgs e)
    {
        //check if value is empty upon exiting edit mode.
        if (e.NewValue == "")
        {
            this.DataGridRef.SetEditError(e.EditID, "Error, cell is empty");
            //or revert changes
            this.DataGridRef.RejectEdit(e.EditID);
        }
        else
        {
            this.DataGridRef.AcceptEdit(e.EditID);
        }
    }

    public void OnDataCommitting(IgbGridDataCommittingEventArgs e)
    {
        if (e.Changes[0].TransactionType == TransactionType.Update)
        {
            //commit was passed
            this.DataGridRef.AcceptCommit(e.CommitID);
        }
        else
        {
            //commit was prevented
            this.DataGridRef.RejectCommit(e.CommitID);
        }
    }
}
razor

API References

CellBatch
EditModeClickAction
EditMode
SingleClick
TransactionType