Unable to get the data from the table into TreeGrid

[Suresh K]

First of all, I am totally new to Syncfusion. 

I opened a webform in asp.net project (VS 2013 prof.) 

Then I placed a TreeGrid from Syncfusion WEb 4.50vs2013 Toolbox 15.4.0.17 in the toolbox of VS. 

I want to achieve the following

I want to try an application for which I downloaded the sync fusion. Basically for the tree grid control. 

But I have some issues trying to get it to work and hence I stopped using it. 

The task I was trying to achieve was as follows:

1. There are 2 tables 1. Master Table and another detail table

2. The master table lists all workcenters and has 1 hour time slots. Eg. WorkCenter WC1 with time slot columns 8-9,9-10,10-11 and so on for 8 hours. Work centres will be like WC1, WC2, WC3 

3. Each work centre has a child table as follows WC1 Work enter with details WC1CH1, WC1CH2,WC1CH3 , WC2 with WC2CH1, WC2CH2 …

4. I want to show the master table in the grid with Workcenter name and Hour slots (8-9,9-10 …) 

5. When the row for a particular workcenter is clicked on the Grid, a tree should open showing the related Child table record.

For eg. When WC1 is clicked, the WC1CH1, WC1CH2, WC1CH3 should be shown (select query will be used to get the related child data with a condition for eg. show child record where status = off)

But I am not able to get this to work, and I am not able to get any example

[Suriyaprasanth Ravikumar]

Hi Suresh,  

  

Thanks for contacting Syncfusion support.    

  

We have analyzed your query, as per your requirement you need render the parent records from the “master” table with expand/collapse icon. And on expanding action you need to add child records for currently expanded record from “Details” table. We can achieve this requirement by using column template support and expanding event. We have prepared a sample and rendered the parent records from master table with expand/collapse icons.   

  

Please refer the below code snippet for this.   

[ASPX]  

<form id="form1" runat="server" ...>  

        <ej:TreeGrid ID="TreeGrid" runat="server" ...>                             

            <Columns>  

                <ej:TreeGridColumn HeaderText="Work Center" IsTemplateColumn="true" TemplateID="customColumnTemplate" Width="150" />  

                <ej:TreeGridColumn HeaderText="8-9" Field="W8W9" Width="100" />  

                //..  

           </Columns>            

        </ej:TreeGrid>          

              

        <asp:ScriptManager ID="ScriptManager" runat="server"  EnablePageMethods="true" />  

  

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

    <div style='height:20px;' unselectable='on'>  

  

  

        {{if !MasterWorkCenter}}  

                                    <div>  

                                           <div class='intend' style='height:1px;float:left;display:inline-block; width: {{:(level)*20}}px;'></div>  

                                    </div>  

        {{/if}}  

        {{if !hasChildRecords && MasterWorkCenter}}  

                                    <div>  

                                           <div class='intend' style='height:1px;float:left;display:inline-block;width: {{:(level)*20+(24)}}px;'></div>  

                                    </div>  

        {{/if}}  

        {{if !MasterWorkCenter && expanded}}  

                                    <div>  

                                           <div class='e-treegridexpand e-icon' style='float:left;display:inline-block;' unselectable='on'></div>  

                                    </div>  

        {{/if}}  

        {{if !MasterWorkCenter && !expanded}}  

                                    <div>  

                                           <div class='e-treegridcollapse e-icon' style='float: left;display:inline-block;' unselectable='on'></div>  

                                    </div>  

        {{/if}}  

         {{if WorkCenter}}  

                <div>  

                                    <div class='e-cell' style='display:inline-block;width:100%' unselectable='on'>{{:#data['WorkCenter']}}</div>  

                             </div>  

        {{/if}}  

                </div>  

    </script>    

               //..  

    </form>  

  

  

In TreeGrid we can able to add multiple records dynamically by using “addRow(data, position)” method by passing data and its position as an argument. Hence we have prepared a sample as per your requirement we have added the child records from “Details” table to the expanded parent record by using “expanding” event and “addRow” public method.    

To add new record as child of an existing record, we must select that record to insert the record in proper position.     

  

Please refer the code snippet below.   

[ASPX]  

<form id="form1" runat="server" ...>  

        <ej:TreeGrid ID="TreeGrid" runat="server" Expanding="expanding" ...>                             

                      //..  

        </ej:TreeGrid>          

              

        <script>            

            function expanding(args) {  

                if (!args.data.hasChildRecords) {  

                    args.cancel = true;  

                    //server side method to get child records.  

                    PageMethods.ExpandParentRow(args.data.item,  

                            function (result) {  

                                var treeObj = $("#TreeGrid").ejTreeGrid('instance'), index = args.model.updatedRecords.indexOf(args.data);  

                                treeObj.selectRows(index);  

                                var data = result;  

                                for (var x = 0; x < data.length; x++) {  

                                    treeObj.addRow(data[x], ej.TreeGrid.RowPosition.Child); //Public method to add record as child.  

                                    treeObj.selectRows(index);  

                                }  

                            }  

                            );  

                }  

            }  

  

        </script>  

    </form>  

  

Please find the sample from the below location.   

Location: http://www.syncfusion.com/downloads/support/directtrac/general/ze/AspSampleSqlbinding-1050704549  

   

Please let us know if require any other assistance on this.   

  

Thanks,   

Suriyaprasanth R.