How to add checkbox in FileManager navigation pane header?

[Syncfusion Support]

Answer:

We can add the header element to the navigation pane using JS interop. In FileManager component, OnSuccess event is triggered after the files/folder loaded in FileManager component. Refer to the below code snippet.

<SfFileManager ID="filemanager" @ref="FileManager" AllowDragAndDrop="true">

<FileManagerEvents OnSuccess="success">FileManagerEvents>

<FileManagerAjaxSettings Url="/api/Home/FileOperations"

UploadUrl="/api/Home/Upload"

DownloadUrl="/api/Home/Download"

GetImageUrl="/api/Home/GetImage">

FileManagerAjaxSettings>

SfFileManager>

@code {

SfFileManager FileManager;

[Inject]

public IJSRuntime JSRuntime { get; set; }

public void success()

{

JSRuntime.InvokeAsync<string>("FileManager");

}

}

Host.cshtml

<script>

function FileManager(args) {

if (!document.getElementsByClassName("custom_checkbox")[0]) {

var element = document.getElementById("filemanager_navigation");

var newItem = document.createElement("input");

newItem.type = 'checkbox';

var newItem1 = document.createElement("span");

newItem1.appendChild(document.createTextNode("Header Element"));

newItem.setAttribute("class", "custom_checkbox");

newItem1.setAttribute("class", "header");

element.insertBefore(newItem1, element.children[0]);

element.insertBefore(newItem, element.children[0]);

}

}

script>

Find the sample for add checkbox in FileManager navigation pane header from here.