diff --git a/knowledge-base/grid-bind-navigation-property-complex-object.md b/knowledge-base/grid-bind-navigation-property-complex-object.md index c96524577..5b80f0456 100644 --- a/knowledge-base/grid-bind-navigation-property-complex-object.md +++ b/knowledge-base/grid-bind-navigation-property-complex-object.md @@ -12,35 +12,80 @@ res_type: kb ## Description -Data that you bind to the grid may have complex objects in its model, not only primitive types. +I bind the Grid to Data with complex objects in its model, not only primitive types. + +How to use complex objects in my model and show nested (navigation) properties information in the Grid? + +I prefer *not* to use a Column `Template` or a Grid `DetailTemplate`. -How do I use complex objects in my model and show nested (navigation) properties information in the grid? ## Solution -Set the `Field` parameter of the column to the name of the primitive type field (not a collection or entire class) that you want to use - include the name of the main model that holds the nested model, and the name of the field in the nested model. +Consider the following data structure: -Do *not* include the name of the main model the grid is bound to. +
-Do *not* use the `nameof` operator - it returns only the field name, without its parent class name. +````CS +private List GridData { get; set; } ->caption Use complex models with navigation properties in the grid without flattening the model +public class GridModel +{ + public int Id { get; set; } + public ChildModel NavigationProperty { get; set; } +} -````CSHTML -@* As of 2.11.0, the grid can show complex (nested, navigation) properties out-of-the-box. - You can still consider using a Template or a DetailTemplate for showing complex details about a row/cell - *@ +public class ChildModel +{ + public string Text { get; set; } +} +```` + +If a Grid should display the `Id` values, the column `Field` definition will look like this: + +
+ +````HTML + + + +```` + +If the Grid should bind to `GridModel` items and display the `Text` values, the following will *not* work: + +
+````HTML + + + + +```` + +This is because `nameof(GridModel.NavigationProperty.Text)` will return `Text` and the Grid will treat `Text` as a property of `GridModel`. + +The correct approach is to use a concatenated string that includes the property name from the Grid model class and the property name of the nested class: + +
+ +````HTML + + + + +```` + +>caption Using complex models with navigation properties in the Grid without flattening the model + +````CSHTML - - - - + + + + - @code { public class SampleComplexObject { @@ -79,7 +124,7 @@ Do *not* use the `nameof` operator - it returns only the field name, without its ## Notes -When editing is enabled in the grid, the nested models must be instantiated by the application code. Otherwise, for newly inserted items (or maybe even for some existing items, depending on the data), they will be `null` and so the grid editors will not have an instance to bind to, and so the values you write in them will be reset. +When Grid editing is enabled, the nested models must be instantiated by the application code. Otherwise, for newly inserted items (or maybe even for some existing items, depending on the data), they will be `null` and so the grid editors will not have an instance to bind to, and so the values you write in them will be reset. There are two ways to solve this: @@ -207,4 +252,3 @@ The code snippet below demonstrates both approaches (the second option is commen } } ```` -