DetailTemplate doesn't work inside div

[Yul]

Hello,

If I use a grid element with a DetailTemplate for each row, it works well.

However, if I put exactly the same code inside a <div>, the grid appears, but with just regular rows - I can't open them to see the template.

Is there something I need to add to the Div or the Grid?

---

<SfGrid @ref="DefaultGrid" DataSource="@_properties" AllowSelection="true" AllowSorting="false" >

                <GridSelectionSettings Type="SelectionType.Multiple"></GridSelectionSettings>

                <GridEvents RowDeselected="SelectionChanged" RowSelected="SelectionChanged" TValue="Property"></GridEvents>

                <GridTemplates>

                    <DetailTemplate Context="detailContext">

                        @{

                            Property propertyContext = (detailContext as Property);

                            string imagePath = "/PropertyPictures/" + @propertyContext.Id + ".jpg";

                            <div class="row">

                                <div class="col-xl-2">

                                    <img src=@imagePath width="100%" height="100px;" />

                                </div>

                                <div class="xol-xl-2">

                                    <table>

                                        <tr>

                                            <td>

                                                Bedrooms:

                                            </td>

                                            <td>

                                                @propertyContext.Bedrooms

                                            </td>

                                        </tr>

                                        <tr>

                                            <td>

                                                Bathrooms:

                                            </td>

                                            <td>

                                                @propertyContext.Bathrooms

                                            </td>

                                        </tr>

                                        <tr>

                                            <td>

                                                Garages:

                                            </td>

                                            <td>

                                                @propertyContext.Garages

                                            </td>

                                        </tr>

                                        <tr>

                                            <td>

                                                Spa:

                                            </td>

                                            <td>

                                                @propertyContext.Spa

                                            </td>

                                        </tr>

                                        <tr>

                                            <td>

                                                Pool:

                                            </td>

                                            <td>

                                                @propertyContext.Pool

                                            </td>

                                        </tr>

                                    </table>

                                </div>

                            </div>

                            <div class="row">

                                <div class="col-xl-2">

                                </div>

                            </div>

                        }

                    </DetailTemplate>

                </GridTemplates>

                <GridSortSettings>

                    <GridSortColumns>

                        <GridSortColumn Field="ProfitPercentages" Direction="SortDirection.Descending"></GridSortColumn>

                    </GridSortColumns>

                </GridSortSettings>

                <GridColumns>

                    <GridColumn Type="ColumnType.CheckBox" Width="50"></GridColumn>

                    <GridColumn Field=@nameof(Property.FullAddress) HeaderText="Address" CustomAttributes="@(new Dictionary<string, object>() {{"class", HeaderClass(nameof(Property.FullAddress))}})"></GridColumn>

                    <GridColumn Field=@nameof(Property.AskingPrice) HeaderText="Asking Price" Format="C0" CustomAttributes="@(new Dictionary<string, object>() {{"class", HeaderClass(nameof(Property.AskingPrice))}})"></GridColumn>

                    <GridColumn Field=@nameof(Property.ProjectedValue) HeaderText="Projected Value" Format="C0" CustomAttributes="@(new Dictionary<string, object>() {{"class", HeaderClass(nameof(Property.ProjectedValue))}})"></GridColumn>

                    <GridColumn Field=@nameof(Property.ProfitMonetary) HeaderText="Projected Profit" Format="C0" CustomAttributes="@(new Dictionary<string, object>() {{"class", HeaderClass(nameof(Property.ProfitMonetary))}})"></GridColumn>

                    <GridColumn Field=@nameof(Property.ProfitPercentages) HeaderText="Profit %" Format="P2" CustomAttributes="@(new Dictionary<string, object>() {{"class", HeaderClass(nameof(Property.ProfitPercentages))}})"></GridColumn>

                </GridColumns>

            </SfGrid>

[Yul]

A small update:

Seems the problem is not with the Div itself, but when the Div has the "hidden" attribute assigned (true/false)

The same also happens when I put the Grid inside a Dialog modal

[Rahul Narayanasamy]

Hi Yul, 

Greetings from Syncfusion. 

Query: DetailTemplate doesn't work inside div, Seems the problem is not with the Div itself, but when the Div has the "hidden" attribute assigned (true/false) 

We have validated your query and we are quite unclear about mentioned case. Since if we provide a div with hidden attribute, then the whole div is not rendered in the page. So we are quite unclear about your mentioned requirement. We need some details regarding the reported query. Could you please share the below details. It will be helpful to validate and provide a better solution. 

• Share full Grid code snippets along with div(with hidden attribute)
• Whether did you define the whole Grid inside the div(div with hidden attribute)?
• Whether did you define the detail template with div(div with hidden attribute)?
• Share a simple reproduceable sample if possible.

Regards, 

Rahul