few question regarding file manager control

Question

I'm trying to implement file manager in my project. Theres few things I want to implement but not getting if we can achieve in file manager control.

adding click event for custom column in detail view.
ability to use variables/function define in my component.
[hidden] attribute doesn't work in my custom column template.
conditional column style.

please help me clarify if we can achieve the above feature. Thanks

Indhumathy Loganathan · Accepted Answer

Hi Jialing, 
 
Thank you for the provided details. 
 
Query 1: Ability to use variables/function 
 
By default, FileManager Template details render based on service provider datasource. So you cannot use outside component variables and function inside the template. 
 
Query 2: Hidden attribute for custom column 
 
The FileManager structure is designed based on the Grid. If you set hidden as true for a custom column it will not work for the cell elements. The hidden attribute doesn’t even work for the table td element. 
 
Please refer to the below links. 
 
https://github.com/angular/angular/issues/16461 
 
https://stackoverflow.com/questions/509711/why-does-overflowhidden-not-work-in-a-td 
 
If you want to remove the column based on a condition, you can set display property as none for that particular column. 
 
Please let us know if you need any further assistance. 
 
Regards, Indhumathy L

Indhumathy Loganathan · Answer

Hi Jialing, 
 
Greetings from Syncfusion support. 
 
We have validated your requirement in FileManager component. Please find the below details for your queries. 
 
Query 1: Click event for custom column in detail view 
 
You can add a button in column template and include click event for that button through fileLoad event in FileManager component. Please refer to the below code snippet. 
 




fileLoad(args) { 
// Check the FileManager view 
if (args.module == "DetailsView") { 
  // Click event for button component 
  args.element.querySelector(".e-btn").onclick = args => { 
            alert("event triggered"); 
  }; 
}} 
 
Query 2: Ability to use variables/function 
 
We are unable to understand the requirement. Please clear the term “ability to use variables/function define in my component” mentioned in your update. Whether you want to use the variable/function declared outside FileManager component within the FileManager template. 
 
Query 3: Hidden attribute for custom column 
 
We need some more additional details to understand your exact requirement. Whether you want to hide the entire column in the FileManager. Please share us your tried out code blocks. 
 
Query 4: Conditional column style 
 
You can include your own custom style for a specific column in details view by using the class name of that column. We have customized the background color of a specific column in a button click. 
 




public customStyle() { 
// Added custom style for a specific column. 
var column = document.querySelectorAll(".e-date"); 
for (var i = 0; i < column.length; i++) { 
  var classList = document.getElementsByClassName("e-date")[i].classList; 
  if (classList.contains("e-custom")) { 
            classList.remove("e-custom"); 
  } else { 
            classList.add("e-custom"); 
  } 
} 
} 
 
Please find the sample demonstrating the solution. 
 
https://stackblitz.com/edit/angular-custom-column?file=app.component.ts 
 
Refer to the below links to know more about File Manager component. 
 
Documentation: https://ej2.syncfusion.com/angular/documentation/file-manager/getting-started/ 
 
Demo: https://ej2.syncfusion.com/angular/demos/#/material/file-manager/overview 
 
API: https://ej2.syncfusion.com/angular/documentation/api/file-manager/ 
 
Please let us know if you need any further assistance. 
 
Regards, 
Indhumathy L

Jialing · Answer

Thanks for quick response!

For question two:

I want to use the variable/function declared outside FileManager component within the FileManager template. I have declared some variable in my own component and want to use in fileManager template. and file manager should be able detect the change of the variable?

ex: I declared a variable showDescription in my component and want to be able to display an element based on the value.

                { field: '', headerText: '', width: 10, template: `showDescription">`}

For question three:

I have the following custom column template:

                { field: '', headerText: '', width: 10, template: ` [hidden]="!${trash}">`}

I have the hidden attribute that I want to hide the particular column of a row if condition meet. 