Las operaciones de copia al portapapeles ahora están disponibles en IgbTreeGrid. Esta funcionalidad proporciona una manera rápida, fácil y personalizable de copiar datos de Blazor IgbTreeGrid a través de la selección de datos de múltiples celdas actual. El comportamiento del Portapapeles del sistema le brinda al usuario la capacidad de copiar datos de IgbTreeGrid a Excel u otros programas externos.
Ejemplo de portapapeles con cuadrícula de árbol Blazor
EXAMPLE
DATA
MODULES
RAZOR
JS
CSS
using System;
using System.Collections.Generic;
publicclassEmployeeBasicInfo
{
publicstring Address { get; set; }
publicdouble Age { get; set; }
publicstring City { get; set; }
publicstring Country { get; set; }
publicstring Fax { get; set; }
publicstring HireDate { get; set; }
publicdouble ID { get; set; }
publicstring Name { get; set; }
publicdouble ParentID { get; set; }
publicstring Phone { get; set; }
publicdouble PostalCode { get; set; }
publicstring Title { get; set; }
publicstring LastName { get; set; }
publicstring FullAddress { get; set; }
}
publicclassEmployeeBasicData// EmployeesFlatDetails
: List<EmployeeBasicInfo>
{
publicEmployeeBasicData()
{
this.Add(new EmployeeBasicInfo()
{
Address = @"Obere Str. 57",
Age = 55,
City = @"Berlin",
Country = @"Germany",
Fax = @"030-0076545",
HireDate = @"2008-03-20",
ID = 1,
Name = @"Johnathan Winchester",
ParentID = -1,
Phone = @"030-0074321",
PostalCode = 12209,
Title = @"Development Manager",
LastName = @"Winchester",
FullAddress = @"Obere Str. 57, Berlin, Germany"
});
this.Add(new EmployeeBasicInfo()
{
Address = @"Avda. de la Constitución 2222",
Age = 42,
City = @"México D.F.",
Country = @"Mexico",
Fax = @"(51) 555-3745",
HireDate = @"2014-01-22",
ID = 4,
Name = @"Ana Sanders",
ParentID = -1,
Phone = @"(5) 555-4729",
PostalCode = 5021,
Title = @"CEO",
LastName = @"Sanders",
FullAddress = @"Avda. de la Constitución 2222, México D.F., Mexico"
});
this.Add(new EmployeeBasicInfo()
{
Address = @"Mataderos 2312",
Age = 49,
City = @"México D.F.",
Country = @"Mexico",
Fax = @"(5) 555-3995",
HireDate = @"2014-01-22",
ID = 18,
Name = @"Victoria Lincoln",
ParentID = -1,
Phone = @"(5) 555-3932",
PostalCode = 5023,
Title = @"Accounting Manager",
LastName = @"Lincoln",
FullAddress = @"Mataderos 2312, México D.F., Mexico"
});
this.Add(new EmployeeBasicInfo()
{
Address = @"120 Hanover Sq.",
Age = 61,
City = @"London",
Country = @"UK",
Fax = @"(171) 555-6750",
HireDate = @"2010-01-01",
ID = 10,
Name = @"Yang Wang",
ParentID = -1,
Phone = @"(171) 555-7788",
PostalCode = 39000,
Title = @"Localization Manager",
LastName = @"Wang",
FullAddress = @"120 Hanover Sq., London, UK"
});
this.Add(new EmployeeBasicInfo()
{
Address = @"Berguvsvägen 8",
Age = 43,
City = @"Luleå",
Country = @"Sweden",
Fax = @"0921-12 34 67",
HireDate = @"2011-06-03",
ID = 3,
Name = @"Michael Burke",
ParentID = 1,
Phone = @"0921-12 34 65",
PostalCode = 29000,
Title = @"Senior Software Developer",
LastName = @"Burke",
FullAddress = @"Berguvsvägen 8, Luleå, Sweden"
});
this.Add(new EmployeeBasicInfo()
{
Address = @"Forsterstr. 57",
Age = 29,
City = @"Mannheim",
Country = @"Germany",
Fax = @"0621-08924",
HireDate = @"2009-06-19",
ID = 2,
Name = @"Thomas Anderson",
ParentID = 1,
Phone = @"0621-08460",
PostalCode = 68306,
Title = @"Senior Software Developer",
LastName = @"Anderson",
FullAddress = @"Forsterstr. 57, Mannheim, Germany"
});
this.Add(new EmployeeBasicInfo()
{
Address = @"24, place Kléber",
Age = 31,
City = @"Strasbourg",
Country = @"France",
Fax = @"88.60.15.32",
HireDate = @"2014-08-18",
ID = 11,
Name = @"Monica Reyes",
ParentID = 1,
Phone = @"88.60.15.31",
PostalCode = 67000,
Title = @"Software Development Team Lead",
LastName = @"Reyes",
FullAddress = @"24, place Kléber, Strasbourg, France"
});
this.Add(new EmployeeBasicInfo()
{
Address = @"C/ Araquil, 67",
Age = 35,
City = @"Madrid",
Country = @"Spain",
Fax = @"(911) 555 91 99",
HireDate = @"2015-09-17",
ID = 6,
Name = @"Roland Mendel",
ParentID = 11,
Phone = @"(91) 555 22 82",
PostalCode = 28023,
Title = @"Senior Software Developer",
LastName = @"Mendel",
FullAddress = @"C/ Araquil, 67, Madrid, Spain"
});
this.Add(new EmployeeBasicInfo()
{
Address = @"12, rue des Bouchers",
Age = 44,
City = @"Marseille",
Country = @"France",
Fax = @"91.24.45.41",
HireDate = @"2009-10-11",
ID = 12,
Name = @"Sven Cooper",
ParentID = 11,
Phone = @"91.24.45.40",
PostalCode = 13008,
Title = @"Senior Software Developer",
LastName = @"Cooper",
FullAddress = @"12, rue des Bouchers, Marseille, France"
});
this.Add(new EmployeeBasicInfo()
{
Address = @"23 Tsawassen Blvd.",
Age = 44,
City = @"Tsawassen",
Country = @"Canada",
Fax = @"(604) 555-3745",
HireDate = @"2014-04-04",
ID = 14,
Name = @"Laurence Johnson",
ParentID = 4,
Phone = @"(604) 555-4729",
PostalCode = 19000,
Title = @"Director",
LastName = @"Johnson",
FullAddress = @"23 Tsawassen Blvd., Tsawassen, Canada"
});
this.Add(new EmployeeBasicInfo()
{
Address = @"Fauntleroy Circus",
Age = 25,
City = @"London",
Country = @"UK",
Fax = @"(125) 555-3798",
HireDate = @"2017-11-9",
ID = 5,
Name = @"Elizabeth Richards",
ParentID = 4,
Phone = @"(171) 555-1212",
PostalCode = 30000,
Title = @"Vice President",
LastName = @"Richards",
FullAddress = @"Fauntleroy Circus, London, UK"
});
this.Add(new EmployeeBasicInfo()
{
Address = @"Cerrito 333",
Age = 39,
City = @"Buenos Aires",
Country = @"Argentina",
Fax = @"(121) 135-4892",
HireDate = @"2010-03-22",
ID = 13,
Name = @"Trevor Ashworth",
ParentID = 5,
Phone = @"(1) 135-5555",
PostalCode = 1010,
Title = @"Director",
LastName = @"Ashworth",
FullAddress = @"Cerrito 333, Buenos Aires, Argentina"
});
this.Add(new EmployeeBasicInfo()
{
Address = @"Sierras de Granada 9993",
Age = 44,
City = @"México D.F.",
Country = @"Mexico",
Fax = @"(153) 555-7293",
HireDate = @"2014-04-04",
ID = 17,
Name = @"Antonio Moreno",
ParentID = 18,
Phone = @"(5) 555-3392",
PostalCode = 5022,
Title = @"Senior Accountant",
LastName = @"Moreno",
FullAddress = @"Sierras de Granada 9993, México D.F., Mexico"
});
this.Add(new EmployeeBasicInfo()
{
Address = @"Hauptstr. 29",
Age = 50,
City = @"Sao Paulo",
Country = @"Brazil",
Fax = @"(531) 555-6691",
HireDate = @"2007-11-18",
ID = 7,
Name = @"Pedro Rodriguez",
ParentID = 10,
Phone = @"0452-076545",
PostalCode = 3012,
Title = @"Senior Localization Developer",
LastName = @"Rodriguez",
FullAddress = @"Hauptstr. 29, Sao Paulo, Brazil"
});
this.Add(new EmployeeBasicInfo()
{
Address = @"Av. dos Lusíadas, 23",
Age = 27,
City = @"Bern",
Country = @"Switzerland",
Fax = @"(271) 335-357",
HireDate = @"2016-02-19",
ID = 8,
Name = @"Casey Harper",
ParentID = 10,
Phone = @"(11) 555-7647",
PostalCode = 40000,
Title = @"Senior Localization",
LastName = @"Harper",
FullAddress = @"Av. dos Lusíadas, 23, Bern, Switzerland"
});
this.Add(new EmployeeBasicInfo()
{
Address = @"Berkeley Gardens 12",
Age = 25,
City = @"London",
Country = @"UK",
Fax = @"(171) 555-9199",
HireDate = @"2017-11-09",
ID = 15,
Name = @"Patricia Simpson",
ParentID = 7,
Phone = @"(171) 555-2282",
PostalCode = 26000,
Title = @"Localization Intern",
LastName = @"Simpson",
FullAddress = @"Berkeley Gardens 12, London, UK"
});
this.Add(new EmployeeBasicInfo()
{
Address = @"Walserweg 21",
Age = 39,
City = @"Aachen",
Country = @"Germany",
Fax = @"0241-059428",
HireDate = @"2010-03-22",
ID = 9,
Name = @"Francisco Chang",
ParentID = 7,
Phone = @"0241-039123",
PostalCode = 52066,
Title = @"Localization Intern",
LastName = @"Chang",
FullAddress = @"Walserweg 21, Aachen, Germany"
});
this.Add(new EmployeeBasicInfo()
{
Address = @"35 King George",
Age = 25,
City = @"London",
Country = @"UK",
Fax = @"(171) 555-3373",
HireDate = @"2018-03-18",
ID = 16,
Name = @"Peter Lewis",
ParentID = 7,
Phone = @"(171) 555-0297",
PostalCode = 48000,
Title = @"Localization Intern",
LastName = @"Lewis",
FullAddress = @"35 King George, London, UK"
});
}
}cs
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 modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync 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(IgbInputModule),
typeof(IgbPropertyEditorPanelModule),
typeof(IgbTreeGridModule),
typeof(IgbSwitchModule),
typeof(IgbButtonModule)
);
await builder.Build().RunAsync();
}
}
}cs
@using IgniteUI.Blazor.Controls
@inject IJSRuntime JS<divclass="container vertical"><divclass="options vertical"><divclass="options horizontal"style="gap:50px;"><IgbInputonkeyup="inputChange()"id="input"><spanslot="prefix">Change copy separator:</span><spanslot="helper-text">The default value is a single tabulation.</span></IgbInput><IgbSwitchChecked=trueonclick="toggleClipboardOperations()"id="copyEnable">Grid copy behavior</IgbSwitch><IgbSwitchChecked=trueonclick="toggleHeaderCopy()"id="headerCopy">Copying of header labels</IgbSwitch><IgbSwitchChecked=trueonclick="toggleFormatterCopy()"id="formatterCopy">Copying column formatters</IgbSwitch><IgbButtonChecked=trueonclick="clearSelection()"id="btn">Clear Selection</IgbButton></div></div><divclass="container vertical fill"><IgbTreeGridAutoGenerate="false"Name="treeGrid"
@ref="treeGrid"Id="grid"Data="EmployeesData"PrimaryKey="ID"ForeignKey="ParentID"RenderedScript="WebTreeGridClipboardCustomOperationsRendered"ColumnInitScript="WebTreeGridClipboardCustomOperationsColumnInit"><IgbColumnField="ID"DataType="GridColumnDataType.Number"Sortable="true"></IgbColumn><IgbColumnField="Name"DataType="GridColumnDataType.String"Sortable="true"DisableHiding="true"></IgbColumn><IgbColumnField="Title"DataType="GridColumnDataType.String"Sortable="true"DisableHiding="true"></IgbColumn><IgbColumnField="HireDate"DataType="GridColumnDataType.Date"Sortable="true"Hidden="true"></IgbColumn><IgbColumnField="Age"DataType="GridColumnDataType.Number"Sortable="true"Hidden="true"></IgbColumn><IgbColumnField="Address"DataType="GridColumnDataType.String"Sortable="true"></IgbColumn><IgbColumnField="City"DataType="GridColumnDataType.String"Sortable="true"></IgbColumn><IgbColumnField="Country"DataType="GridColumnDataType.String"Sortable="true"></IgbColumn><IgbColumnField="Fax"DataType="GridColumnDataType.String"Sortable="true"></IgbColumn><IgbColumnField="PostalCode"Header="Postal Code"DataType="GridColumnDataType.String"Sortable="true"></IgbColumn><IgbColumnField="Phone"DataType="GridColumnDataType.String"Sortable="true"></IgbColumn></IgbTreeGrid></div></div>@code {private IgbTreeGrid treeGrid;
private EmployeeBasicData _EmployeesData = null;
public EmployeeBasicData EmployeesData
{
get
{
if (_EmployeesData == null)
{
_EmployeesData = new EmployeeBasicData();
}
return _EmployeesData;
}
}
}razor
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Blazor completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Funcionalidad
El comportamiento de copia funciona con la interacción predeterminada definida por el navegador y el sistema operativo. Así, para los comportamientos de copiar y pegar, estos son:
Basado en Windows/Unix
Ctrl + C / Ctrl + Ins como atajo de teclado
Ctrl + V / Shift + Ins como atajo de teclado
Copiar acción a través del menú del navegador.
Mac OS
⌘ Cmd + C como atajo de teclado
⌘ Cmd + V como atajo de teclado
Copiar acción a través del menú del navegador.
Limitaciones
Tanto los eventos de corte como los de copia no son compatibles de forma nativa con Internet Explorer. La excepción es el evento de pegado (IE 11), que se emite pero no expone la propiedad ClipboardData en el evento.
Para copiar celdas en IE 11, puede utilizar la selección del teclado. Mantenga presionada la tecla Mayús para realizar una selección de varias celdas, presione Ctrl + C para copiar.
El comportamiento de copia está deshabilitado mientras la cuadrícula está en modo de edición.
La versión actual de esta función cubre solo el comportamiento de copia desde la cuadrícula. Más adelante planeamos exponer el comportamiento paste dentro de la cuadrícula.
Uso de API
Exponemos la propiedad ClipboardOptions, que maneja las siguientes opciones:
Enabled Habilita/deshabilita la copia de celdas seleccionadas.
CopyHeaders Incluye los encabezados asociados al copiar.
CopyFormatters Aplique cualquier formateador de columna existente a los datos copiados.
Separator El separador de cadena que se utilizará para formatear los datos en el portapapeles. El valor predeterminado es /t
Excel puede detectar automáticamente texto separado por tabulaciones (delimitado por tabulaciones /t) y pegar correctamente los datos en columnas separadas. Cuando el formato de pegado no funciona y todo lo que pega aparece en una sola columna, entonces el delimitador de Excel está configurado en otro carácter o su texto usa espacios en lugar de tabulaciones.
GridCopy Se emite cuando se ejecuta una operación de copia. Se activa solo si el comportamiento de copia está habilitado a través de ClipboardOptions.
Recursos adicionales
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.