title: Telerik Rad Grid on ASP.NET MVC Razor view engine - DetailView not initially populating
body: <p>OK...I've spent too much time floundering on this one, so I'm passing it on to the experts -> YOU.</p>
  
  <p>My VERY simple ASP.NET MVC (v3 with Razor View Engine) page uses a Telerik Rad Grid control to show some type lists and then I have the associated codes showing in the DetailsView of the grid.</p>
  
  <p>Doing the population is easy.  I have a ViewModel for my TypeCodeList type and send it to the strongly typed view to populate the grid.  This works GREAT...and the grid looks great - thanks Telerik.  However, I added the DetailsView to then populate the child TypeCodes in the same manner.  The bad thing is that when my grid populates, I select the triangle on the left to expand the tree and see the child records, nothing is there.  BUT, if I select the "Refresh" button on the bottom of the grid, THEN I can hit the triangle and the child records display.</p>
  
  <p>So (in summary), the child records do not show up on the initial load.  Only when I select an AJAX refresh of the grid I get the children.  Otherwise, it works as required.</p>
  
  <p>I have been trying to see if I can programmatically kick off the refresh via javascrip upon page load.  OR if I can get the thing to populate by itself when selected without doing a refresh first - that would be preferable.</p>
  
  <p>Below is my code:</p>
  
  <p>Pertinent Controller Code (I've taken out the update, delete, insert, logging and data access methods)</p>
  
  <pre><code>[HandleErrorWithElmah]
  public partial class HostController : Controller
  {
  
      /// &lt;summary&gt;
      /// Index - Home for HostController
      /// &lt;/summary&gt;
      /// &lt;returns&gt;&lt;/returns&gt;
      public ActionResult Index()
      {
          return View();
      }
  
      #region Type List Section
  
      /// &lt;summary&gt;
      /// Gets the list of TypeLists - yea...say that again
      /// &lt;/summary&gt;
      [GridAction]
      public ActionResult TypeCodeList()
      {
  
          var model = GetActiveTypeLists();
  
          // Get all of the type lists and send them to the view
          return View(model);
  
      }
  
  
      /// &lt;summary&gt;
      /// The ajaxified Select
      /// &lt;/summary&gt;
      /// &lt;returns&gt;&lt;/returns&gt;
      [AcceptVerbs(HttpVerbs.Post)]
      [GridAction]
      public ActionResult _TypeCodeList()
      {
  
          var model = GetActiveTypeLists();
          return Json(new GridModel(model));
  
  
      }
  
      /// &lt;summary&gt;
      /// Simply a wrapper to get all of the current type list values.
      /// &lt;/summary&gt;
      /// &lt;returns&gt;&lt;/returns&gt;
      private IEnumerable&lt;TypeCodeListViewModel&gt; GetActiveTypeLists()
      {
  
          var model = from p in entityRepository.Find&lt;TypeList&gt;(p =&gt; p.IsActive == true)
                      select new TypeCodeListViewModel
                      {
                          TypeListId = p.TypeListId,
                          Name = p.Name,
                          Description = p.Description,
                          IsActive = p.IsActive
                      };
  
  
          return model;
  
      }
  
      #endregion
  
      #region Type Code Section
  
      [AcceptVerbs(HttpVerbs.Post)]
      [GridAction]
      public ActionResult _TypeCodeForTypeListAjax(int typeListId)
      {
          var model = GetActiveTypeCodes(typeListId);
          return Json(new GridModel(model));
      }
  
  
      /// &lt;summary&gt;
      /// Simply a wrapper to get all of the current type Code values.
      /// &lt;/summary&gt;
      /// &lt;returns&gt;&lt;/returns&gt;
      private IEnumerable&lt;TypeCodeViewModel&gt; GetAllActiveTypeCodes()
      {
  
          var model = from p in entityRepository.Find&lt;OurLeaguePlay.Models.TypeCode&gt;(p =&gt; p.IsActive == true).OrderBy(ord =&gt; ord.CodeName)
                      select new TypeCodeViewModel
                      {
                          TypeCodeId = p.TypeCodeId,
                          TypeListId = p.TypeListId,
                          CodeName = p.CodeName,
                          CodeValue = p.CodeValue,
                          Description = p.Description,
                          IsActive = p.IsActive
                      };
  
  
          return model;
  
      }
  
  
      /// &lt;summary&gt;
      /// Simply a wrapper to get all of the current type Code values.
      /// &lt;/summary&gt;
      /// &lt;returns&gt;&lt;/returns&gt;
      private IEnumerable&lt;TypeCodeViewModel&gt; GetActiveTypeCodes(int typeListId)
      {
  
          var model = from p in entityRepository.Find&lt;OurLeaguePlay.Models.TypeCode&gt;(p =&gt; p.IsActive == true &amp;&amp; 
                                                                                          p.TypeListId == typeListId).OrderBy(ord =&gt; ord.CodeName)
                      select new TypeCodeViewModel
                      {
                          TypeCodeId = p.TypeCodeId,
                          TypeListId = p.TypeListId,
                          CodeName = p.CodeName,
                          CodeValue = p.CodeValue,
                          Description = p.Description,
                          IsActive = p.IsActive
                      };
  
  
          return model;
  
      }
  
  
      #endregion
  
  }
  </code></pre>
  
  <p>Here is my View Code:
  (I've taken out all of my failed javascript attempts to try and force the load on page load.)</p>
  
  <pre><code>    @model IEnumerable&lt;TypeCodeListViewModel&gt;
  @using Telerik.Web.Mvc.UI
  @using Telerik.Web.Mvc
  @using OurLeaguePlay.ViewModels
  @{Html.Telerik().Grid&lt;TypeCodeListViewModel&gt;(Model)
          .Name("TypeLists")
          .DetailView(details =&gt; details.ClientTemplate(
              Html.Telerik().Grid&lt;TypeCodeViewModel&gt;()
                  .Name("TypeCode_&lt;#= TypeListId #&gt;")
                  .DataKeys(keys =&gt; keys.Add(k =&gt; k.TypeCodeId))
                  .Columns(columns =&gt;
                  {
                      columns.Bound(o =&gt; o.CodeName).Width(40);
                      columns.Bound(o =&gt; o.CodeValue).ReadOnly(true).Width(40);
                      columns.Bound(o =&gt; o.Description).Width(100);
                  })
                  .DataBinding(dataBinding =&gt;
                      {
                          dataBinding.Ajax().Select("_TypeCodeForTypeListAjax", "Host", new { typeListId = "&lt;#= TypeListId #&gt;" })
                                            .Enabled(true);
                      }
                      )
                  .Pageable()
                  .Sortable()
                  .NoRecordsTemplate("No Type Codes exist for the selected Type List")
                  .ToHtmlString()
              )
          )
          .DataKeys(keys =&gt; keys.Add(k =&gt; k.TypeListId))
          .Columns(columns =&gt;
          {
              columns.Bound(o =&gt; o.Name).Width(100);
              columns.Bound(o =&gt; o.Description).Width(150);
              columns.Command(commands =&gt;
              {
                  commands.Edit().ButtonType(GridButtonType.Image);
                  commands.Delete().ButtonType(GridButtonType.Image);
              }
                             ).Width(30);
          })
          .DataBinding(dataBinding =&gt;
          {
              dataBinding.Ajax().Select("_TypeCodeList", "Host")
                                .Update("UpdateTypeList", "Host")
                                .Insert("InsertTypeList", "Host")
                                .Delete("DeleteTypeList", "Host")
                                .Enabled(true);
              dataBinding.Server().Select("TypeCodeList", "Host", new { ajax = ViewData["ajax"] });
          }
          )
          .Editable(editable =&gt; editable.Enabled(true).Mode(GridEditMode.InLine))
          .Pageable(page =&gt; page.PageSize(10))
          .Sortable()
          .Selectable()
          .Scrollable(scroll =&gt; scroll.Enabled(false))
          .NoRecordsTemplate("No Type Lists can be retrieved from the database")
          .ToolBar(commands =&gt; commands.Insert())
          .Render();
  }
  </code></pre>
  
  <p>Finally...here are the ViewModel classes:</p>
  
  <pre><code>public class TypeCodeListViewModel 
  {
  
      [ScaffoldColumn(false)]
      public int TypeListId { get; set; }
  
      [Required(ErrorMessage = "Required")]
      [StringLength(25, ErrorMessage = "Max Length is 25")]
      public string Name { get; set; }
  
      [Required(ErrorMessage = "Required")]
      [StringLength(25, ErrorMessage="Max Length is 25")]
      public string Description { get; set; }
  
      [ScaffoldColumn(false)]
      public bool IsActive { get; set; }
  
  
  }
  
  public class TypeCodeViewModel
  {
  
      [ScaffoldColumn(false)]
      public int TypeCodeId { get; set; }
  
      [ScaffoldColumn(false)]
      public int TypeListId { get; set; }
  
      [Required(ErrorMessage = "Required")]
      [StringLength(25, ErrorMessage = "Max Length is 25")]
      [DisplayName("Name")]
      public string CodeName { get; set; }
  
      [Required(ErrorMessage = "Required")]
      [StringLength(25, ErrorMessage = "Max Length is 25")]
      [DisplayName("Value")]
      public string CodeValue { get; set; }
  
      [StringLength(500, ErrorMessage = "Max Length is 500")]
      public string Description { get; set; }
  
      [ScaffoldColumn(false)]
      public bool IsActive { get; set; }
  
  }
  </code></pre>