This example demonstrates how to customize the File Manager toolbar by adding a search box, separate icons
for switching between Details and Large Icons view, and a Preview Pane option. The
search box allows users to filter files as they type using the filterFiles
method. The Preview Pane icon enables users to view detailed information about selected files or folders in a
side panel, which can be toggled on or off from the toolbar.
In this sample, the JavaScript File Manager control has been enhanced with custom toolbar items to improve usability: Search box: Integrated into the toolbar, this input field allows users to filter files dynamically as they type. The search functionality is achieved using the File Manager control’s filterFiles method. In this sample, the search is configured with filterType: 'startsWith', so only items beginning with the entered text are shown. Details View: A toolbar icon that switches the File Manager layout to the details view, displaying files and folders in a grid with metadata. Large Icons View: A toolbar icon that switches the File Manager layout to large icons view, displaying files and folders as thumbnails. Preview Pane: A toolbar icon that toggles a sidebar pane to show detailed information about the selected file or folder, including type, size, location, and modified date. Users can also rename items directly from the preview pane. To enable the search box in the toolbar, the server must handle the filter action. case "filter": if (args.SearchString == "") { // Perform read operation while search string is empty. return this.operation.ToCamelCase(this.operation.GetFiles(args.Path, args.ShowHiddenItems)); } else { // Perform Search operation while serach string has value. args.SearchString = args.SearchString + "*"; return this.operation.ToCamelCase(this.operation.Search(args.Path, args.SearchString, args.ShowHiddenItems, args.CaseSensitive)); } With this change, the filterFiles method in the client can send search requests to the server, making the toolbar search work seamlessly.