</ iframe > </noscript> <!-- End Google Tag Manager (noscript) --> <div id="BeforeHeaderContent"> </div> <div id="HeaderContent"> <div id="ProjectTitle">GridView for ASP.NET Web Forms</div> <div id="PageTitle"><div id="PageTitleText">Hierarchical Data Binding</div></div> </div> <div id="AfterHeaderContent"> <!-- Spacing --> <span id="ToggleAllSectionsLink" class="FunctionLink"> <label id="CollapseAllLabel">Collapse All</label> <label id="ExpandAllLabel" style="display: none;">Expand All</label> </span> </div> <div class="BreadcrumbsContainer"><table><tr><td> <a href="Working_with_GridView_for_ASP.NET_Wijmo.html">Working with GridView for ASP.NET Web Forms</a> > Hierarchical Data Binding</td></tr></table></div> <div id="BodyContent"> <p><a href="C1.Web.Wijmo.Controls.4~C1.Web.Wijmo.Controls.C1GridView.C1GridView.html">C1GridView</a> allows you to bind data in a hierarchical grid of summary rows and detail rows using your customized query. Hierarchical relationships are defined manually between multiple tables in C1DetailGridView. It enables you to display the hierarchical data with multilevel, multiple layouts and provide features such as sorting, filtering, grouping and editing.</p> <p> <p>The image below shows the hierarchical grid with one of its rows expanded.</p> <p><img border="0" alt="" src="images/HierarchicalGridView.png"></p> <h3>Important Properties</h3> <ul> <li><strong>DataSourceID</strong>: Each grid must have its own data source to represent the data hierarchy in GridView. The data source for each detail grid view is set using the <strong>DataSourceID</strong> property.</li> <li> <strong>DataKeyNames</strong>: The <a href="C1.Web.Wijmo.Controls.4~C1.Web.Wijmo.Controls.C1GridView.C1GridView~DataKeyNames.html">DataKeyNames</a> property is used to identify a <a href="http://msdn.microsoft.com/en-IN/library/ms179610.aspx" target="_blank">primary key</a> for the C1GridView control. This property takes the name of fields from the connected database, as an array of strings. The primary key columns for each table in the datasource are added to the <strong>DataKeyNames</strong> property of the respective parent table or child table. <div class="FilteredContentHTML" data-title="HTML" data-itemid="HTML"> <table class="SyntaxTable"> <tbody> <tr> <th>Source View</th> <th> <div class="CopyCodeWrapper"> <span class="CopyCode">Copy Code</span> </div> </th> </tr> <tr> <td colspan="2"> <pre> <span style="COLOR: #0000ff"><</span><span style="COLOR: #800000">cc1:C1GridView</span> <span style="COLOR: #ff0000">runat</span><span style="COLOR: #0000ff">="server"</span> <span style="COLOR: #ff0000">DataSourceID</span><span style="COLOR: #0000ff">="SqlDataSource1"</span> <span style="COLOR: #ff0000">DataKeyNames</span><span style="COLOR: #0000ff">="CustomerID, CompanyName"</span><span style="COLOR: #0000ff">></span> </pre> </td> </tr> </tbody> </table> </div> </li> <li><strong>MasterDetailRelation:</strong> The <a href="C1.Web.Wijmo.Controls.4~C1.Web.Wijmo.Controls.C1GridView.MasterDetailRelation.html">MasterDetailRelation</a> property is used to specify how data is linked between the detail or child table and the parent table. It allows you to link two different tables from the data source by specifying <a href="C1.Web.Wijmo.Controls.4~C1.Web.Wijmo.Controls.C1GridView.MasterDetailRelation~MasterDataKeyName.html">MasterDataKeyName</a> and <a href="C1.Web.Wijmo.Controls.4~C1.Web.Wijmo.Controls.C1GridView.MasterDetailRelation~DetailDataKeyName.html">DetailDataKeyName</a> property.</li> <li><strong>MasterDataKeyName :</strong> The <a href="C1.Web.Wijmo.Controls.4~C1.Web.Wijmo.Controls.C1GridView.MasterDetailRelation~MasterDataKeyName.html">MasterDataKeyName</a> property is used to set the relation between the parent and the child table. This property should be set to match the field specified in <a href="C1.Web.Wijmo.Controls.4~C1.Web.Wijmo.Controls.C1GridView.C1GridView~DataKeyNames.html">DataKeyNames</a> for the parent table.</li> <li> <strong>DetailDataKeyName :</strong> The <a href="C1.Web.Wijmo.Controls.4~C1.Web.Wijmo.Controls.C1GridView.MasterDetailRelation~DetailDataKeyName.html">DetailDataKeyName</a> property is also used to set the relation between the child table and the parent table. It retrieves the data from the child table for the detail section. The field set as <a href="C1.Web.Wijmo.Controls.4~C1.Web.Wijmo.Controls.C1GridView.MasterDetailRelation~DetailDataKeyName.html">DetailDataKeyName</a> should be the <a href="http://msdn.microsoft.com/en-IN/library/ms179610.aspx" target="_blank">foreign key</a> of the child table in the corresponding relation and it should also be a primary key in child table so that it matches with the field set as the <a href="C1.Web.Wijmo.Controls.4~C1.Web.Wijmo.Controls.C1GridView.MasterDetailRelation~MasterDataKeyName.html">MasterDataKeyName</a>. <div class="FilteredContentHTML" data-title="HTML" data-itemid="HTML"> <table class="SyntaxTable"> <tbody> <tr> <th>Source View</th> <th> <div class="CopyCodeWrapper"> <span class="CopyCode">Copy Code</span> </div> </th> </tr> <tr> <td colspan="2"> <pre> <span style="COLOR: #0000ff"><</span><span style="COLOR: #800000">Relation</span><span style="COLOR: #0000ff">></span> <span style="COLOR: #0000ff"><</span><span style="COLOR: #800000">cc1:MasterDetailRelation</span> <span style="COLOR: #ff0000">MasterDataKeyName</span><span style="COLOR: #0000ff">="CustomerID"</span> <span style="COLOR: #ff0000">DetailDataKeyName</span><span style="COLOR: #0000ff">="CustomerID"</span> <span style="COLOR: #0000ff">/></span> <span style="COLOR: #0000ff"></</span><span style="COLOR: #800000">Relation</span><span style="COLOR: #0000ff">></span> </pre> </td> </tr> </tbody> </table> </div> </li> <li><strong>PageSize</strong>: The <a href="C1.Web.Wijmo.Controls.4~C1.Web.Wijmo.Controls.C1GridView.C1GridView~PageSize.html">PageSize</a> property can be set to define the number of rows to be displayed in the parent or child grid.</li> </ul> <a name="seealsobookmark"></a> <div class="SectionHeading" id="seealsoSectionHeading"><span class="SectionHeadingIcon"><!-- --></span><span class="SectionHeadingText">See Also</span></div><div id="seealsoSectionContent" class="SectionContent"><div class="SeeAlsoLink"> <a href="CreatingHierarchicalGrid.html">Creating Hierarchical Grid</a></div> </div> </div> <div id="FooterContent"> <p> </p><p> </p><hr style="height: 1px"><p>Copyright (c) <script type="text/javascript"> var theDate=new Date() document.write(theDate.getFullYear()) </script> GrapeCity, inc. All rights reserved. <script> $(document).ready(function() { if (!(window.self !== window.top)) { // Not running in a frameset // Get the page name var pageName = location.href.substring(location.href.lastIndexOf("/") + 1); if (pageName.indexOf("#") != -1) { pageName = pageName.substring(0, pageName.indexOf("#")); } // Append to webframe.html var framePage = "webframe.html#" + pageName; location.href = framePage; } }); </script></p> <a href="http://our.componentone.com/groups/" target="_blank">Product Support Forum</a> | <a href="http://feedback.componentone.com/forums/255768-asp-net-documentation" target="_blank">Documentation Feedback</a> </div> </body> </html>