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.
Syncfusion Feedback

Nested Grid

Thread ID:

Created:

Updated:

Platform:

Replies:

123488 Mar 22,2016 12:45 PM UTC Mar 24,2016 06:50 AM UTC ASP.NET Web Forms 3
loading
Tags: Grid
alavudeen
Asked On March 22, 2016 12:45 PM UTC

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 [Syncfusion]
Replied On March 23, 2016 02:21 PM UTC

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
Replied On March 23, 2016 02:30 PM UTC

i want a child grid with add edit delete button

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On March 24, 2016 06:50 AM UTC

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.

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.

Warning Icon 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.Close Icon

;