Treegrid parent/child have different columns.

[Wouter]

Is it possible to have a treeview for a structure like this (where the "photos" are the children):

{
  "Id": 2,
  "Category": "Test",
  "Photos": [
    {
      "Id": 9,
      "Name": "9.png",
      "Created": "2016-05-23T09:13:20",
      "Position": null,
      "AlbumId": 2,
      "Localizations": []
    },
    {
      "Id": 10,
      "Name": "IMG_0812.JPG",
      "Created": "2016-05-23T10:13:43",
      "Position": null,
      "AlbumId": 2,
      "Localizations": [
        {
          "Id": 1,
          "Language": "NL",
          "Description": "Omsch",
          "PhotoId": 10
        },
        {
          "Id": 2,
          "Language": "EN",
          "Description": "Desc",
          "PhotoId": 10
        }
      ]
  ]
}

[Mahalakshmi Karthikeyan]

Hi Wouter, 

Thanks for contacting Syncfusion support. 

Please find the response from various controls below, 

TreeView control: 

We have checked with your query and created a new incident under your account to track the status of the issue reported in this forum. Please log on to our support website to check for further updates.  

https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents  

TreeGrid control: 

TreeGrid requires same child mapping for all the hierarchies, by analyzing on your datasource, we can see that in the first hierarchy child mapping was “photos” and in the second hierarchy it is “localization”. It is not possible to render TreeGrid with different child mapping along the hierarchy. 

Grid Control: 

Yes it is possible to bind mentioned JSON structure to Grid control.  

 

You can use detailsTemplate feature of ejGrid to bind the Hierarchical JSON on to the Grid. detailsTemplate API specify the jsRender template ID anddetailsDataBound is the event, triggered after the expanding the details Grid. In this event, you can render a Grid control based on the data bound to the master Grid. Please Refer to the following code example and screenshot.  

 

    <div id="Grid"></div>  

    <script id="GridContents" type="text">  

        <div id="detailGrid{{:taskID}}">  

        </div>  

    </script>  

    <script type="text/javascript">  

        $(function () {  

            var projectData = [  

             {  

                 taskID: 1,  

                 . . .  

                 subtasks: [  

                     { taskID: 2, duration: 5, progress: 100, priority: "Normal", approved: false },  

                       . . .  

                 ]  

             },  

             . . .  

             }]  

  

            $("#Grid").ejGrid({  

                dataSource: ej.DataManager(projectData),  

                detailsTemplate: "#GridContents",  

                detailsDataBound: "detailGridData",  

                allowGrouping: true,  

                columns: [  

                        { field: "taskID", headerText: 'Task ID' },  

                        { field: "progress", headerText: 'Progress' },  

                        { field: "duration", headerText: 'Duration' },  

                        { field: "priority", headerText: 'Priority' },  

                        { field: "approved", headerText: 'Approved' }  

                ]  

            });  

        });  

        function detailGridData(e) {  

            var filteredData = e.data["subtasks"], id = e.data["taskID"];  

            e.detailsElement.find("#detailGrid" + id).ejGrid({  

                dataSource: filteredData,  

                columns: [  

                    { field: "taskID", headerText: 'Sub Task ID' },  

                    { field: "progress", headerText: 'Sub Progress' },  

                    { field: "duration", headerText: 'Sub Duration' },  

                    { field: "priority", headerText: 'Sub Priority' },  

                    { field: "approved", headerText: 'Approved' }  

                ]  

            });  

        }  

    </script>  

 

   

We have also prepared a sample that can be referred from the following jsPlayground.  

 

https://jsplayground.syncfusion.com/zcvdqyhr  

 

Refer to the following Help Document and online demo on detailsTemplate.  

 

https://help.syncfusion.com/js/api/ejgrid#members:detailstemplate  

https://help.syncfusion.com/js/api/ejgrid#events:detailsdatabound  

 

https://js.syncfusion.com/demos/web/#!/azure/grid/Rows/DetailTemplate  

 

Please let us know is this your requirement, or else do get back to us with more details to provide you appropriate solution. 

Regards, 

Mahalakshmi K. 

[Ardani]

Hi Mahalakshmi K,

Would it be possible to get an example of this with ASP.NET Core Tag Helpers?

Mvh

Ardani

[Prasanna Kumar Viswanathan]

Hi Ardani, 

Yes, we have created an sample in Grid with detailsTemplate feature of ejGrid in ASP.NET Core Tag Helpers and please download the sample from the following link. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/129629/ze/WebApplication8_(2)-518359253 

 

Find the code example:  

 

 

<ej-grid id="FlatGrid" datasource="@ViewBag.parent" details-template="#tabGridContents" details-data-bound="detailGridData"  allow-paging="true"> 

        

    <e-columns> 

         

        <e-column field="EmployeeID" header-text="Employee ID" is-primary-key="true" allow-editing="false" text-align="Left" width="75">        

        </e-column> 

        <e-column field="FirstName" header-text="FirstName"></e-column> 

        <e-column field="LastName" header-text="LastName"></e-column> 

         

          

    </e-columns> 

</ej-grid> 

<script type="text/javascript"> 

 

    function detailGridData(e) { 

        var filteredData = e.data["EmployeeID"]; 

        // the datasource "window.ordersView" is referred from jsondata.min.js 

        var data = ej.DataManager(window.ordersView).executeLocal(ej.Query().where("EmployeeID", "equal", parseInt(filteredData), true)); 

        e.detailsElement.find("#detailGrid").ejGrid({ 

            dataSource: data, 

            allowSelection: false, 

            allowPaging:true, 

            columns: [ 

                    { field: "OrderID", key: true, headerText: "Order ID", width: 80, textAlign: ej.TextAlign.Right }, 

                    { field: "CustomerID", headerText: 'Customer ID', width: 80, textAlign: ej.TextAlign.Left }, 

                    { field: "CompanyName", headerText: 'Company Name', width: 120, textAlign: ej.TextAlign.Left }, 

                    { field: "ShipCity", headerText: 'City', width: 120, textAlign: ej.TextAlign.Left } 

            ] 

        }); 

    } 

</script> 

<script id="tabGridContents" type="text/x-jsrender"> 

    <div class="tabcontrol" id="Test"> 

         

         

            <div id="detailGrid"> 

            

        </div> 

    </div> 

</script> 

 

Regards, 

Prasanna Kumar N.S.V 

 

[Keith]

This helped me with the Grid as well.  Thank you so much.

[Prasanna Kumar Viswanathan]

Hi Keith, 

We are happy to hear that the provided solution has been working fine at your end. 

Please let us know if you need any further assistance. 

Regards, 

Prasanna Kumar N.S.V