Example

[Fabricio]

I need to create a functionality where data is displayed in a grid and that each record to display more information in a control.
example:

[Vignesh Natarajan]

Hi Fabricio, 

 

Thanks for using Syncfusion products. 

 

We have analyzed your query and we have achieved your requirement through DetailTemplate feature of the Grid. You can render any type of JsRender template and assign the script template id in the detailsTemplate property and also you can change the HTML elements in detail template row into JavaScript controls using the detailsDataBound event. 

 

Refer the below code snippet 

 

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

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

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

                <div id="detailGrid"> 

                </div> 

            </div> 

             

        </div> 

    </script> 

    <script type="text/javascript"> 

        $(function () { 

            $("#Grid").ejGrid({ 

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

                dataSource: ej.DataManager(window.employeeView).executeLocal(ej.Query().take(9)), 

                detailsTemplate: "#tabGridContents", 

                enableRTL: true, 

                detailsDataBound: "detailGridData", 

                .        .        .  

            }); 

        }); 

        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).take(2)); 

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

                dataSource: data, 

                allowSelection: false, 

            .          .       .          .  

            }); 

           } 

    </script> 

 

 

 

 

By default detailTemplate expand button will be on left side if you want the icon to be on the right, enableRTL property to achieve it.  

 

For your convenience we have prepared a sample 

 

Sample: http://jsplayground.syncfusion.com/uoyxjbcs  

  

refer our online sample for your reference  

 

http://js.syncfusion.com/demos/web/#!/bootstrap/grid/rows/detailtemplate  

 

refer our online documentation for your reference 

 

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

 

https://help.syncfusion.com/js/grid/row#details-template  

 

https://help.syncfusion.com/js/grid/globalizationandlocalization#right-to-left---rtl  

 

Regards, 

Vignesh Natarajan