La función de selección de filas Ignite UI for Blazor en Blazor Tree Grid permite a los usuarios seleccionar, resaltar o anular la selección de una o varias filas de datos de forma interactiva. Hay varios modos de selección disponibles en IgbTreeGrid:
En el ejemplo siguiente se muestran los cuatro tipos de IgbTreeGrid Es decir, que Selección de filas comportamiento. Utilice los botones de abajo para activar cada uno de los modos de selección disponibles. Se proporcionará una breve descripción de cada interacción de botón a través de un cuadro de mensaje de snackbar. Utilice el botón de cambio para esconder o mostrar la casilla de verificación Selector de filas.
EXAMPLE
DATA
MODULES
RAZOR
CSS
using System;
using System.Collections.Generic;
publicclassEmployeesFlatDataItem
{
publicdouble Age { get; set; }
publicstring HireDate { get; set; }
publicdouble ID { get; set; }
publicstring Name { get; set; }
publicstring Phone { get; set; }
publicbool OnPTO { get; set; }
publicdouble ParentID { get; set; }
publicstring Title { get; set; }
}
publicclassEmployeesFlatData
: List<EmployeesFlatDataItem>
{
publicEmployeesFlatData()
{
this.Add(new EmployeesFlatDataItem()
{
Age = 55,
HireDate = @"2008-03-20",
ID = 1,
Name = @"Johnathan Winchester",
Phone = @"0251-031259",
OnPTO = false,
ParentID = -1,
Title = @"Development Manager"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 42,
HireDate = @"2014-01-22",
ID = 4,
Name = @"Ana Sanders",
Phone = @"(21) 555-0091",
OnPTO = true,
ParentID = -1,
Title = @"CEO"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 49,
HireDate = @"2014-01-22",
ID = 18,
Name = @"Victoria Lincoln",
Phone = @"(071) 23 67 22 20",
OnPTO = true,
ParentID = -1,
Title = @"Accounting Manager"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 61,
HireDate = @"2010-01-01",
ID = 10,
Name = @"Yang Wang",
Phone = @"(21) 555-0091",
OnPTO = false,
ParentID = -1,
Title = @"Localization Manager"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 43,
HireDate = @"2011-06-03",
ID = 3,
Name = @"Michael Burke",
Phone = @"0452-076545",
OnPTO = true,
ParentID = 1,
Title = @"Senior Software Developer"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 29,
HireDate = @"2009-06-19",
ID = 2,
Name = @"Thomas Anderson",
Phone = @"(14) 555-8122",
OnPTO = false,
ParentID = 1,
Title = @"Senior Software Developer"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 31,
HireDate = @"2014-08-18",
ID = 11,
Name = @"Monica Reyes",
Phone = @"7675-3425",
OnPTO = false,
ParentID = 1,
Title = @"Software Development Team Lead"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 35,
HireDate = @"2015-09-17",
ID = 6,
Name = @"Roland Mendel",
Phone = @"(505) 555-5939",
OnPTO = false,
ParentID = 11,
Title = @"Senior Software Developer"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 44,
HireDate = @"2009-10-11",
ID = 12,
Name = @"Sven Cooper",
Phone = @"0695-34 67 21",
OnPTO = true,
ParentID = 11,
Title = @"Senior Software Developer"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 44,
HireDate = @"2014-04-04",
ID = 14,
Name = @"Laurence Johnson",
Phone = @"981-443655",
OnPTO = false,
ParentID = 4,
Title = @"Director"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 25,
HireDate = @"2017-11-09",
ID = 5,
Name = @"Elizabeth Richards",
Phone = @"(2) 283-2951",
OnPTO = true,
ParentID = 4,
Title = @"Vice President"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 39,
HireDate = @"2010-03-22",
ID = 13,
Name = @"Trevor Ashworth",
Phone = @"981-443655",
OnPTO = true,
ParentID = 5,
Title = @"Director"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 44,
HireDate = @"2014-04-04",
ID = 17,
Name = @"Antonio Moreno",
Phone = @"(505) 555-5939",
OnPTO = false,
ParentID = 18,
Title = @"Senior Accountant"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 50,
HireDate = @"2007-11-18",
ID = 7,
Name = @"Pedro Rodriguez",
Phone = @"035-640230",
OnPTO = false,
ParentID = 10,
Title = @"Senior Localization Developer"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 27,
HireDate = @"2016-02-19",
ID = 8,
Name = @"Casey Harper",
Phone = @"0342-023176",
OnPTO = true,
ParentID = 10,
Title = @"Senior Localization"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 25,
HireDate = @"2017-11-09",
ID = 15,
Name = @"Patricia Simpson",
Phone = @"069-0245984",
OnPTO = false,
ParentID = 7,
Title = @"Localization Intern"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 39,
HireDate = @"2010-03-22",
ID = 9,
Name = @"Francisco Chang",
Phone = @"(91) 745 6200",
OnPTO = false,
ParentID = 7,
Title = @"Localization Intern"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 25,
HireDate = @"2018-03-18",
ID = 16,
Name = @"Peter Lewis",
Phone = @"069-0245984",
OnPTO = true,
ParentID = 7,
Title = @"Localization Intern"
});
}
}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(IgbTreeGridModule),
typeof(IgbPropertyEditorPanelModule)
);
await builder.Build().RunAsync();
}
}
}cs
/*
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.
Configuración
Para configurar la selección de filas en el IgbTreeGrid, solo necesita establecer la RowSelection propiedad. Esta propiedad acepta la GridSelectionMode enumeración.
GridSelectionMode expone los siguientes modos:
Ninguno
Soltero
Múltiple
MultipleCascade
A continuación veremos cada uno de ellos con más detalle.
Ninguna selección
De forma predeterminada, la IgbTreeGrid selección de filas está deshabilitada (RowSelection es Ninguna). Por lo tanto, no puede seleccionar o anular la selección de una fila a través de la interacción con la interfaz de usuario, la única manera de completar estas acciones es usar los métodos de IgbTreeGrid API proporcionados.
Selección única
La selección de una sola fila ahora se puede configurar fácilmente; lo único que debe hacer es establecer RowSelection en la propiedad Single. Esto le brinda la oportunidad de seleccionar sólo una fila dentro de una cuadrícula. Puede seleccionar una fila haciendo clic en una celda o presionando la tecla de espacio cuando se enfoca en una celda de la fila y, por supuesto, puede seleccionar una fila haciendo clic en el campo selector de fila. Cuando se selecciona o deselecciona una fila, se emite el evento RowSelectionChanging.
Para habilitar la selección de varias filas en el IgbTreeGrid simplemente establezca la RowSelection propiedad en Multiple. Esto habilitará un campo selector de filas en cada fila y en el IgbTreeGrid encabezado. El selector de filas permite a los usuarios seleccionar varias filas, y la selección persiste a través del desplazamiento, la paginación y las operaciones de datos, como la ordenación y el filtrado. La fila también se puede seleccionar haciendo clic en una celda o presionando la tecla de espacio cuando una celda está enfocada. Si ha seleccionado una fila y hace clic en otra mientras mantiene presionada la tecla Mayús, esto seleccionará todo el rango de filas. En este modo de selección, al hacer clic en una sola fila, se anulará la selección de las filas seleccionadas anteriormente. Si hace clic mientras mantiene presionada la tecla ctrl, la fila se alternará y se conservará la selección anterior.
Para habilitar la selección de filas en cascada en el IgbTreeGrid simplemente establezca la RowSelection propiedad en MultipleCascade. Esto habilitará un campo selector de filas en cada fila y en el IgbTreeGrid encabezado. El selector de filas permite a los usuarios seleccionar varias filas que seleccionarían todos los elementos secundarios en el árbol de abajo. La selección persiste a través del desplazamiento, la paginación y las operaciones de datos, como la ordenación y el filtrado. La fila también se puede seleccionar haciendo clic en una celda o presionando la tecla de espacio cuando una celda está enfocada. Si ha seleccionado una fila y hace clic en otra mientras mantiene presionada la tecla Mayús, la selección de un registro principal seleccionará todos sus hijos, incluso si no están en el rango seleccionado. En este modo de selección, al hacer clic en una sola fila, se anulará la selección de las filas seleccionadas anteriormente. Si hace clic mientras mantiene presionada la tecla ctrl, la fila y sus elementos secundarios se alternarán y se conservará la selección anterior.
En este modo, el estado de selección de un padre depende completamente del estado de selección de sus hijos. Cuando un padre tiene algunos hijos seleccionados y algunos no seleccionados, su casilla de verificación está en un estado indeterminado.
Notas
La selección de filas activará el evento RowSelectionChanging. Este evento le brinda información sobre la nueva selección, la selección anterior y las filas que se agregaron y eliminaron de la selección anterior. Además, el evento es cancelable, por lo que esto le permite evitar la selección.
Cuando la selección de filas está habilitada, se muestran los selectores de filas, pero si no desea mostrarlos, puede configurar HideRowSelectors en verdadero.
Cuando cambia entre modos de selección de filas en tiempo de ejecución, esto borrará el estado de selección de filas anterior.
Uso de API
Seleccionar filas mediante programación
El siguiente fragmento de código se puede utilizar para seleccionar una o varias filas simultáneamente (a través de PrimaryKey). Además, el segundo parámetro de este método es una propiedad booleana mediante la cual puede elegir si la selección de fila anterior se borrará o no. La selección anterior se conserva de forma predeterminada.
Otro método de API útil que IgbTreeGrid proporciona es SelectAllRows. De forma predeterminada, este método seleccionará todas las filas de datos, pero si se aplica el filtrado, seleccionará solo las filas que coincidan con los criterios de filtro. Si llama al método con el parámetro false, siempre seleccionará todos los datos de la cuadrícula, SelectAllRows(false) incluso si se aplica el filtrado.
Nota Tenga en cuenta que SelectAllRows no seleccionará las filas que se eliminan.
Deseleccionar todas las filas
IgbTreeGrid Proporciona un DeselectAllRows método que, de forma predeterminada, anulará la selección de todas las filas de datos, pero si se aplica el filtrado, anulará la selección solo de las filas que coincidan con los criterios de filtro. Si llama al método con el parámetro false, siempre borrará todo el estado de selección de filas, DeselectAllRows(false) incluso si se aplica el filtrado.
Cómo obtener filas seleccionadas
Si necesita ver qué filas están seleccionadas actualmente, puede obtener sus ID de fila con el captador SelectedRows.
Puede crear selectores de encabezado y fila de plantilla en el IgbTreeGrid y también acceder a sus contextos, lo que proporciona una funcionalidad útil para diferentes escenarios.
De forma predeterminada, controla IgbTreeGrid todas las interacciones de selección de filas en el contenedor primario del selector de filas o en la propia fila, dejando solo la visualización de estado de la plantilla. Por lo general, la invalidación de la funcionalidad base debe realizarse mediante el evento RowSelectionChanging. En caso de que implemente una plantilla personalizada con un Click controlador que invalide la funcionalidad base, debe detener la propagación del evento para conservar el estado de fila correcto.
Plantilla de fila
Para crear una plantilla de selector de filas personalizada, dentro de la propiedad puede usar la IgbTreeGrid RowSelectorTemplate propiedad. Desde la plantilla se puede acceder a la variable de contexto proporcionada implícitamente, con propiedades que proporcionan información sobre el estado de la fila.
La propiedad selected muestra si la fila actual está seleccionada o no, mientras que la propiedad index se puede usar para acceder al índice de la fila.
igRegisterScript("WebGridRowSelectorTemplate", (ctx) => {
var html = window.igTemplating.html;
if (ctx.implicit.selected) {
return html`<divstyle="justify-content: space-evenly;display: flex;width: 70px;"><span> ${ctx.implicit.index}</span><igc-checkboxchecked></igc-checkbox></div>`;
} else {
return html`<divstyle="justify-content: space-evenly;display: flex;width: 70px;"><span> ${ctx.implicit.index}</span><igc-checkbox></igc-checkbox></div>`;
}
}, false);
razor
La rowID propiedad se puede utilizar para obtener una referencia de una IgbTreeGrid fila. Esto es útil cuando se implementa un click controlador en el elemento selector de filas.
Para crear una plantilla de selector de encabezado personalizada, dentro de la, puede usar la IgbTreeGrid HeadSelectorTemplate propiedad. Desde la plantilla se puede acceder a la variable de contexto proporcionada implícitamente, con propiedades que proporcionan información sobre el estado del encabezado.
La SelectedCount propiedad muestra cuántas filas están seleccionadas actualmente, mientras que totalCount muestra cuántas filas hay en total IgbTreeGrid.
Las propiedades SelectedCount y TotalCount se pueden utilizar para determinar si el selector principal debe estar marcado o indeterminado (seleccionado parcialmente).
Demostración de numeración de filas
Esta demostración muestra el uso de selectores de filas y encabezados personalizados. Este último usa Index para mostrar números de fila y un IgbCheckbox vinculado a Selected.
EXAMPLE
DATA
MODULES
RAZOR
JS
CSS
using System;
using System.Collections.Generic;
publicclassEmployeesFlatDataItem
{
publicdouble Age { get; set; }
publicstring HireDate { get; set; }
publicdouble ID { get; set; }
publicstring Name { get; set; }
publicstring Phone { get; set; }
publicbool OnPTO { get; set; }
publicdouble ParentID { get; set; }
publicstring Title { get; set; }
}
publicclassEmployeesFlatData
: List<EmployeesFlatDataItem>
{
publicEmployeesFlatData()
{
this.Add(new EmployeesFlatDataItem()
{
Age = 55,
HireDate = @"2008-03-20",
ID = 1,
Name = @"Johnathan Winchester",
Phone = @"0251-031259",
OnPTO = false,
ParentID = -1,
Title = @"Development Manager"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 42,
HireDate = @"2014-01-22",
ID = 4,
Name = @"Ana Sanders",
Phone = @"(21) 555-0091",
OnPTO = true,
ParentID = -1,
Title = @"CEO"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 49,
HireDate = @"2014-01-22",
ID = 18,
Name = @"Victoria Lincoln",
Phone = @"(071) 23 67 22 20",
OnPTO = true,
ParentID = -1,
Title = @"Accounting Manager"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 61,
HireDate = @"2010-01-01",
ID = 10,
Name = @"Yang Wang",
Phone = @"(21) 555-0091",
OnPTO = false,
ParentID = -1,
Title = @"Localization Manager"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 43,
HireDate = @"2011-06-03",
ID = 3,
Name = @"Michael Burke",
Phone = @"0452-076545",
OnPTO = true,
ParentID = 1,
Title = @"Senior Software Developer"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 29,
HireDate = @"2009-06-19",
ID = 2,
Name = @"Thomas Anderson",
Phone = @"(14) 555-8122",
OnPTO = false,
ParentID = 1,
Title = @"Senior Software Developer"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 31,
HireDate = @"2014-08-18",
ID = 11,
Name = @"Monica Reyes",
Phone = @"7675-3425",
OnPTO = false,
ParentID = 1,
Title = @"Software Development Team Lead"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 35,
HireDate = @"2015-09-17",
ID = 6,
Name = @"Roland Mendel",
Phone = @"(505) 555-5939",
OnPTO = false,
ParentID = 11,
Title = @"Senior Software Developer"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 44,
HireDate = @"2009-10-11",
ID = 12,
Name = @"Sven Cooper",
Phone = @"0695-34 67 21",
OnPTO = true,
ParentID = 11,
Title = @"Senior Software Developer"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 44,
HireDate = @"2014-04-04",
ID = 14,
Name = @"Laurence Johnson",
Phone = @"981-443655",
OnPTO = false,
ParentID = 4,
Title = @"Director"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 25,
HireDate = @"2017-11-09",
ID = 5,
Name = @"Elizabeth Richards",
Phone = @"(2) 283-2951",
OnPTO = true,
ParentID = 4,
Title = @"Vice President"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 39,
HireDate = @"2010-03-22",
ID = 13,
Name = @"Trevor Ashworth",
Phone = @"981-443655",
OnPTO = true,
ParentID = 5,
Title = @"Director"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 44,
HireDate = @"2014-04-04",
ID = 17,
Name = @"Antonio Moreno",
Phone = @"(505) 555-5939",
OnPTO = false,
ParentID = 18,
Title = @"Senior Accountant"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 50,
HireDate = @"2007-11-18",
ID = 7,
Name = @"Pedro Rodriguez",
Phone = @"035-640230",
OnPTO = false,
ParentID = 10,
Title = @"Senior Localization Developer"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 27,
HireDate = @"2016-02-19",
ID = 8,
Name = @"Casey Harper",
Phone = @"0342-023176",
OnPTO = true,
ParentID = 10,
Title = @"Senior Localization"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 25,
HireDate = @"2017-11-09",
ID = 15,
Name = @"Patricia Simpson",
Phone = @"069-0245984",
OnPTO = false,
ParentID = 7,
Title = @"Localization Intern"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 39,
HireDate = @"2010-03-22",
ID = 9,
Name = @"Francisco Chang",
Phone = @"(91) 745 6200",
OnPTO = false,
ParentID = 7,
Title = @"Localization Intern"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 25,
HireDate = @"2018-03-18",
ID = 16,
Name = @"Peter Lewis",
Phone = @"069-0245984",
OnPTO = true,
ParentID = 7,
Title = @"Localization Intern"
});
}
}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(IgbTreeGridModule)
);
await builder.Build().RunAsync();
}
}
}cs
@using IgniteUI.Blazor.Controls
@inject IJSRuntime JS<divclass="container vertical ig-typography"><divclass="container vertical fill"><IgbTreeGridAutoGenerate="false"Name="treeGrid"
@ref="treeGrid"Id="treeGrid"Data="EmployeesFlatData"PrimaryKey="ID"ForeignKey="ParentID"RowSelection="GridSelectionMode.Multiple"RowSelectorTemplateScript="WebGridRowSelectorTemplate"HeadSelectorTemplateScript="WebGridHeaderRowSelectorTemplate"CellSelection="GridSelectionMode.None"HideRowSelectors="false"><IgbColumnField="Name"DataType="GridColumnDataType.String"></IgbColumn><IgbColumnField="Title"Header="Job Title"></IgbColumn><IgbColumnField="HireDate"DataType="GridColumnDataType.Date"></IgbColumn><IgbColumnField="Age"DataType="GridColumnDataType.Number"></IgbColumn><IgbColumnField="OnPTO"DataType="GridColumnDataType.Boolean"></IgbColumn></IgbTreeGrid></div></div>@code {protectedoverrideasync Task OnAfterRenderAsync(bool firstRender)
{
var treeGrid = this.treeGrid;
}
private IgbTreeGrid treeGrid;
private EmployeesFlatData _employeesFlatData = null;
public EmployeesFlatData EmployeesFlatData
{
get
{
if (_employeesFlatData == null)
{
_employeesFlatData = new EmployeesFlatData();
}
return _employeesFlatData;
}
}
}razor
igRegisterScript("WebGridRowSelectorTemplate", (ctx) => {
var html = window.igTemplating.html;
if (ctx.implicit.selected) {
return html`<divstyle="justify-content: space-evenly;display: flex;width: 70px;"><span>${ctx.implicit.index}</span><igc-checkboxchecked></igc-checkbox></div>`;
} else {
return html`<divstyle="justify-content: space-evenly;display: flex;width: 70px;"><span>${ctx.implicit.index}</span><igc-checkbox></igc-checkbox></div>`;
}
}, false);
igRegisterScript("WebGridHeaderRowSelectorTemplate", (ctx) => {
var html = window.igTemplating.html;
return html`<divstyle="width: 70px;height: 60px;display: flex;"><imgsrc="https://www.infragistics.com/angular-demos-lob/assets/images/card/avatars/igLogo.png"class="header-image"></div>`;
}, false);
js
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Demostración de selectores de filas de estilo Excel
Esta demostración utiliza plantillas personalizadas que se parecen a los selectores de filas y encabezados similares a los de Excel.
EXAMPLE
DATA
MODULES
RAZOR
JS
CSS
using System;
using System.Collections.Generic;
publicclassEmployeesFlatDataItem
{
publicdouble Age { get; set; }
publicstring HireDate { get; set; }
publicdouble ID { get; set; }
publicstring Name { get; set; }
publicstring Phone { get; set; }
publicbool OnPTO { get; set; }
publicdouble ParentID { get; set; }
publicstring Title { get; set; }
}
publicclassEmployeesFlatData
: List<EmployeesFlatDataItem>
{
publicEmployeesFlatData()
{
this.Add(new EmployeesFlatDataItem()
{
Age = 55,
HireDate = @"2008-03-20",
ID = 1,
Name = @"Johnathan Winchester",
Phone = @"0251-031259",
OnPTO = false,
ParentID = -1,
Title = @"Development Manager"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 42,
HireDate = @"2014-01-22",
ID = 4,
Name = @"Ana Sanders",
Phone = @"(21) 555-0091",
OnPTO = true,
ParentID = -1,
Title = @"CEO"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 49,
HireDate = @"2014-01-22",
ID = 18,
Name = @"Victoria Lincoln",
Phone = @"(071) 23 67 22 20",
OnPTO = true,
ParentID = -1,
Title = @"Accounting Manager"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 61,
HireDate = @"2010-01-01",
ID = 10,
Name = @"Yang Wang",
Phone = @"(21) 555-0091",
OnPTO = false,
ParentID = -1,
Title = @"Localization Manager"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 43,
HireDate = @"2011-06-03",
ID = 3,
Name = @"Michael Burke",
Phone = @"0452-076545",
OnPTO = true,
ParentID = 1,
Title = @"Senior Software Developer"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 29,
HireDate = @"2009-06-19",
ID = 2,
Name = @"Thomas Anderson",
Phone = @"(14) 555-8122",
OnPTO = false,
ParentID = 1,
Title = @"Senior Software Developer"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 31,
HireDate = @"2014-08-18",
ID = 11,
Name = @"Monica Reyes",
Phone = @"7675-3425",
OnPTO = false,
ParentID = 1,
Title = @"Software Development Team Lead"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 35,
HireDate = @"2015-09-17",
ID = 6,
Name = @"Roland Mendel",
Phone = @"(505) 555-5939",
OnPTO = false,
ParentID = 11,
Title = @"Senior Software Developer"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 44,
HireDate = @"2009-10-11",
ID = 12,
Name = @"Sven Cooper",
Phone = @"0695-34 67 21",
OnPTO = true,
ParentID = 11,
Title = @"Senior Software Developer"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 44,
HireDate = @"2014-04-04",
ID = 14,
Name = @"Laurence Johnson",
Phone = @"981-443655",
OnPTO = false,
ParentID = 4,
Title = @"Director"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 25,
HireDate = @"2017-11-09",
ID = 5,
Name = @"Elizabeth Richards",
Phone = @"(2) 283-2951",
OnPTO = true,
ParentID = 4,
Title = @"Vice President"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 39,
HireDate = @"2010-03-22",
ID = 13,
Name = @"Trevor Ashworth",
Phone = @"981-443655",
OnPTO = true,
ParentID = 5,
Title = @"Director"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 44,
HireDate = @"2014-04-04",
ID = 17,
Name = @"Antonio Moreno",
Phone = @"(505) 555-5939",
OnPTO = false,
ParentID = 18,
Title = @"Senior Accountant"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 50,
HireDate = @"2007-11-18",
ID = 7,
Name = @"Pedro Rodriguez",
Phone = @"035-640230",
OnPTO = false,
ParentID = 10,
Title = @"Senior Localization Developer"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 27,
HireDate = @"2016-02-19",
ID = 8,
Name = @"Casey Harper",
Phone = @"0342-023176",
OnPTO = true,
ParentID = 10,
Title = @"Senior Localization"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 25,
HireDate = @"2017-11-09",
ID = 15,
Name = @"Patricia Simpson",
Phone = @"069-0245984",
OnPTO = false,
ParentID = 7,
Title = @"Localization Intern"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 39,
HireDate = @"2010-03-22",
ID = 9,
Name = @"Francisco Chang",
Phone = @"(91) 745 6200",
OnPTO = false,
ParentID = 7,
Title = @"Localization Intern"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 25,
HireDate = @"2018-03-18",
ID = 16,
Name = @"Peter Lewis",
Phone = @"069-0245984",
OnPTO = true,
ParentID = 7,
Title = @"Localization Intern"
});
}
}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(IgbTreeGridModule)
);
await builder.Build().RunAsync();
}
}
}cs
@using IgniteUI.Blazor.Controls
@inject IJSRuntime JS<style>/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/#treeGrid {
--ig-size: var(--ig-size-medium);
}
</style><divclass="container vertical ig-typography"><divclass="container vertical fill"><IgbTreeGridAutoGenerate="false"Data="EmployeesFlatData"Name="treeGrid"
@ref="treeGrid"Id="treeGrid"PrimaryKey="ID"ForeignKey="ParentID"RowSelection="GridSelectionMode.Multiple"RowSelectorTemplateScript="WebGridRowSelectorExcelTemplate"HeadSelectorTemplateScript="WebGridHeaderRowSelectorExcelTemplate"><IgbPaginatorName="paginator"
@ref="paginator"PerPage="15"SelectOptions="@(newdouble[] { 5, 10, 15, 25, 50 })"ResourceStrings="PaginatorResourceStrings1"></IgbPaginator><IgbColumnField="Name"DataType="GridColumnDataType.String"Sortable="true"></IgbColumn><IgbColumnField="Title"Header="Job Title"DataType="GridColumnDataType.String"Sortable="true"></IgbColumn><IgbColumnField="HireDate"DataType="GridColumnDataType.Date"Sortable="true"></IgbColumn><IgbColumnField="ID"DataType="GridColumnDataType.Number"Sortable="true"></IgbColumn><IgbColumnField="Age"DataType="GridColumnDataType.Number"Sortable="true"></IgbColumn><IgbColumnField="OnPTO"DataType="GridColumnDataType.Boolean"Sortable="true"></IgbColumn></IgbTreeGrid></div></div>@code {protectedoverrideasync Task OnAfterRenderAsync(bool firstRender)
{
var treeGrid = this.treeGrid;
var paginator = this.paginator;
}
private IgbTreeGrid treeGrid;
private IgbPaginator paginator;
private IgbPaginatorResourceStrings _paginatorResourceStrings1 = null;
public IgbPaginatorResourceStrings PaginatorResourceStrings1
{
get
{
if (this._paginatorResourceStrings1 == null)
{
var paginatorResourceStrings1 = new IgbPaginatorResourceStrings();
paginatorResourceStrings1.Igx_paginator_label = "Items per page";
this._paginatorResourceStrings1 = paginatorResourceStrings1;
}
returnthis._paginatorResourceStrings1;
}
}
private EmployeesFlatData _employeesFlatData = null;
public EmployeesFlatData EmployeesFlatData
{
get
{
if (_employeesFlatData == null)
{
_employeesFlatData = new EmployeesFlatData();
}
return _employeesFlatData;
}
}
}razor
igRegisterScript("WebGridRowSelectorExcelTemplate", (ctx) => {
var html = window.igTemplating.html;
return html`<spanstyle='display: block;width:30px;'>${ctx.implicit.index}</span>`;
}, false);
igRegisterScript("WebGridHeaderRowSelectorExcelTemplate", (ctx) => {
var html = window.igTemplating.html;
if (ctx.implicit.selectedCount > 0 && ctx.implicit.selectedCount === ctx.implicit.totalCount) {
return html`<spanstyle='display: block;width:30px;'><istyle='color: rgb(239, 184, 209);'>◢</i></span>`;
} else {
return html`<spanstyle='display: block;width:30px;'><i>◢</i></span>`;
}
}, false);
js
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/#treeGrid {
--ig-size: var(--ig-size-medium);
}
css
Demostración de selección condicional
Esta demostración evita que se seleccionen algunas filas mediante el evento RowSelectionChanging y una plantilla personalizada con la casilla de verificación deshabilitada para filas no seleccionables.
EXAMPLE
DATA
MODULES
RAZOR
JS
CSS
using System;
using System.Collections.Generic;
publicclassEmployeesFlatDataItem
{
publicdouble Age { get; set; }
publicstring HireDate { get; set; }
publicdouble ID { get; set; }
publicstring Name { get; set; }
publicstring Phone { get; set; }
publicbool OnPTO { get; set; }
publicdouble ParentID { get; set; }
publicstring Title { get; set; }
}
publicclassEmployeesFlatData
: List<EmployeesFlatDataItem>
{
publicEmployeesFlatData()
{
this.Add(new EmployeesFlatDataItem()
{
Age = 55,
HireDate = @"2008-03-20",
ID = 1,
Name = @"Johnathan Winchester",
Phone = @"0251-031259",
OnPTO = false,
ParentID = -1,
Title = @"Development Manager"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 42,
HireDate = @"2014-01-22",
ID = 4,
Name = @"Ana Sanders",
Phone = @"(21) 555-0091",
OnPTO = true,
ParentID = -1,
Title = @"CEO"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 49,
HireDate = @"2014-01-22",
ID = 18,
Name = @"Victoria Lincoln",
Phone = @"(071) 23 67 22 20",
OnPTO = true,
ParentID = -1,
Title = @"Accounting Manager"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 61,
HireDate = @"2010-01-01",
ID = 10,
Name = @"Yang Wang",
Phone = @"(21) 555-0091",
OnPTO = false,
ParentID = -1,
Title = @"Localization Manager"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 43,
HireDate = @"2011-06-03",
ID = 3,
Name = @"Michael Burke",
Phone = @"0452-076545",
OnPTO = true,
ParentID = 1,
Title = @"Senior Software Developer"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 29,
HireDate = @"2009-06-19",
ID = 2,
Name = @"Thomas Anderson",
Phone = @"(14) 555-8122",
OnPTO = false,
ParentID = 1,
Title = @"Senior Software Developer"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 31,
HireDate = @"2014-08-18",
ID = 11,
Name = @"Monica Reyes",
Phone = @"7675-3425",
OnPTO = false,
ParentID = 1,
Title = @"Software Development Team Lead"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 35,
HireDate = @"2015-09-17",
ID = 6,
Name = @"Roland Mendel",
Phone = @"(505) 555-5939",
OnPTO = false,
ParentID = 11,
Title = @"Senior Software Developer"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 44,
HireDate = @"2009-10-11",
ID = 12,
Name = @"Sven Cooper",
Phone = @"0695-34 67 21",
OnPTO = true,
ParentID = 11,
Title = @"Senior Software Developer"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 44,
HireDate = @"2014-04-04",
ID = 14,
Name = @"Laurence Johnson",
Phone = @"981-443655",
OnPTO = false,
ParentID = 4,
Title = @"Director"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 25,
HireDate = @"2017-11-09",
ID = 5,
Name = @"Elizabeth Richards",
Phone = @"(2) 283-2951",
OnPTO = true,
ParentID = 4,
Title = @"Vice President"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 39,
HireDate = @"2010-03-22",
ID = 13,
Name = @"Trevor Ashworth",
Phone = @"981-443655",
OnPTO = true,
ParentID = 5,
Title = @"Director"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 44,
HireDate = @"2014-04-04",
ID = 17,
Name = @"Antonio Moreno",
Phone = @"(505) 555-5939",
OnPTO = false,
ParentID = 18,
Title = @"Senior Accountant"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 50,
HireDate = @"2007-11-18",
ID = 7,
Name = @"Pedro Rodriguez",
Phone = @"035-640230",
OnPTO = false,
ParentID = 10,
Title = @"Senior Localization Developer"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 27,
HireDate = @"2016-02-19",
ID = 8,
Name = @"Casey Harper",
Phone = @"0342-023176",
OnPTO = true,
ParentID = 10,
Title = @"Senior Localization"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 25,
HireDate = @"2017-11-09",
ID = 15,
Name = @"Patricia Simpson",
Phone = @"069-0245984",
OnPTO = false,
ParentID = 7,
Title = @"Localization Intern"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 39,
HireDate = @"2010-03-22",
ID = 9,
Name = @"Francisco Chang",
Phone = @"(91) 745 6200",
OnPTO = false,
ParentID = 7,
Title = @"Localization Intern"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 25,
HireDate = @"2018-03-18",
ID = 16,
Name = @"Peter Lewis",
Phone = @"069-0245984",
OnPTO = true,
ParentID = 7,
Title = @"Localization Intern"
});
}
}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(IgbTreeGridModule)
);
await builder.Build().RunAsync();
}
}
}cs
@using IgniteUI.Blazor.Controls
@inject IJSRuntime JS<divclass="container vertical ig-typography"><divclass="container vertical fill"><IgbTreeGridAutoGenerate="false"Data="EmployeesFlatData"Name="treeGrid"
@ref="treeGrid"Id="treeGrid"PrimaryKey="ID"ForeignKey="ParentID"RowSelection="GridSelectionMode.Multiple"RowSelectionChangingScript="WebTreeGridRowSelectionConditional"><IgbColumnField="Name"DataType="GridColumnDataType.String"></IgbColumn><IgbColumnField="Title"Header="Job Title"></IgbColumn><IgbColumnField="HireDate"DataType="GridColumnDataType.Date"></IgbColumn><IgbColumnField="Age"DataType="GridColumnDataType.Number"></IgbColumn><IgbColumnField="OnPTO"DataType="GridColumnDataType.Boolean"></IgbColumn></IgbTreeGrid></div></div>@code {protectedoverrideasync Task OnAfterRenderAsync(bool firstRender)
{
var treeGrid = this.treeGrid;
}
private IgbTreeGrid treeGrid;
private EmployeesFlatData _employeesFlatData = null;
public EmployeesFlatData EmployeesFlatData
{
get
{
if (_employeesFlatData == null)
{
_employeesFlatData = new EmployeesFlatData();
}
return _employeesFlatData;
}
}
}razor
igRegisterScript("WebTreeGridRowSelectionConditional", (event) => {
const eventArgs = event.detail;
if (!eventArgs.added.length && eventArgs.removed.length) {
// ignore deselectreturn;
}
const originalAddedLength = eventArgs.added.length;
// only allow selection for employees that are not on PTO
eventArgs.newSelection = eventArgs.newSelection.filter(x => x.OnPTO === false);
// cleanup selection if all conditionally selectable rows are already selectedif (eventArgs.newSelection.length
&& !eventArgs.newSelection.filter(x => eventArgs.oldSelection.indexOf(x) === -1).length
&& originalAddedLength > 1) {
// all selected from header, deselect instead
eventArgs.newSelection = [];
}
}, false);
js
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css