Home / Community & Support / Developer Productivity Tools Forums / Telerik MVC Extensions (superseded) > General Discussions > Grid <div> tags not right when using Html.partial to display the grid

• Julia

  Posted on Jul 10, 2012 (permalink)

  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 :)

• Answer Dimo Dimo

  Posted on Jul 11, 2012 (permalink)

  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

  Check out the successor of Telerik MVC Extensions - Kendo UI for ASP.NET MVC - and deem it for new ASP.NET MVC development.

• Julia

  Posted on Jul 11, 2012 (permalink)

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

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / Telerik MVC Extensions (superseded) > General Discussions > Grid <div> tags not right when using Html.partial to display the grid