Perform search by placing search box outside .NET Core FileExplorer
In FileExplorer, the search box is placed inside its toolbar by default. You can perform the search operation by placing the search box outside the toolbar. This can be achieved by overriding the search function of FileExplorer and invoking this function in input key up event. Refer to the following code sample.
ASP.NET CORE
[View page]
Search<input type="text" id="search" placeholder="Type Keyword Search File" value="" />
<script>
$(function () {
// Search bar key up event
$("#search").keyup(function () {
var fileObj = $("#default").data("ejFileExplorer");
if (fileObj.model.path + '/' === fileObj.model.selectedFolder && this.value == "") {
fileObj.refresh(fileObj.model.path);
}
else {
// Invoke FileExplorer search functionality manually
fileObj._searchbar = $(this);
fileObj._searchFiles(this);
}
});
var click = ej.FileExplorer.prototype._searchFiles;
// Override the FileExplorer search functionality
ej.FileExplorer.prototype._searchFiles = function (e) {
this._queryString = "*" + e.value + "*";
click.call(this, this.model.selectedFolder);
}
});
</script>
Final output
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/FileExplorer1708628066
Conclusion
I hope you enjoyed learning on how to perform search by placing search box outside the FileExplorer.
You can refer to our ASP.NET Core FileExplorer feature tour page to know about its other groundbreaking feature representations. You can also explore our documentation to understand how to present and manipulate data.
For current customers, you can check out our WinForms components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our ASP.NET Core PDF and other ASP.NET Core components.
If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
