Drag'n Drop TableRow

[NeoCoderMatrix86]

Hello,
I'm using Blazorise inside a little project (https://neocodermatrix86.github.io/AudioCuesheetEditor/).
Is it possible to have TableRows "draggable" and have a drag and dropped event? It would be used for reordering the table rows by the user.
Thanks for your help :)!

[stsrki]

Wow, a very nice app you got there!

Drag is currently not possible out of the box. You can try just adding events directly to the component. Blazorise support attribute splitting so they should be picked up.

Example

<TableRow @ondragstart="@OnDragStartHandler">

Btw, once your app is ready, can I announce it to the public? Just say when ;)

[NeoCoderMatrix86]

Yes, you can :). Thanks again and for your help also. Great framework 👍 :)

[NeoCoderMatrix86]

So I tried a bit around and currently I'm stuck. I need to have a @ondragstart which prevents default. But when I enter "@ondragstart="() => TrackTableRowOnDragStart(track) @ondragstart:preventDefault" I can not compile. With default blazor this is possible. Do you have an Idea, why this fails?

[NeoCoderMatrix86]

Basically I'm trying to implement something like this: https://github.com/phuoc-ng/html-dom/blob/master/demo/drag-and-drop-table-row/index.html
Moving a Row and afterwards recalculating stuff in an "HandleDrop" method.

[stsrki]

You're right, it's not possible to define @ondragstart:preventDefault. Can you open a new ticket and I can try adding new events to table component(s).

[NeoCoderMatrix86]

I opened Ticket #1801. I will work on this the next days, didn't quite get it till now, since I'm stuck a bit in CSS and javascript.

[stsrki]

Some suggestions for your app. You can use the new Blazorise localization. It will work better than native Blazor and will not require a page refresh.

[NeoCoderMatrix86]

Do you have a simple example on how to set up Blazorise localization?

[stsrki]

You can see an example in the demo https://github.com/stsrki/Blazorise/blob/master/Demos/Blazorise.Demo/Layouts/MainLayout.razor#L257

And in the documentation https://blazorise.com/docs/helpers/localization/

[NeoCoderMatrix86]

Good starting point. But it is not mentioned how to set it up in Program.cs and how I get it to use the Resource files?! Also the "ITextLocalizerService" is not known in my project, so do I need to add another package?

[stsrki]

You don't need to set up anything in Program.cs or Startup.cs. Everything is already done by Blazorise. You just need to inject to use it [Inject] protected ITextLocalizerService LocalizationService { get; set; }. And change the culture by LocalizationService.ChangeLanguage( "es" );.

ITextLocalizerService is under the Blazorise.Localization namespace so just add the @using Blazorise.Localization.

[NeoCoderMatrix86]

Ok, I found the problem: I use Version 0.9.2.5, the localization is only available in Version 0.9.3. Thanks for your support, I will change it the next days :).