Drag & Drop Not Working in SfKanban Blazor

Question

Hi,I'm using Syncfusion SfKanban in my Blazor (.NET 8) project, but the Drag & Drop feature is completely disabled.Issue:Cards are not draggable at all, even before reaching any related event.I have set AllowDragAndDrop="true", but it still doesn't work.The same code works fine in other parts of the project.Additional Info:I’ve attached my SfKanban code and relevant methods.Syncfusion is updated to the latest version.If anyone has experienced a similar issue or has any suggestions, I’d really appreciate the help.Code: ```razor @if (ProjectBoardColumnData != null && ProjectBoardColumnData.Count() != 0) { @foreach (var item in ProjectBoardColumnData) { } } افزودن پروژه protected override async Task OnInitializedAsync(){ try { CurrentUser = await UserService.GetUser(); ProjectBoardColumnData = await ProjectBoardColumnService.GetAllProjectBoardColumns(ProjectBoardId); Tasks = await ProjectService.GetAllProjects(CurrentUser.BranchId); foreach (var item in Tasks) { var assineeName = (await UserService_Service.GetUserById(item.ResponsibleId)).FullName; kanbanDatas.Add(new TasksModel { Id = item.ProjectId, Title = item.Title, Status = item.ProjectBoardColumn.Title, Summary = item.Detail, Assignee = assineeName, DateTime = item.CreatedDate.ToString() }); } } catch (Exception ex) { throw; }}Thanks! 🙏

Priyanka Karthikeyan · Answer

Hi Ali _ Eagle,

In .NET 8, it's important to apply the 'rendermode' to the project. In case of missing this, it might cause issues related to script functionalities.

To implement the render mode across your entire application, consider adding the 'rendermode' attribute within the Route tag in the App.razor file, placed inside the body tag.

[App.razor]

<body>

</body>

For more detailed insights, please visit the following blog and documentation.

Blog: https://www.syncfusion.com/blogs/post/blazor-ui-support-dotnet-8.aspx

Documentation: https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0

And Regarding the inclusion of script and style references when using Syncfusion Blazor components, it's important to ensure correct references for proper rendering. Here’s a breakdown based on the type of NuGet package you are using:

1. Common Package (Syncfusion.Blazor):

If you are using the common NuGet package (Syncfusion.Blazor) which includes all Syncfusion Blazor components, you should include the following references in your App.razor:

<!-- Include the stylesheet for the individual package -->
<link rel='nofollow' href="_content/Syncfusion.Blazor/styles/material.css" rel="stylesheet" />
<!-- Include the script for the common package --><script src="_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

2. Individual Package (Syncfusion.Blazor.Kanban):

If you are using an individual NuGet package like Syncfusion.Blazor.Kanban, make sure to include the correct script and style references. The typical references are as follows:

<!-- Include the stylesheet for the individual package -->
<link rel='nofollow' href="_content/Syncfusion.Blazor.Themes/material.css" rel="stylesheet" />
<!-- Include the script for the individual package -->
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

Important Notes:

Do not mix individual package references with common package references as it may cause components to not render properly.
Make sure to follow the exact paths for the scripts and styles to ensure they are correctly linked.

Documentation References:

Please ensure these adjustments are included in your project. If the issue persists, kindly share a runnable sample with us. This will help us validate the problem you're facing and offer more precise solutions. Thank you for your patience and cooperation.

Regards,

Priyanka K

Jörg Krause · Answer

The item's type need to be serializable with Json serializer. Without error handling non-serliazable objects might result in a silent fail.

Priyanka Karthikeyan · Answer

Hi Jörg Krause,Thank you for pointing that out. You’re absolutely right — for the drag-and-drop functionality in the SfKanban component to work correctly, the item’s type should be serializable using JSON. If the model contains non-serializable properties, it may lead to silent failures. We recommend reviewing the data model to ensure compatibility with System.Text.Json, and using [JsonIgnore] for any unsupported types. Please feel free to share your model if you'd like us to take a closer look.Regards,Priyanka K