Using nested value for object with in custom column.

[Sean Hamilton]

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]

  

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

            try 

            { 

                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; 

            } 

            catch 

            { 

                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. 

 

Local service: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ej2-aspcore-file-provider-master426158965.zip 

 

Sample link: https://stackblitz.com/edit/angular-ujnbcw?file=main.ts 

 

Note: Run the local service and refer the local host URL in file manager sample. 

 

Please let us know, if you have any concerns. 

 

 

Regards, 

Keerthana.