kendo-uinestedkendo-listview

Kendo ui Multi nested listview


I java a similar nested json arrayobj, It may be from 1..X (not limited)

[{"id":"25","son": [
    {"id":"26", "son":  [
            {"id":"28","son":[],"message":"my message 1","creationDate":"2016-05-26"},
            {"id":"27","son":[],"message":"my message 2","creationDate":"2016-05-26"}
        ],
        "message":"my message 3","creationDate":"2016-05-26"}
    ],"message":"my message 4","creationDate":"2016-05-26"}
]

I nedd to display it using Kendo, I am using listviewm but it just list the firt item, not the son tag items.

I am trying to implement a forum control. Can you suggest a way to do it?. Thank you in advance.


Solution

  • As far as I know, you won't be able to achieve what you want using a kendo listview because it wasn't designed to display hierarchical data (or nested data).

    However, kendo do have other widgets that you can use to what you want to do. I think the TreeList is probably the one you are looking for. In order to use that widget, you will have to modify the data from a nested format to a id / parendId format. Using the sample data you provided, you should reformat the data like this:

    var data = [
        { id:25,parentId: null, message:"my message 4",creationDate:"2016-05-26" },
        { id:26, parentId:25, message: "my message 3", creationDate:"2016-05-26"},
        { id:28, parentId:26, message":"my message 1",creationDate:"2016-05-26"},
        { id:27, parentId:26, message:"my message 2", creationDate:"2016-05-26"}
    ]
    

    Depending on your need, you may also use a TreeView but this widget isn't designed to display multiple fields by default. You can also use a grid with a custom detail template but that required extra code to handle the detail grid template initialization.