We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Using nested value for object with in custom column.

Thread ID:





149601 Dec 2,2019 09:24 PM UTC Dec 3,2019 12:35 PM UTC Angular - EJ 2 1
Tags: FileManager
Sean Hamilton
Asked On December 2, 2019 09:24 PM UTC

We have a object returned from our API like the following example:

     "name": "filename",
     "dateModified: "02/12/2019",
     "size": 23345345,
     "data": [
          "name": "name1",
          "value": "value"
          "name": "name2",
          "value": "some value"

I can quite easily add data.name to column headers but using the following I cannot get the values to display in the File Manager:

field: "name1",
headerText: "Name",
minWidth: 120,
width: "190",
template: "${data[0].value}"

Is there a way that we can get these nested values to display in the File Manager?

Keerthana Rajendran [Syncfusion]
Replied On December 3, 2019 12:35 PM UTC

Hi Sean, 
Good day to you,  
We have checked your reported query for nested value in columns. Yes, it is possible to achieve this in file manager component. You can pass the data settings based on your requirement and display the column value as nested declared value. To achieve your requirement, we have passed the custom value. Refer to the below code snippet. 
switch (args.Action) 
                case "read": 
                    return this.getFiles(args); 
public object getFiles(FileManagerDirectoryContent args) 
            FileResponse readResponse = new FileResponse(); 
                var value = this.operation.GetFiles(args.Path, args.ShowHiddenItems, args.Data); 
                DirectoryContent cwd = new DirectoryContent(); 
                readResponse.CWD = JsonConvert.DeserializeObject<DirectoryContent>(JsonConvert.SerializeObject(value.CWD)); 
                readResponse.Files = JsonConvert.DeserializeObject<IEnumerable<DirectoryContent>>(JsonConvert.SerializeObject(value.Files)); 
                foreach (DirectoryContent file in readResponse.Files) 
                    //Add the custom data object 
                    CustomData value1 = new CustomData(); 
                    Value1.name = "name1_"+ file.Name; 
                    CustomData[] newData = new CustomData[] { value1 }; 
                    file.custom = newData; 
                readResponse.Details = value.Details; 
                readResponse.Error = value.Error; 
                return readResponse; 
                ErrorDetails er = new ErrorDetails(); 
            return this.operation.ToCamelCase(this.operation.GetFiles(args.Path, args.ShowHiddenItems)); 
    public class DirectoryContent 
        public string Path { get; set; } 
               .. . 
        public CustomData[] custom { get; set; } 
Display the customData value in detailsviewSettings of file manager component. Refer to the below code snippet. 
  this.detailsViewSettings = { 
            columns: [ 
                {field: 'name', headerText: 'File Name', minWidth: 120, width: 'auto',template: '${custom[0].name}'}, 
                {field: 'size', headerText: 'File Size',minWidth: 50, width: '110', template: '${size}'}, 
                    { field: '_fm_modified', headerText: 'Date Modified',minWidth: 50, width: '190'} 
We have prepared a sample for your reference, refer the sample link below. 
Note: Run the local service and refer the local host URL in file manager sample. 
Please let us know, if you have any concerns. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon