[Solved] DetailsView - Will not load data on initial load.

[Forest]

Hi, all. 

I'm having an issue witht he grid with a details view.  It does not load the detailsview (sub-grid) initially when I click the expand button.  Only after I hit a sort filter, refresh it, etc.  What we've done to mitigiate this so far is grab the grid with JavaScript and call rebind on it, but I don't think this is a good solution.  

Please advise if there is a cleaner way of doing this.   

Here's the view:

@(Html.Telerik().Grid(Model.Visits)

    .Name("Visits")

    .DataBinding(dataBinding =>

    {

        dataBinding.Server().Select("ShowVisits", "Visitor", new { visitorId = Model.VisitorId });

        dataBinding.Ajax().Select("ClientVisits", "Visitor");

    })

    .Columns

    (columns =>

    {

        columns.Bound(o => o.FormattedWhen).Filterable(false).Title("Visit Date");

        columns.Bound(o => o.PersonnelOffice.Name).Filterable(false).Title("Office");

        columns.Bound(o => o.VisitTypeCode).Filterable(true).Title("W/C");

    })

    .NoRecordsTemplate("No visits found.")

    .Scrollable(c => c.Height("250px"))

    .Sortable(sorting => sorting.Enabled(true))

    .Pageable(paging => paging.Enabled(true).PageSize(10))

    .Filterable(filtering => filtering.Enabled(true))

    .Groupable(grouping => grouping.Enabled(false))

    .Footer(true)

    .HtmlAttributes(new { style = "width:900px; font-size: 11pt; font-family: Calibri;" })

    .DetailView(details => details.ClientTemplate(

            Html.Telerik().Grid<CraftTraxNG.Core.Views.Concrete.VisitNoteView>()

            .Name("Notes_<#= Id #>")

            .Columns(columns =>

            {

                columns.Bound(o => o.FormattedDateTime).Width(175).Filterable(false).Title("Date Entered");

                columns.Bound(o => o.Note).Width(370).Encoded(false).Filterable(true).Title("Notes");

                columns.Bound(o => o.LastUpdateBy).Filterable(false).Title("Employee");

            })

            .NoRecordsTemplate("No visit notes found.")

            .DataBinding(dataBinding => dataBinding.Ajax().Select("GetVisitorNotes", "Visitor", new {id = "<#= VisitorId #>", visitId = "<#= Id #>"}))

            .Scrollable(c => c.Height("150px"))

                .Pageable(paging => paging.Enabled(true).PageSize(5))

                .Sortable()

            .ToHtmlString()

    ))

)

Here's the important controller methods. :

[OutputCache(Duration = 0)]
       public PartialViewResult ShowVisits(int visitorId)
       {
           var visits = GetVisits(visitorId);
           var model = new VisitorGridModel
           {
               VisitorId = visitorId,
               Visits    = visits
           };
           return PartialView("_Visits", model);
       }

       protected IEnumerable<VisitView> GetVisits(int visitorId)
       {
           var visits = new VisitSearchQuery(Repository)
               .Where(new VisitSearchParameter { VisitorId = visitorId })
               .Include(x => x.PersonnelOffice)
               .PageOfResults(1, int.MaxValue);

           return visits.List.ConvertToVisitViewModelList();
       }

       [GridAction]
       public ActionResult ClientVisits(int visitorId)
       {
           var visits = GetVisits(visitorId);

           return View(new GridModel(visits));
       }


       [GridAction]
       public ViewResult GetVisitorNotes(GridCommand command, int id, int visitId)
       {
           var visitSearch = new VisitSearchQuery(Repository)
               .Where( new VisitSearchParameter { VisitorId = id })
               .Where(x => x.Id == visitId)
               .Include(x => x.Notes)
               .FirstOrDefault();

           if (visitSearch.Success && visitSearch.Result != null)
               return View(new GridModel(visitSearch.Result.Notes.ConvertToVisitNoteViewModelList()));

           return View(new GridModel());
       }
   }

And here's how we load it in JavaScript:

function loadPartialView(url, visitorId) {

    $('#visitGrid').load(url, function (response, status, xhr) {
        if (status == "error") {
            var msg = "Sorry but there was an error: ";
            alert(msg + xhr.status + " " + xhr.statusText);
        }
        else {
            var grid = $("#Visits").data("tGrid");
            grid.rebind({ id: visitorId });
        }
    });
}

Many thanks in advance.

[Dadv]

Common pb :

@(Html.Telerik().Grid(Model.Visits) => server binding


.DataBinding(dataBinding => // 2 bindings server and ajax..

    { 

        dataBinding.Server().Select("ShowVisits", "Visitor", new { visitorId = Model.VisitorId }); 

        dataBinding.Ajax().Select("ClientVisits", "Visitor"); 

    })

Why 3 types of binding? choose one (ajax binding i think) :

@(Html.Telerik().Grid<MyModel>() => no initial binding, so the DataBinding method is use onLoad


.DataBinding(dataBinding => 

    { 

        dataBinding.Ajax().Select("ClientVisits", "Visitor");// add any parameter here (VisitorId?) 

    })