MVC TreeView

15 posts, 0 answers
  1. Gita
    Gita avatar
    12 posts
    Member since:
    Nov 2013

    Posted 19 Nov 2013 Link to this post

    Can you give me complete code please for entity, controller, and view in JSP MVC (Spring Framework)?
    Thanks
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 21 Nov 2013 Link to this post

    Hello Gita,

    The code used for the demonstrated demos is available within the tabstrip below the demo itself under the JSP tab.

    http://demos.kendoui.com/web/treeview/index.html


    Kind Regards,
    Petur Subev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET AJAX banner
  4. Gita
    Gita avatar
    12 posts
    Member since:
    Nov 2013

    Posted 21 Nov 2013 Link to this post

    Thx for reply..
    I forgot to tell that I mean controller, etc code for tree view in binding to remote data
  5. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 21 Nov 2013 Link to this post

    Hello again,

    Thank you for claryfing

    Here is the code for the controller:

    package com.kendoui.spring.controllers.treeview;
     
    import java.util.List;
    import java.util.Map;
     
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestBody;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.ResponseBody;
     
    import com.kendoui.spring.models.DetailedEmployee;
    import com.kendoui.spring.models.EmployeeDao;
     
    @Controller("treeview-remote-binding-controller")
    @RequestMapping(value="/web/treeview/")
    public class RemoteBindingController {
        @Autowired
        private EmployeeDao employee;
     
        @RequestMapping(value = "/remote-data", method = RequestMethod.GET)
        public String index() {
            return "web/treeview/remote-data";
        }
         
        @RequestMapping(value = "/remote-data/read", method = RequestMethod.POST)
        public @ResponseBody List<DetailedEmployee> read(@RequestBody Map<String, Object> model) {
            return employee.getDetailedListByEmployeeId((Integer)model.get("employeeId"));
        }
    }

    Where getDetailedListByEmployeeId signature looks like this:

    public List<DetailedEmployee> getDetailedListByEmployeeId(Integer employeeId)


    Kind Regards,
    Petur Subev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Gita
    Gita avatar
    12 posts
    Member since:
    Nov 2013

    Posted 21 Nov 2013 Link to this post

    What is the difference between EmployeeDao and DetailedEmployee? Can you describe the list of column?
    Thank you
  7. Gita
    Gita avatar
    12 posts
    Member since:
    Nov 2013

    Posted 22 Nov 2013 Link to this post

    Thank you Petur
    My treeview is done, but I have some problem again
    How to hide scrollbar in treeview?
  8. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 22 Nov 2013 Link to this post

    Hello again Gita,

    Please open separate tickets for the distinct questions.

    Treeview does not have scrollbar, the scrollbar most probably appears on your side because of the container that you put the treeview into. Consider changing its overflow CSS property.

    Kind Regards,
    Petur Subev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Gita
    Gita avatar
    12 posts
    Member since:
    Nov 2013

    Posted 25 Nov 2013 Link to this post

    Thank you again Petur. I'm very helped with your answer.
    I have some question again.
    How to get data from my treeview data in javascript?
    This is my code:
    <c:url value="${transportReadUrl}" var="transportReadUrl" />
      <kendo:treeView name="treeview" class="demo-section" dataTextField="menu_desc">
         <kendo:dataSource>
             <kendo:dataSource-transport>
                 <kendo:dataSource-transport-read url="${transportReadUrl}" type="POST"  contentType="application/json"/>    
                 <kendo:dataSource-transport-parameterMap>
                     <script>
                      function parameterMap(options,type) {
                          return JSON.stringify(options);
                      }
                     </script>
                 </kendo:dataSource-transport-parameterMap>         
             </kendo:dataSource-transport>
             <kendo:dataSource-schema>
                 <kendo:dataSource-schema-hierarchical-model id="menu_id" hasChildren="hasChildren" />
             </kendo:dataSource-schema>
         </kendo:dataSource>
     </kendo:treeView>

    How to get in javascript?
    a. menu_id
    b. other column that not in <kendo:dataSource-schema-hierarchical-model> for example "status" column
  10. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 27 Nov 2013 Link to this post

    Hello Gita,

    I assume you are looking for the dataItem method - if you pass the LI element to it you will get the model with all of its fields related to it.

    Kind Regards,
    Petur Subev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. Gita
    Gita avatar
    12 posts
    Member since:
    Nov 2013

    Posted 27 Nov 2013 Link to this post

    I have got the value from "menu_id"

    $("#treeview").dblclick(function(e) {
        var treeview = $("#treeview").data("kendoTreeView");
        var dataItem = treeview.dataItem(".k-state-selected");
        alert(dataItem.id);
    });

    But I have next question.
    My entity is
    @Column(name="menu_id")
    private String menu_id;

    @Column(name="menu_desc")
    private String menu_desc;

    @Column(name = "status")
    private String status;

    How to get value of "status" like get value of "menu_id" but the difference is, "status" is not placed in kendo treeview?
    Because I want to validate between "status" and "menu_id" in javascript.

    Thx a lot
  12. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 29 Nov 2013 Link to this post

    Hello again Gita,

    The model returned from the dataItem method should contain all the fields of the model - it should be a JSON version of your JavaScript object.

    Kind Regards,
    Petur Subev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  13. Gita
    Gita avatar
    12 posts
    Member since:
    Nov 2013

    Posted 01 Dec 2013 Link to this post

    Thanks, I've got it.

    If I refresh page, but I want my tree is not change, can I?

    For example, my tree is at left content and when I click the node, my right content is change.
    When I use request mapping at controller, my tree is from the root again.
    Can the my tree structure is not change? If can, how to make it?
    Thx
  14. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 03 Dec 2013 Link to this post

    Hello Gita,

    I am afraid I do not understand you. 

    Do you mean that you are refreshing the whole page and the TreeView expanded state is lost? If so please keep in mind persisting the expand state is not supported -  you will need to avoid reloading the whole page (consider loading the content on the right with Ajax).

    If this is not the case please elaborate.

    Kind Regards,
    Petur Subev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  15. Gita
    Gita avatar
    12 posts
    Member since:
    Nov 2013

    Posted 05 Dec 2013 Link to this post

    Yup, I use ajax..

    How can I expand and collapse node tree with single click?
  16. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 06 Dec 2013 Link to this post

    Hello Gita,

    Use the select event of the TreeView to invoke the expand method over the node that was selected.

    e.g.

    onSelect : function(){
         this.expand(e.node);
    }


    Kind Regards,
    Petur Subev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
UI for ASP.NET AJAX banner