How to load the files displayed in a Kendo treeview

Question

I need to display the files & folders hierarchically in a Kendo UI treeview which gets loaded from the file system using Java on the back end. I also need to load the contents of the files when they are clicked.

Can anyone suggest how to accomplish this?

Answer 1

I accomplished loading the hierarchy structure by creating two java files.

I got some folders and files inside D:/sampleFileExplorer.Using java file Api we read the file and subdirectories structure and put it inside the ArrayList of Type .In TestJava.java getFileExplorer(folder,finalList) is the method which construct the Arraylist and return it.you need to call this method from Kendo jsp and we get the result as json format.

FileExplorer.java

import java.util.ArrayList;
import java.util.List;

public class FileExplorer {

    private String id;
    private String text;
    private boolean hasFiles;
    private List<FileExplorer> items = new ArrayList<FileExplorer>();

    public String getId() {
        return this.id;
    }
    public void setId(String id) {
        this.id = id;
    }
    public String getText() {
        return this.text;
    }
    public void setText(String text) {
        this.text = text;
    }
    public List<FileExplorer> getItems() {
        return this.items;
    }
    public void setItems(List<FileExplorer> items) {
        this.items = items;
    }

    public boolean isHasFiles() {
        return this.hasFiles;
    }
    public void setHasFiles(boolean hasFiles) {
        this.hasFiles = hasFiles;
    }

}

TestJava.java

import java.io.File;
import java.util.ArrayList;
import java.util.List;

public class TestJava {


    public static void main(String[] args) {

        TestJava t=new TestJava();
        List<FileExplorer> finalList = new ArrayList<FileExplorer>();
        File folder = new File("D:/SampleFileExplorer");
            t.getFileExplorer(folder,finalList);
        t.displayFileExplorer(folder,finalList); 


    }

    public List<FileExplorer> getFileExplorer(File folder,List<FileExplorer> finalList){

        finalList = getFileOrDirectoryList(folder,finalList);
        return finalList;
    }

    public  void displayFileExplorer(File folder,List<FileExplorer> finalList){

        finalList = getFileOrDirectoryList(folder,finalList);

        for(FileExplorer file : finalList){
            System.out.println(file.getId()+" "+file.getText()+" "+file.getItems().size()+" ");
            displaySubLevels(file.getItems());
        }
    }

    public  void displaySubLevels(List<FileExplorer> subList){ //display subdirectory's content  
        if(subList != null){
            for(FileExplorer subFile : subList){
                System.out.println(subFile.getId()+" "+subFile.getText()+" "+subFile.getItems().size()+" ");
                if(subFile.getItems().size()>0){
                    displaySubLevels(subFile.getItems());
                }
            }
        }
    }



    public  List<FileExplorer> getFileOrDirectoryList(File folder, List<FileExplorer> fileList){

        File[] listOfFiles = folder.listFiles();

        for (File file : listOfFiles) {

            if(file.isDirectory()){

                FileExplorer d1 = new FileExplorer();
                d1.setId(file.getPath());
                d1.setText(file.getName());

                if(file.list().length>0)
                {
                    d1.setHasFiles(true);
                }
                else
                {
                    d1.setHasFiles(false);
                }

                File folder1 = new File(d1.getId());
                List<FileExplorer> subList = new ArrayList<FileExplorer>();
                subList = getFileOrDirectoryList(folder1, subList);
                d1.setItems(subList);
                fileList.add(d1);

            }else{
                FileExplorer f1 = new FileExplorer();
                f1.setId(file.getPath());
                f1.setText(file.getName());
                f1.setHasFiles(false);
                fileList.add(f1);
            }

        }
        return fileList;


    }

}

hello.jsp

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.1">
<html>
<head>
 <title></title>

    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>    
    <link href="<c:url value="/resources/styles/kendo.common.min.css"/>"  rel="stylesheet"/>
    <link href="<c:url value="/resources/styles/kendo.default.min.css"/>"  rel="stylesheet"/>
    <script src="<c:url value="/resources/js/jquery.min.js"/>"></script>
    <script src="<c:url value="/resources/js/kendo.all.min.js"/>"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div id="example" class="k-content">
  <div id="treeview" class="demo-section"></div>


           <script>

 (function($) {

  var homogeneous = new kendo.data.HierarchicalDataSource({
                        transport: {
                            read: {
                                url: '<c:url value="/welcome/list/"/>',
                                dataType: "json"
                            }
                        },

                        schema: {
                            model: {
                                 hasChildren: "hasFiles",
                                children: "items"
                            }
                        }
                            });



                $("#treeview").kendoTreeView({
                    dataSource: homogeneous 
                   ,
                   dataTextField: "text"
                });
                 })(jQuery);
                            </script> 


        </div>

      <div>
      </div>  

</body>
</html>

My Spring Controller HelloWorld.java

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;



@Controller
@RequestMapping("/welcome/")
public class HelloWorld {


        @RequestMapping(value = { "fileExplorer/"}, method = RequestMethod.GET )// , produces = "application/json")
    public String  readScenarioDateSetup(@ModelAttribute("userId")String userId,BindingResult result,Model model)throws Exception{

        TestJava remote=new TestJava();
        List<FileExplorer> finalList = new ArrayList<FileExplorer>();
    File folder = new File("D:/SampleFileExplorer");

    Iterable<FileExplorer> fileExp= remote.getFileExplorer(folder,finalList);
    model.addAttribute("fileExp",fileExp);
        return "hello";

    }


    @RequestMapping(value = {"/list/"}, method = RequestMethod.GET )
    public @ResponseBody Iterable<FileExplorer> readScenarioDateSetup()throws Exception{
        TestJava remote=new TestJava();
        List<FileExplorer> finalList = new ArrayList<FileExplorer>();
    File folder = new File("D:/SampleFileExplorer");

    Iterable<FileExplorer> fileExp= remote.getFileExplorer(folder,finalList);
    return fileExp;
          }
    }

After Deployed into your server ..Type url http://://welcome/fileExplorer/ you get the result.. There may be better ways to achieve this but this is how I achieved this.