Sample Applications / File Manager Template / 

File Manager Template Application

The KendoReact FileManager is an Explorer-like application enabling you to manage files and folders. You can show additional information about the selected file in a template-customizable Preview Pane, which you can show or hide through a switch button. The application is built entirely with KendoReact components.

The File Manager Sample App was created with KendoReact, a professionally built commercial UI library. To try out the components used in this app, you need to sign up for a 30-day trial, which gives you access to the full KendoReact library.

How to Run the Demo

Whether you are looking for examples how to use KendoReact in applications, or for a starting point for your own dashboards, head over to the live File Manager React Application. You can find the application's source code on GitHub.

To play with the demo and see how it’s built, you may want to run it locally:

  1. Clone or download the source code from GitHub.
  2. Install the required dependencies with the npm install --save command.
  3. Make sure you have activated your license
  4. Use npm start or yarn start command to start the application.
  5. Open http://localhost:3000 to view it in the browser.

About the App

The new KendoReact File Manager Template application is a sample application that developers can use as a demo for how to manage a file system and to perform the most common folder/file operations with KendoReact. The template is built entirely with KendoReact components and includes the React Grid, TreeView, Toolbar, Breadcrumb and Upload components. You will also find examples for handling the connections between the components.

The FileManager Template also have a ContextMenu functionality which enables you to easily execute FileManager commands on the selected file or folder. The application uses the KendoReact ContextMenu and Popup components. Once an item is selected, the corresponding command is executed.

The default items in the ContextMenu are rename and delete. You can define your custom items which can execute custom commands.

Styling KendoReact Components with Ease

To make styling as easy as possible, you can use the KendoReact Themes that come out-of-the-box with this React UI components library. In this demo, we use the KendoReact Default Theme to make our components stand out and look great.

For more information on how to add one of the themes to your project, refer to the article on using the KendoReact themes in React projects.

If you're interested in applying more styling, How to Add Custom Styles to KendoReact Components with Sass is another helpful resource.

Suggested Links

Previous
Github Issues Grid
Next
NodeJS Express Server Grid

In this article

Not finding the help you need?

Contact Support