Grid and drag n drop

Radzen.Blazor Components
1

Hello,

I have implemented your drag n drop project located here and wrapped it around the RadzenGrid and tagged the columns with the dragable div.

It seems to work to a degree, but wondering if there is a better way to implement this?

In addition to your project project I added a class "Chart" in the Data folder.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace BlazorDragAndDrop.Data
{
    public class Chart
    {
        public string LinkName { get; set; }
        public string SourceNode { get; set; }
        public string DestNode { get; set; }
        public string ScriptID { get; set; }
        public string Comments { get; set; }
        public string ScriptDetails { get; set; }
    }
}

And here is the new index.razor page code:

@page "/"
@using Radzen.Blazor;
@using BlazorDragAndDrop.Data

<Draggable Data="@ChartRow" Zone="Grid">
    <RadzenGrid @ref="evGrid" AllowSorting="true" AllowPaging="true" PageSize="8" Data="@chartList" TItem="Chart" RowSelect="@RowSelect" SelectionMode="DataGridSelectionMode.Single">
        <Columns>
            <div class="draggable">
                <RadzenGridColumn TItem="Chart" Property="LinkName" Title="Link Name" FormatString="{0:0.00000 THz}" Width="105px" />
                <RadzenGridColumn TItem="Chart" Property="SourceNode" Title="Source Node" Width="80px" />
                <RadzenGridColumn TItem="Chart" Property="DestNode" Title="Dest Node" FormatString="{0:0 G}" Width="60px" />
                <RadzenGridColumn TItem="Chart" Property="Comments" Title="Comments" FormatString="{0:0 GHz}" Width="70px" />
                <RadzenGridColumn TItem="Chart" Property="Engineer" Title="Engineer" Width="90px" />
            </div>
        </Columns>
    </RadzenGrid>
</Draggable>
<br />
<br />
<DropTarget T="Chart" Drop="@OnDrop" Zone="Grid">
    <div class="drop-target">
        Drop here to send to DataBase
    </div>
</DropTarget>
<br />
<br />
@if (dropMessage != null)
{
    @dropMessage
}

@code {

    string dropMessage = null;

    Chart ChartRow;

    List<Chart> chartList = new List<Chart>();

    RadzenGrid<Chart> evGrid;

    protected override void OnInitialized()
    {
        base.OnInitialized();
        CreateChart();
    }

    private void RowSelect(Chart e)
    {
        ChartRow = e;
    }

    private void OnDrop(Chart data)
    {
        if (data != null)
        {
            string cData = data.SourceNode + " " + data.DestNode + " " + data.ScriptDetails;
            dropMessage = $"Sent to DataBase: {cData}";

            StateHasChanged();
        }
    }

    private void CreateChart()
    {
        Chart chart = new Chart()
        {
            Comments = "Comments",
            DestNode = "4321",
            LinkName = "LinkName",
            ScriptDetails = "ScriptDetails",
            ScriptID = "666",
            SourceNode = "1234"
        };
        chartList.Add(chart);
        Chart chart2 = new Chart()
        {
            Comments = "Comments",
            DestNode = "9876",
            LinkName = "LinkName",
            ScriptDetails = "ScriptDetails",
            ScriptID = "999",
            SourceNode = "12345"
        };
        chartList.Add(chart2);
        Chart chart3 = new Chart()
        {
            Comments = "Comments",
            DestNode = "142536",
            LinkName = "LinkName",
            ScriptDetails = "ScriptDetails",
            ScriptID = "888",
            SourceNode = "980756"
        };
        chartList.Add(chart3);
    }
}

The drag image is the entire grid. I understand why it is, because I wrapped the whole grid as Draggable, that was the only place it would work.

Hoping you guys can do this a little better. I do have a contract, so if you need to email please do. Thanks for taking the time to look at this.

Kind regards,
Orlando

2

You can probably make it a bit better if you use the HeaderTemplate of the columns and add the draggable div there.

<RadzenGridColumn TItem="Chart" Property="LinkName" Title="Link Name" FormatString="{0:0.00000 THz}" Width="105px">
     <HeaderTemplate>
          <div class="draggable">
              Link Name
         </div>
     </HeaderTemplate>
</RadzenGridColumn>
3

Hello,

Thank you for your response.

Is there any plan to support Drag and Drop intrinsically?

Thanks,
Orlando

1 Like
4

The RadzenDataGrid supports column reordering through drag and drop. Other forms of drag and drop are not planned.

5

Neither of these solutions work for me. I get a design time error on

`Drop="@OnDrop"
Converting method group "OnDrop" to non-delegate type object. Did you intend to invoke a method?

private void OnDrop(string data)
{

    dropMessage = $"Dropped: {data}";

    // Important: Invoke StateHasChanged() to update the page
    StateHasChanged();
}

Could it be something with 6.0?

`

6

Yes it is a problem with Net 6, but not Net 6 and Radzen. From what you described it sounds like you are developing a Blazor web application that targets Net 6 and using Visual Studio 2019 to do so.

MS intentionally made it difficult to work with Net 6 with VS 2019, and according to them only VS 2022 supports Net 6.

It's likely that if you build the application it will compile and run. There a few options,
you could grab the VS 2022 preview and everything will be fine, the design errors will disappear.

Alternately Visual Studio Code in conjunction with the command line dotnet commands works pretty good, but hard to setup, and manage so not that great for large projects.

If you want to keep on using VS 2019, even though the new C# 10 features will be unavailable, you can just ignore the red squiggly lines, or you can try opening the project file and adding the following between the property group tags:

<UseRazorSourceGenerator>false</UseRazorSourceGenerator>

So for example for the BlazorDragAndDrop example in github your project file might look like this:

<Project Sdk="Microsoft.NET.Sdk.Web">
  <PropertyGroup>
    <TargetFramework>net6.0</TargetFramework>
	<UseRazorSourceGenerator>false</UseRazorSourceGenerator>
  </PropertyGroup>
</Project>

This should disable the features that are causing the design time errors for you.