Nested Grid

[alavudeen]

How to create a nested grid in syncfusion.

hear i am attaching a asp gridview i want to replace it by syncfusion. grid

Attachment: Captureddd_476425f8.7z

[Gowthami V]

Hi Alavudeen,

Thanks for using Syncfusion products.

We can achieve your requirement “Nested grid as in the screenshot provided” using “DetailsTemplate” concept in Essential ASP.NET Grid.

We have created a sample with nested grid and the same can be downloaded from the following link,

http://www.syncfusion.com/downloads/support/forum/123488/ze/DetailsTemplateplus-1877944249.zip

Refer to the below code example,

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

    <style>

        .e-grid .e-gdiagonalnext:before {

         

         content: "\e675" !important;

        }

        .e-grid .e-gnextforward:before {

        content: "\e676" !important;

        

        }

        </style>

    <div>

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

            <ClientSideEvents DetailsDataBound="detailGridData" />
            <PageSettings PageSize="7"/>
. . . .
. . . .

</ej:Grid>

   

<script src="Scripts/jsondata.js"></script>

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

        <div class="tabcontrol">

           <div id="detailGrid"></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,

. . . .

. . . .

            });

. . . .

        }

</script>
</asp:Content>

In the above code we have changed the expand and collapse icon as plus and minus icon respectively by changing the content for the classes “.e-gdiagonalnext” and  “.e-gnextforward”.

Refer to the below online demo for more clarification,

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

Refer to the below help document for more clarification,

http://help.syncfusion.com/aspnet/grid/row#details-template

Regards,

Gowthami V.

[alavudeen]

i want a child grid with add edit delete button

[Seeni Sakthi Kumar Seeni Raj]

Hi Alavudeen,

To perform editing/adding/deleting functionality on child Grid, we have to enable sub properties of editSettings such as allowEditing, allowAdding, and allowDeleting. toolbarSettings provides the option to enable the toolbar(showToolbar) and add toolbar items(toolbarItems) in the Grid. Refer to the following code example.

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

        <ClientSideEvents DetailsDataBound="detailGridData" />

             . . . .. . . .

    </ej:Grid>

    <script src="Scripts/jsondata.min.js"></script>

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

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

            <div id="detailGrid{{:EmployeeID}}"></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" + filteredData).ejGrid({

                dataSource: data,

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

                toolbarSettings: {

                    showToolbar: true,

                    toolbarItems: [

                        ej.Grid.ToolBarItems.Add,

                        ej.Grid.ToolBarItems.Edit,

                        ej.Grid.ToolBarItems.Delete,

                        ej.Grid.ToolBarItems.Update,

                        ej.Grid.ToolBarItems.Cancel

                    ]

                },

               . . . ..  ..

            });

        }
    </script>

Refer to the following Help Document.

http://help.syncfusion.com/js/api/ejgrid#members:editsettings
http://help.syncfusion.com/js/api/ejgrid#members:toolbarsettings

We have prepared a sample that can be downloaded from the following location.

Sample: http://www.syncfusion.com/downloads/support/forum/123488/ze/DetialTemplateGrid939305313

Regards,
Seeni Sakthi Kumar S.