Custom Command Template Not Displaying

[Donald]

We recently upgraded Telerik to 2024.3.806.  Adding a reference to kendo.min.all.js to the Scripts file in the MVC project updated the styles in our grids, but the custom template no longer displays when clicking on a button for it from the grid.

Removing the reference to the new JS restores the functionality but breaks the styling, which makes it difficult for our users to navigate through the grid (control buttons are invisible until the user hovers over them; the new style fixes that issue).  Is there anything wrong with this code as written?  None of it has been changed.

@(Html.Kendo().Grid<ESGR.Icms.Core.Domain.QuickViewCasesDto>()
                 .Name("grid")
                 .Sortable()
             .Pageable(pager =>
             {
                 pager.Input(true);
                 pager.Info(true);
                 pager.Numeric(false);
                 pager.PreviousNext(true);
                 pager.PageSizes(new int[] { 25, 50, 100 });
             })
             .Columns(columns =>
             {
                 columns.Bound(column => column.FirstName).Title("First Name").Media("(min-width: 768px)");
                 columns.Bound(column => column.LastName).Title("Last Name").Media("(min-width: 768px)");
                 columns.Bound(column => column.DateOpened).Title("Date Opened").Width(200).Format("{0:MM/dd/yyyy}").Media("(min-width: 768px)");
                 columns.Bound(column => column.CaseNumber).Title("Case Number").Width(120).Media("(min-width: 768px)");
                 columns.Bound(column => column.CaseStatus).Title("Status").Width(120).Media("(min-width: 768px)");
                 columns.Bound(column => column.CaseState).Title("State").Width(80).Media("(min-width: 768px)");
                 columns.Bound(column => column.CaseRegion).Title("Region").Width(100).Media("(min-width: 768px)");
                 columns.Bound(column => column.AssignedTo).Title("Assigned To").Width(120).Media("(min-width: 768px)");
                 columns.Bound(column => column.EnteredBy).Title("Entered By").Width(120).Media("(min-width: 768px)");
                 columns.Bound(column => column.LastUpdate).Title("Last Update").Width(130).Format("{0:MM/dd/yyyy}").Media("(min-width: 768px)");
                 columns.Bound(column => column.CaseIdentifier).Title("Case Identifier").Width(80).Media("(min-width: 768px)").Hidden();
                 columns.Bound(column => column.Employer).Title("Employer").Width(80).Media("(min-width: 768px)").Hidden();
                 columns.Bound(column => column.OmbudsmanFirstName).Title("OmbudsmanFirstName").Media("(min-width: 768px)").Hidden();
                 columns.Bound(column => column.OmbudsmanLastName).Title("OmbudsmanLastName").Media("(min-width: 768px)").Hidden();
                 columns.Group(group => group.Title("Action Required").Width(150).Columns(info =>
                 {
                     info.Bound(x => x.TwoDayRequired).Title("2 Day").Width(50);
                     info.Bound(x => x.SevenDayRequired).Title("7 Day").Width(50);
                     info.Bound(x => x.FourteenDayRequired).Title("14 Day").Width(56);
                 }).Media("(min-width: 768px)")
                 );
                 columns.Bound(column => column.CaseID).Width(40).ClientTemplate("<a class='k-button manage' aria-label='ManageCase' href='" +
                 @Url.Content("~/ManageCase") + "?caseId=#= CaseID #'" + ">ManageCase</a>").Sortable(false)
                     .Title("Manage Case").Width(100).Media("(min-width: 768px)");
                 columns.Template("#=resColTemplate(data)#").Title("Records").Media("(max-width: 768px)");
                 columns.Command(command => command.Custom("MoreInfo").Click("showDetails")).Title("More Info").Width(90).Media("(min-width: 768px)");
             }).DataSource(ds => ds.Ajax()
              .Read(r => r.Url(@Url.Content("~/QuickViewCases?handler=Read")).Data("forgeryToken").Data("StatusSelection"))
                 .Model(m => m.Id(id => id.CaseID))
                 .PageSize(25))
                 .Pageable()
             )

 @*ViewDetail Modal view*@
 @(Html.Kendo().Window()
     .Name("Details")
     .Title("Case More Information")
     .Visible(false)
     .Modal(true)
     .Resizable()
     .Draggable(true)
     .Width(500)
 )

<script type="text/x-kendo-template" id="template">
    <div>
        <div class='viewdetails'>
            <ul class="form-group p-3 mt-2">
                <li><span class="b">Date Opened:&nbsp;</span>#= DateOpenedString #</li>
                <li><span class="b">Ombudsman:&nbsp;</span>#= OmbudsmanFirstName # #= OmbudsmanLastName # </li>
                <li><span class="b">Employer:&nbsp;</span>#= Employer #</li>
                <li><span class="b">Primary Point of Contact First Name:&nbsp;</span>#= PriPocFirst #</li>
                <li><span class="b">Primary Point of Contact Last Name:&nbsp;</span>#= PriPocLast #</li>
                <li><span class="b">Email:&nbsp;</span>#= Email #</li>
                <li><span class="b">State:&nbsp;</span>#= CaseState #</li>
                <li><span class="b">Summary:&nbsp;</span>#= Summary #</li>
            </ul>
        </div>
    </div>

</script>

<script>
 var detailsTemplate;
        
 $(document).ready(function() {
     detailsTemplate = kendo.template($("#template").html());
 });

//Open ViewDetail Window
function showDetails(e) {
    e.preventDefault();
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    var wnd = $("#Details").data("kendoWindow");
    wnd.content(detailsTemplate(dataItem));
    wnd.center().open();
};

</script>

I am also including screenshots.  In the browser tools I can see that the data does load in the template, but it does not display on the screen.

Any ideas?

[Donald]

Hello Eyup,

None of your suggestions works.   Either no data loads in the grid, or I see only the title bar of the popup.

If you examine the code snippets I provided above, the implementation of the popup is the same as in the REPL you provided here:

https://netcorerepl.telerik.com/cTkRcowu30s3giJZ39

It does not work in our environment.

For clarity, here are the code snippets again:

 

@(Html.Kendo().Grid<QuickViewCasesDto>()
                                            .Name("grid")
                                            .Columns(columns =>
                                            {
                         columns.Command(command => command.Custom("MoreInfo").Click("showDetails")).Title("More Info").Width(90).Media("(min-width: 768px)");

                        }
                        ).DataSource(ds => ds.Ajax()
                                        .Read(r => r.Url(@Url.Content("~/QuickViewCases?handler=Read")).Data("forgeryToken").Data("StatusSelection"))
                                            .Model(m => m.Id(id => id.CaseID))
                                            .PageSize(25))
                                            .Pageable()
                )
}
    @*ViewDetail Modal view*@
    @(Html.Kendo().Window()
        .Name("Details")
        .Title("Case More Information")
        .Visible(false)
        .Modal(true)
        .Resizable()
        .Draggable(true)
        .Width(500)
    )

 <script>
     var detailsTemplate;
 
     $(document).ready(function() {
         detailsTemplate = kendo.template($("#template").html());
     });

    //Open ViewDetail Window
    function showDetails(e) {
        e.preventDefault();
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        var wnd = $("#Details").data("kendoWindow");
        wnd.content(detailsTemplate(dataItem));
        wnd.center().open();
    };
</script>

Again, the Kendo UI version is 2024.3.806 and the jQuery version is 3.7.0.

 

[Eyup]

If the REPL works, it indicates that the problem might be related to something different in the local environment. Or the issue can be related to a hidden javascript error.

Can you check these steps to ensure that there are no hidden script errors interfering?

1. Run the page on Chrome browser.

2. Open the F12 browser inspector.

3. Click on the Console or Elements tab.

4. Press Ctrl+R9 to refresh the resources.

5. Ensure that there are no script errors.

If there are no errors, can you please modify the attached basic Grid project to demonstrate the issue and send it back to us for deeper debugging?

[Eyup]

Hi Donald,

 

Thank you for reaching out.

I guess this could happen because of the template evaluations. Since R1 2023 version, as per the CSP compliance initiative, we had to remove the evaluations within kendo templates from the source of our components, as they are not compatible with the unsafe-eval directive:
https://github.com/telerik/kendo-ui-core/issues/7174

 
You can find additional info here:
https://docs.telerik.com/aspnet-core/html-helpers/helper-basics/content-security-policy

In order to make the old template compatible with CSP, you can use a Template Handler or the newly introduced Template component. Both of these solutions are demonstrated here with examples:
https://docs.telerik.com/aspnet-core/html-helpers/helper-basics/using-client-templates#using-the-template-component

In summary, can you please temporarily hide all the template columns and try creating a Custom Command column like this one?
https://netcorerepl.telerik.com/cTkRcowu30s3giJZ39

Please keep me updated on the result. I hope you find this information beneficial.

 

Regards,
Eyup
Progress Telerik