chore(grid): update hierarchy docs and state exmapple (#780)

Author: ntacheva

components/grid/hierarchy.md

@@ -91,7 +91,11 @@ Click the + icon to expand the row details
 
 ## Expand Rows From Code
 
-You can choose which detail templates will be expanded from your code through the grid [state]({%slug grid-state%}) by their indexes (all detail templates are collapsed by default).
+You can choose which detail templates will be expanded from your code through the grid [state]({%slug grid-state%}). Its `ExpandedItems` field contains a collection of the expanded Grid items (all detail templates are collapsed by default).
+
+The `ExpandedItems` collection is compared against the Grid Data collection in order to determine which rows will be expanded. The default behavior of the framework is to compare objects by their reference.
+
+When the `ExpandedItems` are obtained from a different data source to the Grid (e.g., from a separate service method and not from the view-model), the references may not match and so there will be no expanded items. In such cases, you have to override the [`Equals`](https://docs.microsoft.com/en-us/dotnet/api/system.object.equals?view=net-6.0) method of the underlying model class so that it matches them, for example, by a unique identifier rather than by reference so that two objects can be equal regardless of their origin, but according to their contents. When you are overriding the `Equals` method, it is also recommended to override the [`GetHashCode`](https://docs.microsoft.com/en-us/dotnet/api/system.object.gethashcode?view=net-6.0) method as well. A similar example is available in the [Save and Load Grid State from Browser LocalStorage]({%slug grid-state%}#save-and-load-grid-state-from-browser-localstorage) example.
 
 @[template](/_contentTemplates/grid/state.md#initial-state)
 

components/grid/selection/overview.md

@@ -178,7 +178,7 @@ Asynchronous operations such as loading data on demand should be handled in the
 
 The `SelectedItems` collection is compared against the Grid `Data` collection in order to determine which rows will be highlighted. The default behavior of the framework is to compare objects by their reference.
 
-When the `SelectedItems` are obtained from a different data source to the Grid (e.g., from a separate service method and not from the view-model), the references may not match and so there will be no highlighted items. In such cases, you have to override the `Equals` method of the underlying model class so that it matches them, for example, by a unique identifier rather than by reference so that two objects can be equal regardless of their origin, but according to their contents. A similar example is available in the [Initiate Editing or Inserting of an Item]({%slug grid-state%}#initiate-editing-or-inserting-of-an-item) example for the Grid State where a similar scenario exists for items deserialized from the state.
+When the `SelectedItems` are obtained from a different data source to the Grid (e.g., from a separate service method and not from the view-model), the references may not match and so there will be no highlighted items. In such cases, you have to override the [`Equals`](https://docs.microsoft.com/en-us/dotnet/api/system.object.equals?view=net-6.0) method of the underlying model class so that it matches them, for example, by a unique identifier rather than by reference so that two objects can be equal regardless of their origin, but according to their contents. When you are overriding the `Equals` method, it is also recommended to override the [`GetHashCode`](https://docs.microsoft.com/en-us/dotnet/api/system.object.gethashcode?view=net-6.0) method as well. A similar example is available in the [Initiate Editing or Inserting of an Item]({%slug grid-state%}#initiate-editing-or-inserting-of-an-item) example for the Grid State where a similar scenario exists for items deserialized from the state.
 
 ### Handle Data Changes
 

components/grid/state.md

@@ -91,7 +91,7 @@ The following information is present in the grid state:
 
 * **Paging** - page index, offset (skip) for virtual scrolling.
 
-* **Rows** - indexes of expanded detail templates.
+* **Rows** - list of expanded items.
 
 * **Sorting** - sort descriptors (fields by which the grid is sorted, and the direction).
 
@@ -146,6 +146,17 @@ Change something in the grid (like sort, filter, select, page, resize columns, e
              OnUpdate=@UpdateItem OnDelete=@DeleteItem OnCreate=@CreateItem EditMode="@GridEditMode.Inline"
              OnStateInit="@((GridStateEventArgs<SampleData> args) => OnStateInitHandler(args))"
              OnStateChanged="@((GridStateEventArgs<SampleData> args) => OnStateChangedHandler(args))">
+    <DetailTemplate>
+        @{
+            var employee = context as SampleData;
+            <TelerikGrid Data="employee.Assignments" Pageable="true" PageSize="5">
+                <GridColumns>
+                    <GridColumn Field="AssignmentId" Title="Assignment Id"></GridColumn>
+                    <GridColumn Field="AssignmentTitle" Title="Assignment Title"></GridColumn>
+                </GridColumns>
+            </TelerikGrid>
+        }
+    </DetailTemplate>
     <GridColumns>
         <GridColumn Field="@(nameof(SampleData.Id))" Editable="false" />
         <GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" />
@@ -266,6 +277,8 @@ Change something in the grid (like sort, filter, select, page, resize columns, e
         public int Id { get; set; }
         public string Name { get; set; }
         public string Team { get; set; }
+        public List<Assignment> Assignments { get; set; }
+
 
         // example of comparing stored items (from editing or selection)
         // with items from the current data source - IDs are used instead of the default references
@@ -277,6 +290,17 @@ Change something in the grid (like sort, filter, select, page, resize columns, e
             }
             return false;
         }
+
+        public override int GetHashCode()
+        {
+            return Id.GetHashCode();
+        }
+    }
+
+    public class Assignment
+    {
+        public int AssignmentId { get; set; }
+        public string AssignmentTitle { get; set; }
     }
 
     async Task GetGridData()
@@ -307,12 +331,11 @@ Change something in the grid (like sort, filter, select, page, resize columns, e
             {
                 for (int i = 1; i < 50; i++)
                 {
-                    _data.Add(new SampleData()
-                    {
-                        Id = i,
-                        Name = "name " + i,
-                        Team = "team " + i % 5
-                    });
+                    SampleData employee = new SampleData { Id = i, Name = $"Name {i}", Team = "team " + i % 5 };
+
+                    employee.Assignments = Enumerable.Range(1, 15).Select(x => new Assignment { AssignmentId = x, AssignmentTitle = "Assignment " + x }).ToList();
+
+                    _data.Add(employee);
                 }
             }