[Solved] Grid <div> tags not right when using Html.partial to display the grid

[Freddy]

I am using the following line to display a grid as part of another view

@Html.Partial("ProjectLocation", Model.ProjectLocation)

The below is my grid

@(Html.Telerik().Grid(Model).HtmlAttributes(new { style = "width:700px" })
       .Name("ProjectLocations")
       .DataKeys(keys =>
       {
           keys.Add(p => p.ProjectLocationID);
       })
       .ToolBar(commands => commands.Custom().Text("Add New Location").Action("CreateProjectLocation", "Project", new { projectID = @Model.FirstOrDefault().ProjectID}))

       .DataBinding(dataBinding => dataBinding.Server()
                .Update("EditProjectLocation", "Project", new { mode = mode, type = type })
                .Delete("DeleteProjectLocation", "Project", new { projectID = @Model.FirstOrDefault().ProjectID }))

        .Columns(columns =>
        {
            columns.Command(commands =>
            {
                commands.Custom("Edit").ButtonType(type).Action("EditProjectLocation", "Project", new { projectID = @Model.FirstOrDefault().ProjectID }).ImageHtmlAttributes(new { @class = "t-icon t-edit" });
                commands.Delete().ButtonType(type);
            }).Width("35%").Title("Commands");
            columns.Bound(p => p.Location.ShortName).Width("50%").Title("Location");
            columns.Bound(p => p.PrimaryLocation).Title("Primary").HtmlAttributes(new { style = "text-align:center" });
        })
        .Editable(editing => editing.Mode(mode))
        .Sortable()
        .Pageable())

Now this is how this grid is rendered, which causes some of the columns to look funny ... notice how the <div id="ProjectLocations"> is closed way too early:

<div id="ListContent">
<div id="ProjectLocations" class="t-widget t-grid" style="width:700px">
<div class="t-toolbar t-grid-toolbar t-grid-top">
</div>
</div> ******* THIS DIV SHOULD BE CLOSED AT THE BOTTOM OF THE SECTION
<table class="Project" width="100%"> </table>
<table cellspacing="0">
<colgroup>
<thead class="t-grid-header">
<tbody>
<tr>
<td>
<a class="t-button t-button-icon t-grid-Edit" href="/Project/EditProjectLocation/2?projectID=2">
<div>
</td>
<td>12, AB, Canada</td>
<td style="text-align:center">
</tr>
</tbody>
</table> ****** AS IN RIGHT HERE

Any help is greatly appreciated :)

[Dimo]

Hi Julia,

I suspect that there is some invalid HTML on the page, which messes up the rendering of AJAX content. Please verify this. If you need further assistance, please send a runnable demo.

All the best,
Dimo
the Telerik team

[Freddy]

Thanks Dimo. I placed the partial view inside a table and it's all looking good now.