We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Treegrid parent/child have different columns.

Thread ID:

Created:

Updated:

Platform:

Replies:

129629 May 24,2016 06:21 AM Aug 18,2017 12:53 AM JavaScript 5
loading
Tags: ejGrid
Wouter
Asked On May 24, 2016 06:21 AM

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 [Syncfusion]
Replied On May 25, 2016 08:48 AM

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.  
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.  
 
 
Refer to the following Help Document and online demo on detailsTemplate.  
 
 
 
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
Replied On March 24, 2017 03:51 PM

Hi Mahalakshmi K,

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

Mvh
Ardani

Prasanna Kumar Viswanathan [Syncfusion]
Replied On March 27, 2017 08:50 AM

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. 
 
 
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
Replied On August 17, 2017 12:08 PM

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


Prasanna Kumar Viswanathan [Syncfusion]
Replied On August 18, 2017 12:53 AM

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;