How to use outside textbox to perform search operation in EJ2 File Manager?
Requirement
How to use outside textbox to perform search operation in EJ2 File Manager.
Solution
We can achieve this requirement in File Manager component. To achieve this, first we need to hide the File Manager’s search box by setting display as none for e-search-wrap class of the default search box element. Refer the below code snippet.
.e-search-wrap { display: none; }
|
After that, we need to create an input text box outside the File Manager component (anywhere in the html page) and bind the keyup() event to it.
In File Manager component, we have provided the filtering support. When calling the filterFiles() method, it triggers the custom operation in controller side. Using the method, we can perform search operations based on the requirement we can pass the searchString as parameter. Refer the below code snippet.
<input class="e-input" id="input" type="text" placeholder="Enter Search value" onkeyup="Keyup(this)" />
<script>
function Keyup(args) {
// Get the FileManager Instances.
var filemanagerInstance = document.getElementById('filemanager').ej2_instances[0];
var input = document.getElementById("input").value;
// Maintain the search value
var objectValue = { searchString: input }
// Send the search value to the controller side.
filemanagerInstance.filterFiles(objectValue);
}
</script>
CSHTML
<ejs-filemanager id="filemanager" height="300px" allowMultiSelection="false" view="Details" > <e-filemanager-ajaxsettings url="/Home/FileOperations" downloadUrl="/Home/Download" getImageUrl="/Home/GetImage" uploadUrl="/Home/Upload"> </e-filemanager-ajaxsettings> </ejs-filemanager>
In controller side, it triggers the filter method. Using this method, we can perform the search operations, refer to the below code block.
case "filter":
if (args.SearchString == "")
{
// Perform read operation while search string is empty.
return this.operation.ToCamelCase(this.operation.GetFiles(args.Path, args.ShowHiddenItems));
}
else
{
// Perform Search operation while serach string has value.
args.SearchString = args.SearchString + "*";
return this.operation.ToCamelCase(this.operation.Search(args.Path, args.SearchString, args.ShowHiddenItems, args.CaseSensitive));
}
Sample link:
https://www.syncfusion.com/downloads/support/directtrac/general/ze/Filemanage72899747.zip
