This is a migrated thread and some comments may be shown as answers.

MVC TreeView

14 Answers 483 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Gita
Top achievements
Rank 1
Gita asked on 19 Nov 2013, 06:17 AM
Can you give me complete code please for entity, controller, and view in JSP MVC (Spring Framework)?
Thanks

14 Answers, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 21 Nov 2013, 07:01 AM
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!
0
Gita
Top achievements
Rank 1
answered on 21 Nov 2013, 07:09 AM
Thx for reply..
I forgot to tell that I mean controller, etc code for tree view in binding to remote data
0
Petur Subev
Telerik team
answered on 21 Nov 2013, 11:06 AM
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!
0
Gita
Top achievements
Rank 1
answered on 22 Nov 2013, 02:47 AM
What is the difference between EmployeeDao and DetailedEmployee? Can you describe the list of column?
Thank you
0
Gita
Top achievements
Rank 1
answered on 22 Nov 2013, 08:57 AM
Thank you Petur
My treeview is done, but I have some problem again
How to hide scrollbar in treeview?
0
Petur Subev
Telerik team
answered on 22 Nov 2013, 02:55 PM
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!
0
Gita
Top achievements
Rank 1
answered on 25 Nov 2013, 08:23 AM
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
0
Petur Subev
Telerik team
answered on 27 Nov 2013, 09:15 AM
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!
0
Gita
Top achievements
Rank 1
answered on 28 Nov 2013, 02:50 AM
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
0
Petur Subev
Telerik team
answered on 29 Nov 2013, 01:31 PM
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!
0
Gita
Top achievements
Rank 1
answered on 02 Dec 2013, 04:28 AM
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
0
Petur Subev
Telerik team
answered on 03 Dec 2013, 03:15 PM
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!
0
Gita
Top achievements
Rank 1
answered on 05 Dec 2013, 11:13 AM
Yup, I use ajax..

How can I expand and collapse node tree with single click?
0
Petur Subev
Telerik team
answered on 06 Dec 2013, 09:02 AM
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!
Tags
TreeView
Asked by
Gita
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Gita
Top achievements
Rank 1
Share this question
or