How to change the Search bar position and Style?

[Mahesh Machina]

We want to Customize the look and feel, Position of Search bar in File manager control. Please suggest how to do that

We have created our own Search bar using Bootstrap, can we plug the search functionality to this control

Attachment: Search_requirement_f5af5bd0.zip

[Sowmiya Padmanaban]

Hi Mahesh,  

 

Greetings from Syncfusion support. 

  

We have checked your requirement that you are trying to hide the default search box in the EJ2 File Manager and trying to render search box somewhere else (outside FileManager) in the HTML Page.   

  

Your expected requirement is achievable in File Manager component. To achieve, first you 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, you need to create an input text box outside the File Manager component (anywhere in your html page) and bind the keyup() event to it.   

  

In File Manager component, we have provided the filtering support. When calling the filterFiles() public method, it triggers the custom operation in controller side. Using the method, you can perform search operations based on your requirement and 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> 

  

In your controller side, it triggers the filter method. Using this method, you can perform the search operations, refer the below code.  

  

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)); 

                    } 

  

For your reference, we have prepared a sample.  

 

Sample link : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Filemanage72899747.zip 

  

Please let us know, if you need any further assistance. 

 

 

Regards,  

Sowmiya.P 

[Mahesh Machina]

Thank you Sowmiya.

We are seeing duplicate results on filtering. How to fix this

[Sowmiya Padmanaban]

Hi Mahesh,  

  

We have validated your reported problem in our previously attached sample. We are unable to reproduce it. Can you please share us the below details, it will help us to resolve your problem at the earliest. 

 

1.      Which file provider you have used in your application? 

       https://ej2.syncfusion.com/documentation/file-manager/file-system-provider/  

2.      Share us the video footage of your issue. 

3.      Have you done any customization in FileManager component?  

4.      Share the code snippet for FileManager component definition and  controller side search functionality definition. 

  

Regards,  

Sowmiya.P 

[Mahesh Machina]

We have customized File manager control. There is a bug in our custom code.

We resolved it. Thank you, Appreciate your support

[Sowmiya Padmanaban]

Hi Mahesh,  

  

We are happy your hear that your problem has been resolved. Please contact us, if you need any help from us. We will happy to assist you. 

  

Regards,  

Sowmiya.P