How to change the drag/drop icon

[Bruno]

Hi

I used  <LargeIconsTemplate> and <NavigationPaneTemplate> to customize my views and to set customized svg file icons.

Now my problem is that on drag-and-drop file manager shows the cursor with a standard file icon beside the file name. But I prever my special svg custom icons. 

How can I achieve that?

Regards, Bruno

[Praveen Sellappan]

Hi Bruno,

 

Based on the information provided, we have validated and classified the reported scenarios regarding the “Drag-and-Drop virtual element ignores custom item templates" as a bug on our end. The fix for this issue will be included in the upcoming weekly release scheduled for July 7,2026.

 

You can track the status of the fix through the following feedback link.

 

Drag-and-Drop virtual element ignores custom item templates in Blazor | Feedback Portal

 

Disclaimer: The provided tentative release timeline is subject to change in the future based on development priorities and testing outcomes.

 

Regards,

Praveen Sellappan

[Praveen Sellappan]

Hi Bruno,

 

Thanks for your patience.

  

We are pleased to inform you that our weekly patch release has been successfully rolled out, and the issue "Drag-and-Drop virtual element ignores custom item templates" has been resolved in this release.

To access this fix, we suggest updating the package to version 34.1.30. We have also included the sample in the latest version for your reference.

Sample: Attached as a zip file.

Feedback: Drag-and-Drop virtual element ignores custom item templates in Blazor File Manager in Blazor | Feedback Portal

Release Notes:  Essential Studio for Blazor Release Notes - v34.1.30

Root cause: The drag-and-drop preview in the SfFileManager component always uses the default file icon and name layout, regardless of any custom item templates applied by the user. As a result, drag previews did not reflect custom styling or template content, and visual properties from the original template elements were not carried over to the generated preview.

Note: While resolving this issue, we noticed a sample-level styling issue in the sample application. If you are testing the fix using the sample we previously shared, please ensure that the required styles are properly included in the application. Missing these styles may affect the appearance of the drag-and-drop preview and prevent the fix from being reflected correctly during testing.

CSS:

  .nav-overlay-icon {

     position: absolute;

     bottom: 4px;

     right: 7px;

     left: auto;

     width: 14px;

     height: 14px;

     border-radius: 50%;

     display: flex;

     align-items: center;

     justify-content: center;

     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);

     border: 1px solid #ccc;

     padding: 0;

 }

    .e-nav-pane-node .nav-icon-container {

        position: relative;

        display: inline-flex;

    }

    .file-icon {

        width: 190px;

        height: 150px;

        background-repeat: no-repeat;

        background-position: center center;

        background-size: contain;

     

    }

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.

 

Regards,

Praveen Sellappan

Attachment: BlazorFileManagerSample_b2d3531e.zip