Kendo MVC Grid not loading data on child template

Question

Im having so much trouble trying to load data into a child grid in Kendo MVC the first grid loads fine but when I expand that user, the child grid doesn´t show anything. Even if I put a breakpoint in my controller the Read event is not called. When I click a column to filter the Read method returns an error

The parameters dictionary contains a null entry for parameter 'id' of non-nullable type 'System.Int32' for method 'System.Web.Mvc.ActionResult ReadBalances(Kendo.Mvc.UI.DataSourceRequest, Int32)' in 'Apple.Web.Controllers.BalanceController'. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter. Nombre del parámetro: parameters

Im not getting any errors on the client-side javascript.

Controller

   public ActionResult Read([DataSourceRequest] DataSourceRequest request)
    {
        var users = _userProcessor.Get(Constants.USER_TYPE_CLIENT).Result as List<User>;
        return Json(users.ToDataSourceResult(request));
    }

    public ActionResult ReadBalances([DataSourceRequest] DataSourceRequest request, int id)
    {
        var balances = _balanceProcessor.Get(id).Result as List<Balance>;
        DataSourceResult result = balances.ToDataSourceResult(request, balance => new {
            Id = balance.Id,
            Amount = balance.Amount,
            UserId = balance.UserId,
            Description = balance.Description,
            Date = balance.Date
        });
        return Json(result, JsonRequestBehavior.AllowGet);
    }

Index.cshtml

@(Html.Kendo().Grid<Apple.DataLayer.Types.User>()
              .Name("gridUsers")
              .Columns(columns =>
              {
              columns.Bound(c => c.Name);
              columns.Bound(c => c.LastName);
              columns.Bound(c => c.Balance);
              })
              .Sortable()
              .Pageable()
              .Scrollable()
              .Filterable(f => f.Extra(false))
              .DataSource(dataSource => dataSource
                  .Ajax()
                  .Model(model =>
                  {
                     model.Id(u => u.Id);
                  })
                  .Read(read => read.Action("Read", "Balance"))
              )
              .HtmlAttributes(new { style = "height: 550px;", id = "gridUsers" })
              .ClientDetailTemplateId("client-template")
)

<script id="client-template" type="text/kendo-template">
@(Html.Kendo().Grid<Apple.DataLayer.Types.Balance>()
              .Name("grid_#=Id#")
              .ToolBar(toolbar =>
              {
                  toolbar.Custom().Text("Nuevo").HtmlAttributes(new { onclick = "return Nuevo(#=Id#, this);" });
              })
              .Columns(columns =>
              {
                  columns.Bound(c => c.Date).Width(150).Format("{0:dd/MM/yyyy hh:mm}");
                  columns.Bound(c => c.Description);
                  columns.Bound(c => c.Amount);
              })
              .DataSource(dataSource => dataSource
              .Ajax()
              .Model(model =>
              {
                model.Id(d => d.Id);
              })
              .Read(read => read.Action("ReadBalances", "Balance", new { id = "#=Id#" }))
              .PageSize(5)
              )
              .Pageable()
              .Sortable()
              .Filterable()
              .ToClientTemplate()
)
</script>

Answer 1

I think that using the same field name, id , for both the parent grid and the child grid may be an issue. According to Kendo , since the field names are the same, one will overwrite the other, and so different field names should be used. Try changing the parent grid's id to parentID .