Kendo UI DetailTemplate网格数据源在控制器中未读取动作

Question

I'm using hierarchical grid, I bind parent grid but the hierarchical grid is not binding on load, it's shows empty nor controller action method fire associated against hierarchical grid datasource read method. My view is as

   @(Html.Kendo().Grid<Cubes.UI.Models.PatientAppointmentInfoModel>()
     .Name("PatientAppointmentGrid")
     .DataSource(dataSource => dataSource
          .Ajax()                                                   
          .PageSize(Cubes.Common.Constants.GridPageSize)
          .Read(read => read.Action("_SearchPatientAppointment", "PatientAppointment"))
     )
     .Columns(columns =>
     {
         columns.Bound(m => m.AppointmentID).Title("Appointment #");
         columns.Bound(m => m.StartTime).Title("Start Time").Width(100);
         columns.Bound(m => m.EndTime).Title("End Time");
         columns.Bound(m => m.AppointmentDate).Format("{0:d}").Title("Appointment Date");
         columns.Bound(m => m.FirstName).Title("First Name");
         columns.Bound(m => m.LastName).Title("Last Name");
         columns.Bound(m => m.Amount).Title("Amount");
     })
     .Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
     .Pageable()
     .Sortable()
     .Scrollable()
     .ClientDetailTemplateId("template")
     .Resizable(resize => resize.Columns(true))
     .Events(events =>              
         events.DataBound("OnDataBoundPatientAppointmentGrid"))
     )

and detail template is as below

<script id="template" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<Cubes.UI.Models.PatientAppointmentInfoModel>()
        .Name("Grid_#=AppointmentID#")
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(Cubes.Common.Constants.GridPageSize)
            .Read(read => read.Action("HierarchyBinding_Appointments", "PatientAppointment", new { appointmentID = "#=AppointmentID#" }))
         )
         .Columns(columns =>
         {
             columns.Bound(t => t.AppointmentID).Title("Appoitnet_#=AppointmentID#");
             columns.Bound(t => t.StartTime).Width(100);
             columns.Bound(t => t.EndTime);
             columns.Bound(t => t.AppointmentDate).Format("{0:d}").Title("Appointment Date");
             columns.Bound(t => t.FirstName);
             columns.Bound(t => t.LastName);
             columns.Bound(t => t.Amount);
          })
          .Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
          .Pageable()
          .Sortable()
          .Resizable(resize => resize.Columns(true))
          .ToClientTemplate()
    )
</script>

action method in controller is as below

 public ActionResult HierarchyBinding_Appointments( [DataSourceRequest]DataSourceRequest request,string appointmentID, string searchKey, string columnNameToSort, string defaultSortOrder, string Mobile, PatientAppointmentInfoModel model)
    {
        //model.Mobile = Mobile;
        var filter = BuildSearchDescriptor(model);
        if (filter != null)
        {
            IList<IFilterDescriptor> filters = new List<IFilterDescriptor>();
            filters.Add(filter);
            request.Filters = filters;
        }

        var roles = GetPatientAppointmentsForChild(Convert.ToInt32(appointmentID),request);

        var result = new DataSourceResult
        {
            Data = roles.Results,
            Total = roles.RowCount


        };
        return Json(result, JsonRequestBehavior.AllowGet);

    }

Answer 1

Problem

Detail Grid just passes new { appointmentID = "#=AppointmentID#" } but action method HierarchyBinding_Appointments has too many parameters - appointmentID, searchKey and so on.

Solution

You need to pass additional data either using object routes values or JavaScript function.

Here is the example for JavaScript function.

.Read(read => read
   .Action("HierarchyBinding_Appointments",  "PatientAppointment")
   .Data("patientAppointmentData(#=AppointmentID#"))

<script type="text/javascript">
   function patientAppointmentData(AppointmentID) {
      return {
         appointmentID: AppointmentID, 
         searchKey: xxx, 
         columnNameToSort: xxx, 
         defaultSortOrder: xxx, 
         Mobile: xxx 
      };
   }
</script>

Action Method

public ActionResult HierarchyBinding_Appointments( 
   [DataSourceRequest]DataSourceRequest request, 
   MyModel model)
{
}

View Model

public class MyModel 
{
   public xxx AppointmentID { get; set; } 
   public xxx SearchKey { get; set; } 
   public xxx ColumnNameToSort { get; set; } 
   public xxx DefaultSortOrder { get; set; } 
   public xxx Mobile { get; set; } 
}