hierarchy - details

[Vincent]

I am trying to re-create this grid (the child grid needs to be editable). The current controls I am using is from Obout and we want to move to Syncfusion as they have a much cleaner look and feel.

We are pulling data from two different sources with the VendorID being the key on the main grid and ParticipationID is the key for the 2nd grid.

The edit button on the main grid executes a "superform" control from Obout but again would like to find an alternative way to edit the main grid detail data that have.

I am looking fore some sample code to help me get stated. Using ASP.NET forms C#. Thank you community!

[Farveen Sulthana Thameeztheen Basha]

Hi Vincent, 

Thanks for contacting Syncfusion Support. 

We have checked your query and to achieve your requirement we suggest you to refer Detail Template feature of the Grid. Using DetailsTemplate property, we can render multiple level Grid(similar to hierarchy structure) and also, you can change HTML elements in detail template row into JavaScript controls using the DetailsDataBound event. 

Refer to the documentation and Demo Link:- 

https://asp.syncfusion.com/demos/web/grid/detailtemplate.aspx 

https://help.syncfusion.com/aspnet/grid/row?cs-save-lang=1&cs-lang=html 

Also in order to perform Editing operation for ChildGrid(i.e detail Grid) you can enable EditSettings property of the Grid. Also isPrimaryKey property is necessary to perform Editing actions on Grid. 

https://help.syncfusion.com/aspnet/grid/editing 

https://help.syncfusion.com/js/grid/editing 

Refer to the code below:- 

  <ej:Grid ID="EmployeesGrid" runat="server" DetailsTemplate="#tabGridContents"> 

            <ClientSideEvents DetailsDataBound="detailGridData" /> 

            <Columns> 

                <ej:Column Field="EmployeeID" HeaderText="Employee ID" IsPrimaryKey="True" TextAlign="Right" Width="75" /> 

                <ej:Column Field="FirstName" HeaderText="First Name" Width="100" /> 

                 .   .    . 

           </Columns> 

        </ej:Grid> 

 

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

        <div class="tabcontrol"> 

            <ul> 

                <li><a rel='nofollow' href="#detailChart{{:EmployeeID}}">Stock Chart</a> 

                </li> 

                <li><a rel='nofollow' href="#gridTab{{:EmployeeID}}">Stock Grid</a> 

                </li> 

            </ul> 

            <div id="detailChart{{:EmployeeID}}"></div> 

            <div id="gridTab{{:EmployeeID}}"> 

                <div id="detailGrid"></div> 

            </div> 

        </div> 

    </script> 

    <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, 

                toolbarSettings: { showToolbar: true, toolbarItems: ["add", "edit", "update", "delete", "cancel"] }, 

editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true }, 

                columns: [ 

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

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

                    .  .    . 

               ] 

            }); 

          

         } 

    </script> 

Sample Link:-   https://www.syncfusion.com/downloads/support/forum/162296/ze/Sample-1260122082 

Please get back to us if your requirement is different from above suggestion. 

Regards, 

Farveen sulthana T