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

Using nested value for object with in custom column.

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?

1 Reply

KR Keerthana Rajendran Syncfusion Team 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. 

Live Chat Icon For mobile
Up arrow icon