.NET Core Grid - ClientDetailTemplate Issue

[Paul]

Hi there,

I'm having an issue getting the grid with client detail template to work.

<div class="row mt-3 mb-2">
    <div class="form-group col-md-12 ">
        @(Html.Kendo().Grid(Model)
            .Name("ConditionAssessmentGrid")
            .Columns(columns =>
            {
                columns.Bound(p => p.ConditionAssessmentYear);
                columns.Bound(p => p.ConditionAssessmentId).Title("Actions").Width(100)
                    .ClientTemplate("<div class='btn-group grid-commands' role='group'>" +
                        "<a href='/Sites/ConditionAssessment/ConditionAssessment/Summary/#=ConditionAssessmentId#' class='btn btn-primary btn-sm mr-2'><i class='fas fa-eye'></i> View</a>");
            })
            .Sortable()
            .ClientDetailTemplateId("conditionassessmentemplate")
            .NoRecords(n => n.Template("<span class='mt-3 mb-3 col-md-12 text-left'>No data exists</span>"))
            .Pageable(p => p.Enabled(false))
            .DataSource(dataSource => dataSource
                .Ajax()
                .ServerOperation(false)
            )
        )

        @Html.AntiForgeryToken()

        <script id="conditionassessmentemplate" type="text/kendo-tmpl">

            @(Html.Kendo().Grid<ProtectedSites.ViewModel.ConditionAssessment.ConditionAssessmentGridViewModel>()
                 .Name("grid_#=ConditionAssessmentId#")
                 .Columns(columns =>
                 {
                     columns.Bound(p => p.FeatureInstance.FeatureName).Title("Feature");
                     columns.Bound(p => p.DateCreated).Title("Date created").Format("{0:dd/MM/yyyy}");
                     columns.Bound(p => p.CreatedUser).Title("Created by");
                     columns.Bound(p => p.LatestMonitoringDate).Format("{0:dd/MM/yyyy}").Title("Latest monitoring date");
                     columns.Bound(p => p.LatestMonitoringLevelOneResult).Title("Condition assessment 1");
                     columns.Bound(p => p.LatestMonitoringLevelTwoResult).Title("Condition assessment 2");
                 })
                 .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(5)
                    .Read(read => read.Action("GetFeatureInstances", "ConditionAssessment", new { siteid = ViewContext.RouteData.Values["SiteId"], conditionAssessmentId = "#=ConditionAssessmentId#" }))
                )
                .Pageable()
                .Sortable()
                .ToClientTemplate()
            )
        </script>

    </div>
</div>

 

My Parent grid model and child grid model both have a property named ConditionAssessmentId. However, when expanding the detail template, the read action always fails with the following error:

Uncaught ReferenceError: conditionassessmentid is not defined
    at Object.eval [as tmpl0] (eval at compile (kendo.all.js:234), <anonymous>:3:1645)
    at Object.eval (eval at compile (kendo.all.js:234), <anonymous>:3:185)
    at proxy (jquery.js:10771)
    at init._toggleDetails (kendo.all.js:69238)
    at HTMLAnchorElement.<anonymous> (kendo.all.js:69226)
    at HTMLTableElement.dispatch (jquery.js:5429)
    at HTMLTableElement.elemData.handle (jquery.js:5233)

 

I do note that it does correctly resolve the same binding expression in the Name property of the child grid, just not for the Read event.

Am I doing something obvious wrong here? I've referred to your DetailTemplate example and can't see anything I am doing differently.

Thanks,

Paul

[Georgi Denchev]

Hi, Paul,

Thank you for the provided code snippets.

The configuration seems to be correct, what I am noticing is that the error is for a property named "conditionassessmentid" all in lowercase characters which leads me to believe that it might be a serialization problem.

Check the following section of the documentation:

https://docs.telerik.com/aspnet-core/compatibility/json-serialization

Is the ConfigureServices method setup correct?

Best Regards,
Georgi Denchev
Progress Telerik

[Paul]

Hi Georgi,

We didn't quite have the same code in Startup - I've made this the same now as the following code block and the issue persists:

public void ConfigureServices(IServiceCollection services)
{
    ...
    services
            .AddControllersWithViews()
            .AddJsonOptions(options =>
                options.JsonSerializerOptions.PropertyNamingPolicy = null);

    // Add the Kendo UI services to the services container.
    services.AddKendo();
}

 

Any ideas what I could try next?

Thanks,

Paul

[Georgi Denchev]

Hi, Paul,

Would it be possible for you to prepare a small sample project where the issue is reproduced and attach it here? I'll debug it locally and return back with my findings and possible solution.

Best Regards,
Georgi Denchev
Progress Telerik

[Paul]

Probably not to be honest - it would be quicker to rework the screen to not use the client template

Thanks anyway

[Georgi Denchev]

Hello, Paul,

I am sorry that the issue was not resolved.

I'll try to look for other possible reasons as to why the problem occurs, however I cannot promise I'll be able to find anything without being able to examine the project myself. The provided setup in this thread is correct, so the issue is coming from somewhere else.

I'll keep you updated of any new discoveries.

Best Regards,
Georgi Denchev
Progress Telerik

[Paul]

Thanks - apologies but I don't have the time to set up a demo project at present.

I will be looking again at this issue later in the week, will try setting up a new project from scratch and seeing if I can get the issue to reoccur - if so I will come back with any findings.

Thanks

Paul

[Georgi Denchev]

Hello, Paul,

Thank you for your cooperation. Let me know if further assistance is required once you have more information, I'd be glad to help.

I'll close the ticket for now, however replying back in the thread will automatically reopen it and we will be able to continue our discussion.

Best Regards,
Georgi Denchev
Progress Telerik

[farhan]

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.301/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2022.1.301/js/kendo.all.min.js"></script>
</head>
<body>
  
<button id="b1"  onclick="javascript:a();" >b1</button>
<br/><br/>

<div id="grid"></div>
<script>
function a(){
  try {
                        $("#grid").data("kendoGrid").dataSource.data([]);
                    }
                    catch (err1) { console.log("err1"); }
$("#grid").kendoGrid({
  columns: [
    { field: "name" }
  ],
  dataSource: [
    {
      name: "Beverages",
      products: [
        { name: "Tea" },
        { name: "Coffee" }
      ]
    },
    {
      name: "Food",
      products: [
        { name: "Ham" },
        { name: "Bread" }
      ]
    }
  ],
  detailTemplate: 'Products: <div class="grid"></div>',
  detailInit: function(e) {
    e.detailRow.find(".grid").kendoGrid({
      dataSource: e.data.products
    });
  }
});
}
</script>
</body>
</html>

[farhan]

Above is the code not working in dojo it gives error 

Uncaught TypeError: Cannot convert undefined or null to object
    at eval (eval at compile (kendo.all.min.js:25:3789), <anonymous>:3:55)
    at init._toggleDetails (kendo.all.min.js:25:1386618)
    at HTMLAnchorElement.<anonymous> (kendo.all.min.js:25:1386202)
    at HTMLTableElement.dispatch (jquery-1.12.4.min.js:3:12444)
    at HTMLTableElement.r.handle (jquery-1.12.4.min.js:3:9173)
VM1088:3 Uncaught TypeError: Cannot convert undefined or null to object
    at eval (eval at compile (kendo.all.min.js:25:3789), <anonymous>:3:55)
    at init._toggleDetails (kendo.all.min.js:25:1386618)
    at HTMLAnchorElement.<anonymous> (kendo.all.min.js:25:1386202)
    at HTMLTableElement.dispatch (jquery-1.12.4.min.js:3:12444)
    at HTMLTableElement.r.handle (jquery-1.12.4.min.js:3:9173)
4VM1088:3 Uncaught TypeError: Cannot convert undefined or null to object
    at eval (eval at compile (kendo.all.js:307701:86), <anonymous>:3:55)
    at init._toggleDetails (kendo.all.js:307701:86)
    at HTMLAnchorElement.<anonymous> (kendo.all.js:307701:86)
    at HTMLTableElement.dispatch (jquery-1.12.4.min.js:3:12444)
    at HTMLTableElement.r.handle (jquery-1.12.4.min.js:3:9173)
eval @ VM1088:3
_toggleDetails @ kendo.all.js:307701
(anonymous) @ kendo.all.js:307701
dispatch @ jquery-1.12.4.min.js:3
r.handle @ jquery-1.12.4.min.js:3

[Georgi Denchev]

Hello, Farhan,

The problem occurs because you're attempting to access the Grid before it is initialized:

// Trying to access the Grid instance
$("#grid").data("kendoGrid").dataSource.data([]);

// The grid is initialized afterwards
$("#grid").kendoGrid({});

You should execute the first piece of code after the grid declaration:

$("#grid").kendoGrid({});

$("#grid").data("kendoGrid").dataSource.data([]);

Dojo:

https://dojo.telerik.com/@gdenchev/ivUlEfad 

Best Regards,

Georgi