1. Home
  2. Forum
  3. Angular - EJ 2
  4. Details View Producing Errors

Details View Producing Errors

EDIT: This seems to happen when i try to change the toolbar menu items once it's loaded...

if(!this.auth.getLoggedInUser().manager || this.auth.hasRole('ROLE_ADMIN')){

  ctxfile.push('Delete');
  ctxfolder.push('Delete');
  layout.push('Delete');
  items.push('Download');
  items.push('Upload');
  layout.push('Upload');
}

this.toolbarSettings = {
  items: items,
  visible: true
};

Strangely this code works fine in the large icon view mode. Essentially i need to change what shows on the toolbar based on the current user. I'm assuming there is a better way of doing it? (sorry i couldn't post this at the bottom because the black code area won't let me go below it)

I've just decided to switch the file manager to Details view and it's not loading any of the files in the right pane.

core.js:6014 ERROR TypeError: format.split is not a function
    at Object.customFormat (ej2-base.es2015.js:3285)
    at Function.numberParser (ej2-base.es2015.js:1954)
    at Internationalization.getNumberParser (ej2-base.es2015.js:2320)
    at ValueFormatter.getParserFunction (ej2-grids.es2015.js:44)
    at new Column (ej2-grids.es2015.js:190)
    at prepareColumns (ej2-grids.es2015.js:16412)
    at Grid.render (ej2-grids.es2015.js:12242)
    at Grid.appendTo (ej2-base.es2015.js:6850)
    at DetailsView.render (ej2-filemanager.es2015.js:7753)
    at DetailsView.onFinalizeEnd (ej2-filemanager.es2015.js:8290)
defaultErrorLogger @ core.js:6014



All i see is the loading spinner. The left hand pane with the tree structure is loading fine. Nothing has changed on the back-end, large icon view works fine, i've literally just changed to Details view.

The php code hasn't changed at all (works in large icon view):

$folders = [];
$openFolder = opendir($privateBasePath);
while ($folder = readdir($openFolder)) {
    if ($folder != '.' && $folder != '..') {


        $folders[] = (object)[
            'action' => null,
            'data' => null,
            'dateCreated' => '2019-11-04T11:53:34.2297495+00:00',
            'dateModified' => '2019-11-04T11:53:34.2297495+00:00',
            'filterId' => null,
            'filterPath' => $requestPath,
            'hasChild' => $this->folderHasChildren($privateBasePath . $folder),
            'id' => null,
            'isFile' => is_dir($privateBasePath . $folder) ? false : true,
            'name' => is_dir($privateBasePath . $folder) ? $folder : basename($privateBasePath . $folder),
            'names' => null,
            'newName' => null,
            'parentId' => null,
            'path' => null,
            'permission'=>null,
            'previousName' => null,
            'renameFiles' => null,
            'searchString' => null,
            'showHiddenItems' => false,
            'size' => 12403,
            'targetData' => null,
            'targetPath' => null,
            'type' => is_dir($privateBasePath . $folder) ? '' : '.'.pathinfo($privateBasePath . $folder, PATHINFO_EXTENSION),
            'uploadFiles' => null
        ];

    }
}


$response = (object)[
    'cwd' => (object)[
        'action' => null,
        'caseSensitive' => false,
        'data' => null,
        'dateCreated' => '2020-10-03T15:35:04.8659233+00:00',
        'dateModified' => '2020-10-03T15:35:04.8659233+00:00',
        'filterId' => null,
        'filterPath' => isset($requestPath) && !empty($requestPath) ? $requestPath : '/',
        'hasChild' => $this->folderHasChildren($privateBasePath),
        'id' => null,
        'isFile' => is_dir($privateBasePath . $folder) ? false : true,
        'name' => basename($privateBasePath . $folder),
        'names' => null,
        'newName' => null,
        'parentId' => null,
        'permission' => null,
        'previousName' => null,
        'renameFiles' => null,
        'searchString' => null,
        'showHiddenItems' => false,
        'size' => is_dir($privateBasePath . $folder) ? null :  filesize($privateBasePath . $folder),
        'targetData' => null,
        'targetPath' => null,
        'type' =>is_dir($privateBasePath . $folder) ? '' :  pathinfo($privateBasePath . $folder, PATHINFO_EXTENSION),
        'uploadFiles' => null

    ],
    'details' => null,
    'error' => null,
    'files' => $folders
];

And i just enabled the nav pane on the left in angular...
@Input() navPaneSettings: FMNavPaneSettings = {
  visible:true
};

7 Replies
SP Sowmiya Padmanaban Syncfusion Team December 14, 2020 11:43 AM UTC

Hi Glen Elkins,  
 
Greetings from Syncfusion support. 
 
Based on your shared details, we suspect that you want to hide and enable some toolbar items when viewing any specific folders or user. 
 
You can achieve your requirement by using enableToolbarItems and disableToolbarItems method. 
 
For your reference, we have hide the Upload toolbar items on root path and show the corresponding items on remaining path.  
 
Please, refer the following code snippet with above suggested solution. 
 
 created(args) { 
    /*disbale the toolbar items.*/ 
    (this.filemanager as any).disableToolbarItems(["Upload"]); 
  } 
  fileOpen(args) { 
    if ( 
      this.flag && 
      (args.module === "NavigationPane" || args.module === "BreadCrumbBar") && 
      args.fileDetails.filterPath === "" 
    ) { 
      // Disable new folder toolbar item on root path 
      (this.filemanager as any).disableToolbarItems(["Upload"]); 
      this.flag = false; 
    } else if (!this.flag) { 
      // Enable new folder toolbar item other than root path 
      (this.filemanager as any).enableToolbarItems(["Upload"]); 
      this.flag = true; 
    } 
  } 
 
<style> 
.e-toolbar .e-toolbar-items .e-toolbar-item.e-overlay { 
  display: none; 
} 
 
</style> 
 
 
Please, refer the below sample link. 
 
 
We suggest you to use the above approach to achieve your requirement with FileManager component. 
 
Also, check out the following links to know how to customize the toolbar of FileManager. 
 
 
 
If the issue still persist, could you please share the FileManager definition code and also share us the issue recorded video footage. This information would help us to provide you prompt solution. 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


GE Glen Elkins February 24, 2021 07:09 AM UTC

The problem isnt really the toolbar as such. Its the following js error:

ore.js:6014 ERROR TypeError: format.split is not a function
    at Object.customFormat (ej2-base.es2015.js:3285)
    at Function.numberParser (ej2-base.es2015.js:1954)
    at Internationalization.getNumberParser (ej2-base.es2015.js:2320)
    at ValueFormatter.getParserFunction (ej2-grids.es2015.js:44)
    at new Column (ej2-grids.es2015.js:190)
    at prepareColumns (ej2-grids.es2015.js:16412)
    at Grid.render (ej2-grids.es2015.js:12242)
    at Grid.appendTo (ej2-base.es2015.js:6850)
    at DetailsView.render (ej2-filemanager.es2015.js:7753)
    at DetailsView.onFinalizeEnd (ej2-filemanager.es2015.js:8290)
defaultErrorLogger @ core.js:6014

If yoh refer to my origjnal post i mentioned this happens as soon as i change the view mode to details but works perfectly fine in large icon view.

This code in angular is all i do to change to details view in ngOnInit()

this.view = ‘Details’;

Then that is when the error shows.

In the php code i showed above where the data is built on the back end, is there something missing for details view to work? As i say large icon view works fine.

KR Keerthana Rajendran Syncfusion Team February 26, 2021 01:38 PM UTC

Hi Glen, 

Sorry for the inconvenience. 

To proceed further with the reported issue, we request you to share the following details. 

  1. Whether you are using custom columns in FileManager?
  2. Complete code snippet of the FileManager.
  3. Response received in JSON format.

These details would help us to serve you better. 

Regards, 
Keerthana. 


GE Glen Elkins replied to Keerthana Rajendran March 8, 2021 08:35 AM UTC

Hi Glen, 

Sorry for the inconvenience. 

To proceed further with the reported issue, we request you to share the following details. 

  1. Whether you are using custom columns in FileManager?
  2. Complete code snippet of the FileManager.
  3. Response received in JSON format.

These details would help us to serve you better. 

Regards, 
Keerthana. 


Sorry for the delay.

We are not using custom columns.

In angular, we are using the following code for the file manager:

<ejs-filemanager (menuClick)="menuClick($event)" (fileSelect)="fileSelected($event)" (failure)="failed($event)" (beforePopupOpen)="preventImagePopup($event)" (fileOpen)="openFile($event)"  [rootAliasName]="rootAlias" [view]="view" [showThumbnail]="false" [toolbarSettings]="toolbarSettings" [contextMenuSettings]="contextMenuSettings" [allowMultiSelection]="true" id='default-filemanager' [height]="'800px'" [path]="basePath"  [ajaxSettings]="ajaxSettings" [allowDragAndDrop]="false" [navigationPaneSettings]="navPaneSettings"></ejs-filemanager>



@Input() hostUrl: string = environment.apiUrl; // has a slash on the end
@Input() ajaxSettings: FMAjaxSettings = {
  url: this.hostUrl + 'filemanager/fileoperations',
  getImageUrl: this.hostUrl + 'filemanager/GetImage',
  uploadUrl: this.hostUrl + 'filemanager/upload',
  downloadUrl: this.hostUrl + 'filemanager/download'
};
@Input() basePath: string = '/';

@Input() rootAlias: string = 'Start';

@Input() lockPath: string = '';
public contextMenuSettings: any = {
  //file: ['Open','|', 'Cut', 'Copy', '|', 'Delete', 'Rename'],
  file: ['Open','|', 'Cut', 'Copy', '|', 'Rename'],
  //folder: ['Open','|', 'Cut', 'Copy', 'Paste', '|', 'Delete', 'Rename'],
  folder: ['Open','|', 'Cut', 'Copy', 'Paste', '|', 'Rename'],
  layout: ['Refresh', '|', 'Paste', '|', 'NewFolder', 'Upload', '|', 'SelectAll'],
  visible: true
}

public toolbarSettings: any =  {
  //items: ['NewFolder', 'Upload', 'Copy', 'Paste', 'Download', 'Rename', 'Refresh'],
  items: ['NewFolder', 'Copy', 'Paste', 'Rename', 'Refresh'],
  visible: true
};



And just get the error i posted last time. But it all works in large icon mode


Below is example JSON response for a specific folder:

{"cwd":{"action":null,"caseSensitive":false,"data":null,"dateCreated":"2020-10-03T15:35:04.8659233+00:00","dateModified":"2020-10-03T15:35:04.8659233+00:00","filterId":null,"filterPath":"\/We Buy Any House\/Glen\u0027s Tasks\/","hasChild":true,"id":null,"isFile":false,"name":"Glen\u0027s Tasks","names":null,"newName":null,"parentId":null,"permission":null,"previousName":null,"renameFiles":null,"searchString":null,"showHiddenItems":false,"size":null,"targetData":null,"targetPath":null,"type":"","uploadFiles":null},"details":null,"error":null,"files":[{"action":null,"data":null,"dateCreated":"2019-11-04T11:53:34.2297495+00:00","dateModified":"2019-11-04T11:53:34.2297495+00:00","filterId":null,"filterPath":"\/We Buy Any House\/Glen\u0027s Tasks\/","hasChild":false,"id":null,"isFile":false,"name":"Accounts","names":null,"newName":null,"parentId":null,"path":null,"permission":null,"previousName":null,"renameFiles":null,"searchString":null,"showHiddenItems":false,"size":0,"targetData":null,"targetPath":null,"type":"","uploadFiles":null},{"action":null,"data":null,"dateCreated":"2019-11-04T11:53:34.2297495+00:00","dateModified":"2019-11-04T11:53:34.2297495+00:00","filterId":null,"filterPath":"\/We Buy Any House\/Glen\u0027s Tasks\/","hasChild":true,"id":null,"isFile":false,"name":"Drawings","names":null,"newName":null,"parentId":null,"path":null,"permission":null,"previousName":null,"renameFiles":null,"searchString":null,"showHiddenItems":false,"size":0,"targetData":null,"targetPath":null,"type":"","uploadFiles":null},{"action":null,"data":null,"dateCreated":"2019-11-04T11:53:34.2297495+00:00","dateModified":"2019-11-04T11:53:34.2297495+00:00","filterId":null,"filterPath":"\/We Buy Any House\/Glen\u0027s Tasks\/","hasChild":false,"id":null,"isFile":true,"name":"Marketing Mandatory Task Lists.xlsx","names":null,"newName":null,"parentId":null,"path":null,"permission":null,"previousName":null,"renameFiles":null,"searchString":null,"showHiddenItems":false,"size":12495,"targetData":null,"targetPath":null,"type":".xlsx","uploadFiles":null},{"action":null,"data":null,"dateCreated":"2019-11-04T11:53:34.2297495+00:00","dateModified":"2019-11-04T11:53:34.2297495+00:00","filterId":null,"filterPath":"\/We Buy Any House\/Glen\u0027s Tasks\/","hasChild":false,"id":null,"isFile":true,"name":"Option agreement incorporating the Standard Commercial Property Conditions Third Edition 2018 Revision (2).doc","names":null,"newName":null,"parentId":null,"path":null,"permission":null,"previousName":null,"renameFiles":null,"searchString":null,"showHiddenItems":false,"size":403968,"targetData":null,"targetPath":null,"type":".doc","uploadFiles":null},{"action":null,"data":null,"dateCreated":"2019-11-04T11:53:34.2297495+00:00","dateModified":"2019-11-04T11:53:34.2297495+00:00","filterId":null,"filterPath":"\/We Buy Any House\/Glen\u0027s Tasks\/","hasChild":true,"id":null,"isFile":false,"name":"Quotes","names":null,"newName":null,"parentId":null,"path":null,"permission":null,"previousName":null,"renameFiles":null,"searchString":null,"showHiddenItems":false,"size":0,"targetData":null,"targetPath":null,"type":"","uploadFiles":null},{"action":null,"data":null,"dateCreated":"2019-11-04T11:53:34.2297495+00:00","dateModified":"2019-11-04T11:53:34.2297495+00:00","filterId":null,"filterPath":"\/We Buy Any House\/Glen\u0027s Tasks\/","hasChild":false,"id":null,"isFile":true,"name":"chewbacca-solo-a-star-wars-story-age-1100459-1280x0-1544456080.jpg.jpg","names":null,"newName":null,"parentId":null,"path":null,"permission":null,"previousName":null,"renameFiles":null,"searchString":null,"showHiddenItems":false,"size":80070,"targetData":null,"targetPath":null,"type":".jpg","uploadFiles":null},{"action":null,"data":null,"dateCreated":"2019-11-04T11:53:34.2297495+00:00","dateModified":"2019-11-04T11:53:34.2297495+00:00","filterId":null,"filterPath":"\/We Buy Any House\/Glen\u0027s Tasks\/","hasChild":false,"id":null,"isFile":true,"name":"contacts.xls","names":null,"newName":null,"parentId":null,"path":null,"permission":null,"previousName":null,"renameFiles":null,"searchString":null,"showHiddenItems":false,"size":471040,"targetData":null,"targetPath":null,"type":".xls","uploadFiles":null},{"action":null,"data":null,"dateCreated":"2019-11-04T11:53:34.2297495+00:00","dateModified":"2019-11-04T11:53:34.2297495+00:00","filterId":null,"filterPath":"\/We Buy Any House\/Glen\u0027s Tasks\/","hasChild":false,"id":null,"isFile":true,"name":"option_agreement - with guarantee (Formatted)(1).docx","names":null,"newName":null,"parentId":null,"path":null,"permission":null,"previousName":null,"renameFiles":null,"searchString":null,"showHiddenItems":false,"size":19670,"targetData":null,"targetPath":null,"type":".docx","uploadFiles":null}]}

SP Sowmiya Padmanaban Syncfusion Team March 9, 2021 11:47 AM UTC

Hi Glen Elkins,  
 
We have tried to replicate the issue in shared code snippet with the provided details and unable to replicate it. Please refer the below validation sample. 
 
 
Kindly, share the below details to proceed further with your reported issue. 
 
1.     If possible, replicate the issue in attached sample. 
2.     Share us the video footage of your reported issue. 
3.     Share us the package version you have used in your application. 
4.     Share us a simple issue replicating sample 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


GE Glen Elkins replied to Sowmiya Padmanaban March 24, 2021 11:31 AM UTC

Hi Glen Elkins,  
 
We have tried to replicate the issue in shared code snippet with the provided details and unable to replicate it. Please refer the below validation sample. 
 
 
Kindly, share the below details to proceed further with your reported issue. 
 
1.     If possible, replicate the issue in attached sample. 
2.     Share us the video footage of your reported issue. 
3.     Share us the package version you have used in your application. 
4.     Share us a simple issue replicating sample 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


This doesn't make sense, the one yoou done looks like a replicaton of the info i sent, but i am using the same setup and the same JSON but i still just get:

core.js:6014 ERROR TypeError: format.split is not a function
    at Object.customFormat (ej2-base.es2015.js:3285)
    at Function.numberParser (ej2-base.es2015.js:1954)
    at Internationalization.getNumberParser (ej2-base.es2015.js:2320)
    at ValueFormatter.getParserFunction (ej2-grids.es2015.js:44)
    at new Column (ej2-grids.es2015.js:190)
    at prepareColumns (ej2-grids.es2015.js:16412)
    at Grid.render (ej2-grids.es2015.js:12242)
    at Grid.appendTo (ej2-base.es2015.js:6850)
    at DetailsView.render (ej2-filemanager.es2015.js:7753)
    at DetailsView.onFinalizeEnd (ej2-filemanager.es2015.js:8290)


When i switch to details view. I don't know what else i can share with you.


I am using the following packages:

"@syncfusion/ej2": "^18.3.35",
"@syncfusion/ej2-angular-filemanager": "^18.3.35",
"@syncfusion/ej2-data": "^18.3.35",


IL Indhumathy Loganathan Syncfusion Team March 25, 2021 02:32 PM UTC

Hi Glen, 
 
We have created a new incident under your direct trac account for FileManager related queries. Please follow that incident for further technical assistance. 
 
Regards,   
Indhumathy L

Loader.
Up arrow icon