Row Dragging in Blazor Grid

La función de arrastre de filas Ignite UI for Blazor en Blazor cuadrícula es fácilmente configurable y se utiliza para reorganizar filas dentro de la cuadrícula arrastrándolas y soltándolas a una nueva posición con el mouse. Se inicializa en el componente raíz IgbGrid y se puede configurar a través de la RowDraggable entrada.

すぐに使用できる機能のフルセット は、ページング、ソート、フィルタリング、編集、グループ化から行と列の仮想化まで、あらゆる機能をカバーします。.NET 開発者には制限はありません。

無料で試してみる

Blazor Grid Row Drag Example

EXAMPLE

MODULES

DATA

RAZOR

JS

CSS

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

            // TODO update names of the following modules for the IgbGrid
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbGridModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

using System;
using System.Collections.Generic;
public class CustomersDataItem
{
    public string ID { get; set; }
    public string Company { get; set; }
    public string ContactName { get; set; }
    public string ContactTitle { get; set; }
    public string Address { get; set; }
    public string City { get; set; }
    public string Region { get; set; }
    public double PostalCode { get; set; }
    public string Country { get; set; }
    public string Phone { get; set; }
    public string Fax { get; set; }
}

public class CustomersData
    : List<CustomersDataItem>
{
    public CustomersData()
    {
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container horizontal">
    <div class="container vertical" style="padding: 0.5rem;">

        @if (Data1 != null)
        {
                <IgbGrid Height="100%" Id="grid1" Width="100%"
                         Data="Data1" PrimaryKey="@("ID")"
                    RowDragEndScript="OnRowDragEndHandler"
                     RowDraggable=true>
                    <IgbColumn Field="ID" Width="100px" />
                    <IgbColumn Field="CompanyName" Width="100px" />
                    <IgbColumn Field="ContactName" Width="100px" />
                    <IgbColumn Field="ContactTitle" Width="100px" />
                    <IgbColumn Field="Address" Width="100px" />
                    <IgbColumn Field="City" Width="100px" />
                    <IgbColumn Field="Region" Width="100px" />
                    <IgbColumn Field="PostalCode" Width="100px" />
                    <IgbColumn Field="Phone" Width="100px" />
                    <IgbColumn Field="Fax" Width="100px" />
                </IgbGrid>
        }
    </div>
    <div class="container vertical" style="padding: 0.5rem;">
        @if (Data2 != null)
        {
                <IgbGrid Id='grid2' Height="100%" Width="100%"
                         Data="Data2" PrimaryKey="@("ID")"
                         EmptyGridMessage="Drag and Drop a row from the left grid to this grid">
                    <IgbColumn Field="ID" Width="100px" />
                    <IgbColumn Field="CompanyName" Width="100px" />
                    <IgbColumn Field="ContactName" Width="100px" />
                    <IgbColumn Field="ContactTitle" Width="100px" />
                    <IgbColumn Field="Address" Width="100px" />
                    <IgbColumn Field="City" Width="100px" />
                    <IgbColumn Field="Region" Width="100px" />
                    <IgbColumn Field="PostalCode" Width="100px" />
                    <IgbColumn Field="Phone" Width="100px" />
                    <IgbColumn Field="Fax" Width="100px" />
                </IgbGrid>
        }
    </div>
</div>

@code {
    private CustomersData Data1 { get; set; }
    private List<CustomersDataItem> Data2 { get; set; }

    protected override void OnInitialized()
    {

        this.Data1 = new CustomersData();
        this.Data2 = new List<CustomersDataItem>() { };
    }
}razorコピー

function OnRowDragEndHandler(evt) {
    const ghostElement = evt.detail.dragDirective.ghostElement;
    const dragElementPos = ghostElement.getBoundingClientRect();
    const gridPosition = grid2.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) {
        grid1.deleteRow(evt.detail.dragData.key);
        grid2.addRow(evt.detail.dragData.data);
    }
}

igRegisterScript("OnRowDragEndHandler", OnRowDragEndHandler, 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.

Configuration

Para habilitar el arrastre de filas para su IgbGrid, todo lo que necesita hacer es configurar RowDraggable de la cuadrícula en verdadero. 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.

<IgbGrid RowDraggable="true">
</IgbGrid>
razor

Templating the Drag Icon

Se puede crear una plantilla para el icono del controlador de arrastre utilizando 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 IgbGrid:

<IgbGrid Data="CustomersData" PrimaryKey="ID" RowDraggable="true" DragIndicatorIconTemplate="dragIndicatorIconTemplate" @ref="grid">
</IgbGrid>

private RenderFragment<IgbGridEmptyTemplateContext> dragIndicatorIconTemplate = (context) =>
{
    return @<div>
        <IgbIcon IconName="drag_handle" Collection="material"></IgbIcon>
    </div>;
};
razor

Application Demo

Row Reordering Demo

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.

<IgbGrid Data="CustomersData" PrimaryKey="ID" RowDraggable="true" RowDragEndScript="WebGridReorderRowHandler"></IgbGrid>

// In JavaScript
igRegisterScript("WebGridReorderRowHandler", (args) => {
    const ghostElement = args.detail.dragDirective.ghostElement;
    const dragElementPos = ghostElement.getBoundingClientRect();
    const grid = document.getElementsByTagName("igc-grid")[0];
    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);
}, false);

function getCurrentRowIndex(rowList, 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;
}
razor

Make sure that there is a PrimaryKey specified for the grid! The logic needs an unique identifier for the rows so they can be properly reordered.

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:

¡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:

EXAMPLE

DATA

MODULES

RAZOR

JS

CSS

using System;
using System.Collections.Generic;
public class CustomersDataItem
{
    public string ID { get; set; }
    public string Company { get; set; }
    public string ContactName { get; set; }
    public string ContactTitle { get; set; }
    public string Address { get; set; }
    public string City { get; set; }
    public string Region { get; set; }
    public double PostalCode { get; set; }
    public string Country { get; set; }
    public string Phone { get; set; }
    public string Fax { get; set; }
}

public class CustomersData
    : List<CustomersDataItem>
{
    public CustomersData()
    {
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
        this.Add(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"
        });
    }
}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 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(IgbInputModule),
                typeof(IgbPropertyEditorPanelModule),
                typeof(IgbGridModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

@inject IJSRuntime JS

<div class="container vertical ig-typography">
    <div class="container vertical fill">
        <IgbGrid
        Name="grid"
        @ref="grid"
        Data="CustomersData"
        RowDraggable="true"
        PrimaryKey="ID"
        RowDragEndScript="WebGridReorderRowHandler">
            <IgbColumn
            Field="ID"
            Header="ID">
            </IgbColumn>

            <IgbColumn
            Field="Company"
            Header="Company">
            </IgbColumn>

            <IgbColumn
            Field="ContactName"
            Header="Name"
            MinWidth="60px"
            MaxWidth="230px">
            </IgbColumn>

            <IgbColumn
            Field="ContactTitle"
            Header="Title">
            </IgbColumn>

            <IgbColumn
            Field="Address">
            </IgbColumn>

            <IgbColumn
            Field="City">
            </IgbColumn>

            <IgbColumn
            Field="PostalCode">
            </IgbColumn>

            <IgbColumn
            Field="Phone">
            </IgbColumn>

            <IgbColumn
            Field="Fax">
            </IgbColumn>

        </IgbGrid>

    </div>
</div>

@code {
    

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var grid = this.grid;

    }

    private IgbGrid grid;

    private CustomersData _customersData = null;
    public CustomersData CustomersData
    {
        get
        {
            if (_customersData == null)
            {
                _customersData = new CustomersData();
            }
            return _customersData;
        }
    }

}razorコピー

igRegisterScript("WebGridReorderRowHandler", (args) => {
    const ghostElement = args.detail.dragDirective.ghostElement;
    const dragElementPos = ghostElement.getBoundingClientRect();
    const grid = document.getElementsByTagName("igc-grid")[0];
    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);
}, false);

function getCurrentRowIndex(rowList, 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;
}

jsコピー

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

Limitations

Actualmente, no existen limitaciones conocidas para RowDraggable.

API References

• RowDraggable
• RowDragStart
• RowDragEnd
• IgbGrid

Additional Resources

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.

• Ignite UI for Blazor Foros
• Ignite UI for Blazor GitHub