Arrastre de filas en React Grid
La función de arrastrar filas Ignite UI for React en React Grid se puede configurar fácilmente y se utiliza para reorganizar filas dentro de la cuadrícula arrastrándolas y soltándolas en una nueva posición con el mouse. Se inicializa en el componente raíz IgrGrid
y se puede configurar a través de la entrada rowDraggable
.
Ejemplo de arrastrar filas React Grid
export class CustomersDataItem {
public constructor(init: Partial<CustomersDataItem>) {
Object.assign(this, init);
}
public ID: string;
public CompanyName: string;
public ContactName: string;
public ContactTitle: string;
public Address: string;
public City: string;
public Region: string;
public PostalCode: string;
public Country: string;
public Phone: string;
public Fax: string;
}
export class CustomersData extends Array<CustomersDataItem> {
public constructor() {
super();
this.push(new CustomersDataItem(
{
ID: `ALFKI`,
CompanyName: `Alfreds Futterkiste`,
ContactName: `Maria Anders`,
ContactTitle: `Sales Representative`,
Address: `Obere Str. 57`,
City: `Berlin`,
Region: `East`,
PostalCode: `12209`,
Country: `Germany`,
Phone: `030-0074321`,
Fax: `030-0076545`
}));
this.push(new CustomersDataItem(
{
ID: `ANATR`,
CompanyName: `Ana Trujillo Emparedados y helados`,
ContactName: `Ana Trujillo`,
ContactTitle: `Owner`,
Address: `Avda. de la Constitución 2222`,
City: `México D.F.`,
Region: `South`,
PostalCode: `05021`,
Country: `Mexico`,
Phone: `(5) 555-4729`,
Fax: `(5) 555-3745`
}));
this.push(new CustomersDataItem(
{
ID: `ANTON`,
CompanyName: `Antonio Moreno Taquería`,
ContactName: `Antonio Moreno`,
ContactTitle: `Owner`,
Address: `Mataderos 2312`,
City: `México D.F.`,
Region: `South`,
PostalCode: `05023`,
Country: `Mexico`,
Phone: `(5) 555-3932`,
Fax: `(5) 555-3745`
}));
this.push(new CustomersDataItem(
{
ID: `AROUT`,
CompanyName: `Around the Horn`,
ContactName: `Thomas Hardy`,
ContactTitle: `Sales Representative`,
Address: `120 Hanover Sq.`,
City: `London`,
Region: `East`,
PostalCode: `WA1 1DP`,
Country: `UK`,
Phone: `(171) 555-7788`,
Fax: `(171) 555-6750`
}));
this.push(new CustomersDataItem(
{
ID: `BERGS`,
CompanyName: `Berglunds snabbköp`,
ContactName: `Christina Berglund`,
ContactTitle: `Order Administrator`,
Address: `Berguvsvägen 8`,
City: `Luleå`,
Region: `South`,
PostalCode: `S-958 22`,
Country: `Sweden`,
Phone: `0921-12 34 65`,
Fax: `0921-12 34 67`
}));
this.push(new CustomersDataItem(
{
ID: `BLAUS`,
CompanyName: `Blauer See Delikatessen`,
ContactName: `Hanna Moos`,
ContactTitle: `Sales Representative`,
Address: `Forsterstr. 57`,
City: `Mannheim`,
Region: `East`,
PostalCode: `68306`,
Country: `Germany`,
Phone: `0621-08460`,
Fax: `0621-08924`
}));
this.push(new CustomersDataItem(
{
ID: `BLONP`,
CompanyName: `Blondesddsl père et fils`,
ContactName: `Frédérique Citeaux`,
ContactTitle: `Marketing Manager`,
Address: `24, place Kléber`,
City: `Strasbourg`,
Region: `East`,
PostalCode: `67000`,
Country: `France`,
Phone: `88.60.15.31`,
Fax: `88.60.15.32`
}));
this.push(new CustomersDataItem(
{
ID: `BOLID`,
CompanyName: `Bólido Comidas preparadas`,
ContactName: `Martín Sommer`,
ContactTitle: `Owner`,
Address: `C/ Araquil, 67`,
City: `Madrid`,
Region: `East`,
PostalCode: `28023`,
Country: `Spain`,
Phone: `(91) 555 22 82`,
Fax: `(91) 555 91 99`
}));
this.push(new CustomersDataItem(
{
ID: `BONAP`,
CompanyName: `Bon app'`,
ContactName: `Laurence Lebihan`,
ContactTitle: `Owner`,
Address: `12, rue des Bouchers`,
City: `Marseille`,
Region: `West`,
PostalCode: `13008`,
Country: `France`,
Phone: `91.24.45.40`,
Fax: `91.24.45.41`
}));
this.push(new CustomersDataItem(
{
ID: `BOTTM`,
CompanyName: `Bottom-Dollar Markets`,
ContactName: `Elizabeth Lincoln`,
ContactTitle: `Accounting Manager`,
Address: `23 Tsawassen Blvd.`,
City: `Tsawassen`,
Region: `BC`,
PostalCode: `T2F 8M4`,
Country: `Canada`,
Phone: `(604) 555-4729`,
Fax: `(604) 555-3745`
}));
this.push(new CustomersDataItem(
{
ID: `BSBEV`,
CompanyName: `B's Beverages`,
ContactName: `Victoria Ashworth`,
ContactTitle: `Sales Representative`,
Address: `Fauntleroy Circus`,
City: `London`,
Region: `South`,
PostalCode: `EC2 5NT`,
Country: `UK`,
Phone: `(171) 555-1212`,
Fax: `(5) 555-3745`
}));
this.push(new CustomersDataItem(
{
ID: `CACTU`,
CompanyName: `Cactus Comidas para llevar`,
ContactName: `Patricio Simpson`,
ContactTitle: `Sales Agent`,
Address: `Cerrito 333`,
City: `Buenos Aires`,
Region: `East`,
PostalCode: `1010`,
Country: `Argentina`,
Phone: `(1) 135-5555`,
Fax: `(1) 135-4892`
}));
this.push(new CustomersDataItem(
{
ID: `CENTC`,
CompanyName: `Centro comercial Moctezuma`,
ContactName: `Francisco Chang`,
ContactTitle: `Marketing Manager`,
Address: `Sierras de Granada 9993`,
City: `México D.F.`,
Region: `South`,
PostalCode: `05022`,
Country: `Mexico`,
Phone: `(5) 555-3392`,
Fax: `(5) 555-7293`
}));
this.push(new CustomersDataItem(
{
ID: `CHOPS`,
CompanyName: `Chop-suey Chinese`,
ContactName: `Yang Wang`,
ContactTitle: `Owner`,
Address: `Hauptstr. 29`,
City: `Bern`,
Region: `East`,
PostalCode: `3012`,
Country: `Switzerland`,
Phone: `0452-076545`,
Fax: `(5) 555-3745`
}));
this.push(new CustomersDataItem(
{
ID: `COMMI`,
CompanyName: `Comércio Mineiro`,
ContactName: `Pedro Afonso`,
ContactTitle: `Sales Associate`,
Address: `Av. dos Lusíadas, 23`,
City: `Sao Paulo`,
Region: `SP`,
PostalCode: `05432-043`,
Country: `Brazil`,
Phone: `(11) 555-7647`,
Fax: `(5) 555-3745`
}));
this.push(new CustomersDataItem(
{
ID: `CONSH`,
CompanyName: `Consolidated Holdings`,
ContactName: `Elizabeth Brown`,
ContactTitle: `Sales Representative`,
Address: `Berkeley Gardens 12 Brewery`,
City: `London`,
Region: `South`,
PostalCode: `WX1 6LT`,
Country: `UK`,
Phone: `(171) 555-2282`,
Fax: `(171) 555-9199`
}));
this.push(new CustomersDataItem(
{
ID: `DRACD`,
CompanyName: `Drachenblut Delikatessen`,
ContactName: `Sven Ottlieb`,
ContactTitle: `Order Administrator`,
Address: `Walserweg 21`,
City: `Aachen`,
Region: `South`,
PostalCode: `52066`,
Country: `Germany`,
Phone: `0241-039123`,
Fax: `0241-059428`
}));
this.push(new CustomersDataItem(
{
ID: `DUMON`,
CompanyName: `Du monde entier`,
ContactName: `Janine Labrune`,
ContactTitle: `Owner`,
Address: `67, rue des Cinquante Otages`,
City: `Nantes`,
Region: `East`,
PostalCode: `44000`,
Country: `France`,
Phone: `40.67.88.88`,
Fax: `40.67.89.89`
}));
this.push(new CustomersDataItem(
{
ID: `EASTC`,
CompanyName: `Eastern Connection`,
ContactName: `Ann Devon`,
ContactTitle: `Sales Agent`,
Address: `35 King George`,
City: `London`,
Region: `East`,
PostalCode: `WX3 6FW`,
Country: `UK`,
Phone: `(171) 555-0297`,
Fax: `(171) 555-3373`
}));
this.push(new CustomersDataItem(
{
ID: `ERNSH`,
CompanyName: `Ernst Handel`,
ContactName: `Roland Mendel`,
ContactTitle: `Sales Manager`,
Address: `Kirchgasse 6`,
City: `Graz`,
Region: `South`,
PostalCode: `8010`,
Country: `Austria`,
Phone: `7675-3425`,
Fax: `7675-3426`
}));
this.push(new CustomersDataItem(
{
ID: `FAMIA`,
CompanyName: `Familia Arquibaldo`,
ContactName: `Aria Cruz`,
ContactTitle: `Marketing Assistant`,
Address: `Rua Orós, 92`,
City: `Sao Paulo`,
Region: `SP`,
PostalCode: `05442-030`,
Country: `Brazil`,
Phone: `(11) 555-9857`,
Fax: `(5) 555-3745`
}));
this.push(new CustomersDataItem(
{
ID: `FISSA`,
CompanyName: `FISSA Fabrica Inter. Salchichas S.A.`,
ContactName: `Diego Roel`,
ContactTitle: `Accounting Manager`,
Address: `C/ Moralzarzal, 86`,
City: `Madrid`,
Region: `East`,
PostalCode: `28034`,
Country: `Spain`,
Phone: `(91) 555 94 44`,
Fax: `(91) 555 55 93`
}));
this.push(new CustomersDataItem(
{
ID: `FOLIG`,
CompanyName: `Folies gourmandes`,
ContactName: `Martine Rancé`,
ContactTitle: `Assistant Sales Agent`,
Address: `184, chaussée de Tournai`,
City: `Lille`,
Region: `South`,
PostalCode: `59000`,
Country: `France`,
Phone: `20.16.10.16`,
Fax: `20.16.10.17`
}));
this.push(new CustomersDataItem(
{
ID: `FOLKO`,
CompanyName: `Folk och fä HB`,
ContactName: `Maria Larsson`,
ContactTitle: `Owner`,
Address: `Åkergatan 24`,
City: `Bräcke`,
Region: `East`,
PostalCode: `S-844 67`,
Country: `Sweden`,
Phone: `0695-34 67 21`,
Fax: `0695 33-4455`
}));
this.push(new CustomersDataItem(
{
ID: `FRANK`,
CompanyName: `Frankenversand`,
ContactName: `Peter Franken`,
ContactTitle: `Marketing Manager`,
Address: `Berliner Platz 43`,
City: `München`,
Region: `East`,
PostalCode: `80805`,
Country: `Germany`,
Phone: `089-0877310`,
Fax: `089-0877451`
}));
this.push(new CustomersDataItem(
{
ID: `FRANR`,
CompanyName: `France restauration`,
ContactName: `Carine Schmitt`,
ContactTitle: `Marketing Manager`,
Address: `54, rue Royale`,
City: `Nantes`,
Region: `South`,
PostalCode: `44000`,
Country: `France`,
Phone: `40.32.21.21`,
Fax: `40.32.21.20`
}));
this.push(new CustomersDataItem(
{
ID: `FRANS`,
CompanyName: `Franchi S.p.A.`,
ContactName: `Paolo Accorti`,
ContactTitle: `Sales Representative`,
Address: `Via Monte Bianco 34`,
City: `Torino`,
Region: `East`,
PostalCode: `10100`,
Country: `Italy`,
Phone: `011-4988260`,
Fax: `011-4988261`
}));
}
}
tsimport React, { useRef } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrGridModule, IgrRowDragEndEventArgs } from "@infragistics/igniteui-react-grids";
import { IgrGrid, IgrColumn } from "@infragistics/igniteui-react-grids";
import { CustomersData } from './CustomersData';
import "@infragistics/igniteui-react-grids/grids/combined";
import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css";
const mods: any[] = [
IgrGridModule
];
mods.forEach((m) => m.register());
export default function App() {
const data = new CustomersData();
const rightGridRef = useRef<IgrGrid>(null);
function onGridRowDragEnd(grid: IgrGrid, evt: IgrRowDragEndEventArgs): void {
const ghostElement = evt.detail.dragDirective.ghostElement;
if (ghostElement != null) {
const dragElementPos = ghostElement.getBoundingClientRect();
const gridPosition = document.getElementById("rightGrid").getElementsByTagName("igc-grid")[0].getBoundingClientRect();
const withinXBounds = dragElementPos.x >= gridPosition.x && dragElementPos.x <= gridPosition.x + gridPosition.width;
const withinYBounds = dragElementPos.y >= gridPosition.y && dragElementPos.y <= gridPosition.y + gridPosition.height;
if (withinXBounds && withinYBounds) {
grid.deleteRow(evt.detail.dragData.key);
rightGridRef.current.addRow(evt.detail.dragData.data);
}
}
}
return (
<div className="container sample">
<div className="container horizontal wrapper">
<IgrGrid data={data} width="40%" primaryKey='ID' autoGenerate="false" rowDraggable="true" rowDragEnd={onGridRowDragEnd}>
<IgrColumn field="ID" width="100px"></IgrColumn>
<IgrColumn field="CompanyName" width="100px"></IgrColumn>
<IgrColumn field="ContactName" width="100px"></IgrColumn>
<IgrColumn field="ContactTitle" width="100px"></IgrColumn>
<IgrColumn field="Address" width="100px"></IgrColumn>
<IgrColumn field="City" width="100px"></IgrColumn>
<IgrColumn field="Region" width="100px"></IgrColumn>
<IgrColumn field="PostalCode" width="100px"></IgrColumn>
<IgrColumn field="Phone" width="100px"></IgrColumn>
<IgrColumn field="Fax" width="100px"></IgrColumn>
</IgrGrid>
<IgrGrid id="rightGrid" ref={rightGridRef} data={[]} autoGenerate="false" width="40%"
emptyGridMessage="Drag and Drop a row from the left grid to this grid">
<IgrColumn field="ID" width="100px"></IgrColumn>
<IgrColumn field="CompanyName" width="100px"></IgrColumn>
<IgrColumn field="ContactName" width="100px"></IgrColumn>
<IgrColumn field="ContactTitle" width="100px"></IgrColumn>
<IgrColumn field="Address" width="100px"></IgrColumn>
<IgrColumn field="City" width="100px"></IgrColumn>
<IgrColumn field="Region" width="100px"></IgrColumn>
<IgrColumn field="PostalCode" width="100px"></IgrColumn>
<IgrColumn field="Phone" width="100px"></IgrColumn>
<IgrColumn field="Fax" width="100px"></IgrColumn>
</IgrGrid>
</div>
</div>
);
}
// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);
tsx/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
.wrapper {
justify-content: space-evenly;
margin: 1rem;
}
css
¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas completo Ignite UI for React y comienza a crear tus propias aplicaciones en minutos. Descárgalo gratis.
Configuración
Para habilitar el arrastre de filas para su IgrGrid
, todo lo que necesita hacer es configurar el rowDraggable
de la cuadrícula en true. Una vez que esto esté habilitado, se mostrará un controlador de arrastre de fila en cada fila. Este controlador se puede utilizar para iniciar el arrastre de filas. Al hacer clic en el controlador de arrastre y mover el cursor mientras se mantiene presionado el botón, se activará el evento RowDragStart
de la cuadrícula. Si suelta el clic en cualquier momento, se activará el evento RowDragEnd
.
<IgrGrid rowDraggable="true">
</IgrGrid>
tsx
Plantilla del icono de arrastre
El icono del controlador de arrastre se puede crear como plantilla usando dragIndicatorIconTemplate
de la cuadrícula. En el ejemplo que estamos creando, cambiemos el ícono predeterminado (drag_indicator) a drag_handle.
Para hacerlo, podemos usar DragIndicatorIcon
para pasar una plantilla dentro del cuerpo de IgrGrid
:
function dragIndicatorIconTemplate(ctx: IgrGridEmptyTemplateContext) {
return (
<>
<IgrIcon name="drag_handle" collection="material" />
</>
);
}
<IgrGrid rowDraggable="true" dragIndicatorIcon={dragIndicatorIconTemplate}>
</IgrGrid>
tsx
Demostración de la aplicación
Demostración de reordenamiento de filas
Con la ayuda de los eventos de arrastre de filas de la cuadrícula, puede crear una cuadrícula que le permita reordenar las filas arrastrándolas.
<IgrGrid rowDraggable="true" primaryKey="ID" rowDragEnd={webGridReorderRowHandler}>
</IgrGrid>
tsx
¡Asegúrese de que haya una clave principal especificada para la cuadrícula! La lógica necesita un identificador único para las filas para que puedan reordenarse correctamente.
Una vez que rowDraggable
esté habilitado y se haya definido una zona de colocación, debe implementar un controlador simple para el evento de colocación. Cuando se arrastra una fila, verifique lo siguiente:
- ¿Se dejó caer la fila dentro de la cuadrícula?
- Si es así, ¿en qué otra fila se soltó la fila arrastrada?
- Una vez que haya encontrado la fila de destino, intercambie las ubicaciones de los registros en la matriz
data
.
A continuación, puedes ver esto implementado:
function webGridReorderRowHandler(grid: IgrGridBaseDirective, args: IgrRowDragEndEventArgs): void {
const ghostElement = args.detail.dragDirective.ghostElement;
const dragElementPos = ghostElement.getBoundingClientRect();
const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-grid-row"));
const currRowIndex = this.getCurrentRowIndex(rows,
{ x: dragElementPos.x, y: dragElementPos.y });
if (currRowIndex === -1) { return; }
// remove the row that was dragged and place it onto its new location
grid.deleteRow(args.detail.dragData.key);
grid.data.splice(currRowIndex, 0, args.detail.dragData.data);
}
function getCurrentRowIndex(rowList: any[], cursorPosition) {
for (const row of rowList) {
const rowRect = row.getBoundingClientRect();
if (cursorPosition.y > rowRect.top + window.scrollY && cursorPosition.y < rowRect.bottom + window.scrollY &&
cursorPosition.x > rowRect.left + window.scrollX && cursorPosition.x < rowRect.right + window.scrollX) {
// return the index of the targeted row
return parseInt(row.attributes["data-rowindex"].value);
}
}
return -1;
}
tsx
¡Con estos sencillos pasos, ha configurado una cuadrícula que permite reordenar filas mediante arrastrar y soltar! Puede ver el código anterior en acción en la siguiente demostración.
Mantener presionado el ícono de arrastrar le permitirá mover una fila a cualquier lugar de la cuadrícula:
export class CustomersDataItem {
public constructor(init: Partial<CustomersDataItem>) {
Object.assign(this, init);
}
public ID: string;
public Company: string;
public ContactName: string;
public ContactTitle: string;
public Address: string;
public City: string;
public Region: string;
public PostalCode: number;
public Country: string;
public Phone: string;
public Fax: string;
}
export class CustomersData extends Array<CustomersDataItem> {
public constructor(items: Array<CustomersDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CustomersDataItem(
{
ID: `ALFKI`,
Company: `Alfreds Futterkiste`,
ContactName: `Maria Anders`,
ContactTitle: `Sales Representative`,
Address: `Obere Str. 57`,
City: `Berlin`,
Region: `East`,
PostalCode: 12209,
Country: `Germany`,
Phone: `030-0074321`,
Fax: `030-0076545`
}),
new CustomersDataItem(
{
ID: `ANATR`,
Company: `Ana Trujillo Emparedados y helados`,
ContactName: `Ana Trujillo`,
ContactTitle: `Owner`,
Address: `Avda. de la Constitución 2222`,
City: `México D.F.`,
Region: `South`,
PostalCode: 5021,
Country: `Mexico`,
Phone: `(5) 555-4729`,
Fax: `(5) 555-3745`
}),
new CustomersDataItem(
{
ID: `ANTON`,
Company: `Antonio Moreno Taquería`,
ContactName: `Antonio Moreno`,
ContactTitle: `Owner`,
Address: `Mataderos 2312`,
City: `México D.F.`,
Region: `South`,
PostalCode: 5023,
Country: `Mexico`,
Phone: `(5) 555-3932`,
Fax: `(5) 555-3745`
}),
new CustomersDataItem(
{
ID: `AROUT`,
Company: `Around the Horn`,
ContactName: `Thomas Hardy`,
ContactTitle: `Sales Representative`,
Address: `120 Hanover Sq.`,
City: `London`,
Region: `East`,
PostalCode: 22000,
Country: `UK`,
Phone: `(171) 555-7788`,
Fax: `(171) 555-6750`
}),
new CustomersDataItem(
{
ID: `BERGS`,
Company: `Berglunds snabbköp`,
ContactName: `Christina Berglund`,
ContactTitle: `Order Administrator`,
Address: `Berguvsvägen 8`,
City: `Luleå`,
Region: `South`,
PostalCode: 17000,
Country: `Sweden`,
Phone: `0921-12 34 65`,
Fax: `0921-12 34 67`
}),
new CustomersDataItem(
{
ID: `BLAUS`,
Company: `Blauer See Delikatessen`,
ContactName: `Hanna Moos`,
ContactTitle: `Sales Representative`,
Address: `Forsterstr. 57`,
City: `Mannheim`,
Region: `East`,
PostalCode: 68306,
Country: `Germany`,
Phone: `0621-08460`,
Fax: `0621-08924`
}),
new CustomersDataItem(
{
ID: `BLONP`,
Company: `Blondesddsl père et fils`,
ContactName: `Frédérique Citeaux`,
ContactTitle: `Marketing Manager`,
Address: `24, place Kléber`,
City: `Strasbourg`,
Region: `East`,
PostalCode: 67000,
Country: `France`,
Phone: `88.60.15.31`,
Fax: `88.60.15.32`
}),
new CustomersDataItem(
{
ID: `BOLID`,
Company: `Bólido Comidas preparadas`,
ContactName: `Martín Sommer`,
ContactTitle: `Owner`,
Address: `C/ Araquil, 67`,
City: `Madrid`,
Region: `East`,
PostalCode: 28023,
Country: `Spain`,
Phone: `(91) 555 22 82`,
Fax: `(91) 555 91 99`
}),
new CustomersDataItem(
{
ID: `BONAP`,
Company: `Bon app'`,
ContactName: `Laurence Lebihan`,
ContactTitle: `Owner`,
Address: `12, rue des Bouchers`,
City: `Marseille`,
Region: `West`,
PostalCode: 13008,
Country: `France`,
Phone: `91.24.45.40`,
Fax: `91.24.45.41`
}),
new CustomersDataItem(
{
ID: `BOTTM`,
Company: `Bottom-Dollar Markets`,
ContactName: `Elizabeth Lincoln`,
ContactTitle: `Accounting Manager`,
Address: `23 Tsawassen Blvd.`,
City: `Tsawassen`,
Region: `BC`,
PostalCode: 28000,
Country: `Canada`,
Phone: `(604) 555-4729`,
Fax: `(604) 555-3745`
}),
new CustomersDataItem(
{
ID: `BSBEV`,
Company: `B's Beverages`,
ContactName: `Victoria Ashworth`,
ContactTitle: `Sales Representative`,
Address: `Fauntleroy Circus`,
City: `London`,
Region: `South`,
PostalCode: 10000,
Country: `UK`,
Phone: `(171) 555-1212`,
Fax: `(5) 555-3745`
}),
new CustomersDataItem(
{
ID: `CACTU`,
Company: `Cactus Comidas para llevar`,
ContactName: `Patricio Simpson`,
ContactTitle: `Sales Agent`,
Address: `Cerrito 333`,
City: `Buenos Aires`,
Region: `East`,
PostalCode: 1010,
Country: `Argentina`,
Phone: `(1) 135-5555`,
Fax: `(1) 135-4892`
}),
new CustomersDataItem(
{
ID: `CENTC`,
Company: `Centro comercial Moctezuma`,
ContactName: `Francisco Chang`,
ContactTitle: `Marketing Manager`,
Address: `Sierras de Granada 9993`,
City: `México D.F.`,
Region: `South`,
PostalCode: 5022,
Country: `Mexico`,
Phone: `(5) 555-3392`,
Fax: `(5) 555-7293`
}),
new CustomersDataItem(
{
ID: `CHOPS`,
Company: `Chop-suey Chinese`,
ContactName: `Yang Wang`,
ContactTitle: `Owner`,
Address: `Hauptstr. 29`,
City: `Bern`,
Region: `East`,
PostalCode: 3012,
Country: `Switzerland`,
Phone: `0452-076545`,
Fax: `(5) 555-3745`
}),
new CustomersDataItem(
{
ID: `COMMI`,
Company: `Comércio Mineiro`,
ContactName: `Pedro Afonso`,
ContactTitle: `Sales Associate`,
Address: `Av. dos Lusíadas, 23`,
City: `Sao Paulo`,
Region: `SP`,
PostalCode: 34000,
Country: `Brazil`,
Phone: `(11) 555-7647`,
Fax: `(5) 555-3745`
}),
new CustomersDataItem(
{
ID: `CONSH`,
Company: `Consolidated Holdings`,
ContactName: `Elizabeth Brown`,
ContactTitle: `Sales Representative`,
Address: `Berkeley Gardens 12 Brewery`,
City: `London`,
Region: `South`,
PostalCode: 27000,
Country: `UK`,
Phone: `(171) 555-2282`,
Fax: `(171) 555-9199`
}),
new CustomersDataItem(
{
ID: `DRACD`,
Company: `Drachenblut Delikatessen`,
ContactName: `Sven Ottlieb`,
ContactTitle: `Order Administrator`,
Address: `Walserweg 21`,
City: `Aachen`,
Region: `South`,
PostalCode: 52066,
Country: `Germany`,
Phone: `0241-039123`,
Fax: `0241-059428`
}),
new CustomersDataItem(
{
ID: `DUMON`,
Company: `Du monde entier`,
ContactName: `Janine Labrune`,
ContactTitle: `Owner`,
Address: `67, rue des Cinquante Otages`,
City: `Nantes`,
Region: `East`,
PostalCode: 44000,
Country: `France`,
Phone: `40.67.88.88`,
Fax: `40.67.89.89`
}),
new CustomersDataItem(
{
ID: `EASTC`,
Company: `Eastern Connection`,
ContactName: `Ann Devon`,
ContactTitle: `Sales Agent`,
Address: `35 King George`,
City: `London`,
Region: `East`,
PostalCode: 41000,
Country: `UK`,
Phone: `(171) 555-0297`,
Fax: `(171) 555-3373`
}),
new CustomersDataItem(
{
ID: `ERNSH`,
Company: `Ernst Handel`,
ContactName: `Roland Mendel`,
ContactTitle: `Sales Manager`,
Address: `Kirchgasse 6`,
City: `Graz`,
Region: `South`,
PostalCode: 8010,
Country: `Austria`,
Phone: `7675-3425`,
Fax: `7675-3426`
}),
new CustomersDataItem(
{
ID: `FAMIA`,
Company: `Familia Arquibaldo`,
ContactName: `Aria Cruz`,
ContactTitle: `Marketing Assistant`,
Address: `Rua Orós, 92`,
City: `Sao Paulo`,
Region: `SP`,
PostalCode: 27000,
Country: `Brazil`,
Phone: `(11) 555-9857`,
Fax: `(5) 555-3745`
}),
new CustomersDataItem(
{
ID: `FISSA`,
Company: `FISSA Fabrica Inter. Salchichas S.A.`,
ContactName: `Diego Roel`,
ContactTitle: `Accounting Manager`,
Address: `C/ Moralzarzal, 86`,
City: `Madrid`,
Region: `East`,
PostalCode: 28034,
Country: `Spain`,
Phone: `(91) 555 94 44`,
Fax: `(91) 555 55 93`
}),
new CustomersDataItem(
{
ID: `FOLIG`,
Company: `Folies gourmandes`,
ContactName: `Martine Rancé`,
ContactTitle: `Assistant Sales Agent`,
Address: `184, chaussée de Tournai`,
City: `Lille`,
Region: `South`,
PostalCode: 59000,
Country: `France`,
Phone: `20.16.10.16`,
Fax: `20.16.10.17`
}),
new CustomersDataItem(
{
ID: `FOLKO`,
Company: `Folk och fä HB`,
ContactName: `Maria Larsson`,
ContactTitle: `Owner`,
Address: `Åkergatan 24`,
City: `Bräcke`,
Region: `East`,
PostalCode: 36000,
Country: `Sweden`,
Phone: `0695-34 67 21`,
Fax: `0695 33-4455`
}),
new CustomersDataItem(
{
ID: `FRANK`,
Company: `Frankenversand`,
ContactName: `Peter Franken`,
ContactTitle: `Marketing Manager`,
Address: `Berliner Platz 43`,
City: `München`,
Region: `East`,
PostalCode: 80805,
Country: `Germany`,
Phone: `089-0877310`,
Fax: `089-0877451`
}),
new CustomersDataItem(
{
ID: `FRANR`,
Company: `France restauration`,
ContactName: `Carine Schmitt`,
ContactTitle: `Marketing Manager`,
Address: `54, rue Royale`,
City: `Nantes`,
Region: `South`,
PostalCode: 44000,
Country: `France`,
Phone: `40.32.21.21`,
Fax: `40.32.21.20`
}),
new CustomersDataItem(
{
ID: `FRANS`,
Company: `Franchi S.p.A.`,
ContactName: `Paolo Accorti`,
ContactTitle: `Sales Representative`,
Address: `Via Monte Bianco 34`,
City: `Torino`,
Region: `East`,
PostalCode: 10100,
Country: `Italy`,
Phone: `011-4988260`,
Fax: `011-4988261`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrPropertyEditorPanelModule } from "@infragistics/igniteui-react-layouts";
import { IgrGridModule } from "@infragistics/igniteui-react-grids";
import { IgrGrid, IgrColumn } from "@infragistics/igniteui-react-grids";
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebGridDescriptionModule } from "@infragistics/igniteui-react-core";
import { CustomersDataItem, CustomersData } from './CustomersData';
import { IgrRowDragEndEventArgs } from "@infragistics/igniteui-react-grids";
import "@infragistics/igniteui-react-grids/grids/combined";
import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css";
const mods: any[] = [
IgrPropertyEditorPanelModule,
IgrGridModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component<any, any> {
private grid: IgrGrid
private gridRef(r: IgrGrid) {
this.grid = r;
this.setState({});
}
constructor(props: any) {
super(props);
this.gridRef = this.gridRef.bind(this);
this.webGridReorderRowHandler = this.webGridReorderRowHandler.bind(this);
}
public render(): JSX.Element {
return (
<div className="container sample ig-typography">
<div className="container fill">
<IgrGrid
ref={this.gridRef}
data={this.customersData}
rowDraggable="true"
primaryKey="ID"
rowDragEnd={this.webGridReorderRowHandler}>
<IgrColumn
field="ID"
header="ID">
</IgrColumn>
<IgrColumn
field="Company"
header="Company">
</IgrColumn>
<IgrColumn
field="ContactName"
header="Name"
minWidth="60px"
maxWidth="230px">
</IgrColumn>
<IgrColumn
field="ContactTitle"
header="Title">
</IgrColumn>
<IgrColumn
field="Address">
</IgrColumn>
<IgrColumn
field="City">
</IgrColumn>
<IgrColumn
field="PostalCode">
</IgrColumn>
<IgrColumn
field="Phone">
</IgrColumn>
<IgrColumn
field="Fax">
</IgrColumn>
</IgrGrid>
</div>
</div>
);
}
private _customersData: CustomersData = null;
public get customersData(): CustomersData {
if (this._customersData == null)
{
this._customersData = new CustomersData();
}
return this._customersData;
}
private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
PropertyEditorPanelDescriptionModule.register(context);
WebGridDescriptionModule.register(context);
}
return this._componentRenderer;
}
public webGridReorderRowHandler(sender: IgrGrid, args: IgrRowDragEndEventArgs): void {
const ghostElement = args.detail.dragDirective.ghostElement;
const dragElementPos = ghostElement.getBoundingClientRect();
const grid = this.grid;
const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-grid-row"));
const currRowIndex = this.getCurrentRowIndex(rows,
{ x: dragElementPos.x, y: dragElementPos.y });
if (currRowIndex === -1) { return; }
// remove the row that was dragged and place it onto its new location
grid.deleteRow(args.detail.dragData.key);
grid.data.splice(currRowIndex, 0, args.detail.dragData.data);
}
public getCurrentRowIndex(rowList: any[], cursorPosition: any) {
for (const row of rowList) {
const rowRect = row.getBoundingClientRect();
if (cursorPosition.y > rowRect.top + window.scrollY && cursorPosition.y < rowRect.bottom + window.scrollY &&
cursorPosition.x > rowRect.left + window.scrollX && cursorPosition.x < rowRect.right + window.scrollX) {
// return the index of the targeted row
return parseInt(row.attributes["data-rowindex"].value);
}
}
return -1;
}
}
// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample/>);
tsx/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
Limitaciones
Actualmente, no existen limitaciones conocidas para rowDraggable
.
Referencias de API
rowDraggable
RowDragStart
RowDragEnd
IgrGrid
Recursos adicionales
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.