Kendo UI (2018-2019) template #= in calc() causes Invalid template on modern browsers (Edge 140 / Chrome)

[Victor]

Hello —

we're seeing an Uncaught Error: Invalid template when rendering a Kendo template that contains a calc() CSS expression with a #= ... # interpolation. The template works on older browsers (Edge 139 and older) but fails on newer ones (Edge 140+, recent Chrome). Could this be a compatibility/escaping change in the template engine or browser JS engine? Any guidance or workaround would be appreciated.

Code Used:

<!--SmartView Pipeline STEP Template-->
<script id="smartViewPipelineStepTemplate" type="text/x-kendo-template">
    <div class="col-xs-4">
        <div class="contenitor-element-process-monitor">
            <div class='pipelineTask element-process-monitor
                        #if(completion() < 100){ if(completion() > 0){ # blue # } }#
                        #if(completion()==100){ # complete # }#
                        #=type#'
                 idStep='#:idStep()#'>
                <div class='clickableStep'>
                    <div class='process-monitor-name'>#: stepNumber #</div>
                    <div class='process-monitor-description'>#:stepNameShort()#</div>
                    <div class='info-process-monitor'></div>

                    <!-- erroring line -->
                    <div style="width:calc(#=completion()#% - 24px)" class='progress-process-monitor clickableStep'>
                        <p>#=completion()#%</p>
                    </div>

                </div>
            </div>
        </div>
    </div>
</script>

Error shown in console

Uncaught Error: Invalid template: '<div class="col-xs-4"> ... <div style="width:calc(#=completion()#% - 24px)" ...>'

 

Environment/Version

• Kendo UI: v2019.1.220 (Kendo jQuery bundle in production)

• jQuery: 1.12.4 included in the project

• Browsers where error occurs: Edge 140+, recent Chrome (older Edge 139 works)

• Template uses legacy Kendo template syntax (#=, #:, # if(...) { # ... # } #)

[Neli]

Hi Victor, 

I replied previously in the support thread regarding the same issue. For convenience below you will find my reply as well. I would recommend continue the conversation in a single thread:

I tried to replicate the described issue on my side, but to no avail. In the Dojo linked here, the calc() function is used in a template as demonstrated in the snippet in your email - https://dojo.telerik.com/bCwrcvdr 

<script type="text/x-kendo-template" id="myTemplate">
      <div style="width:calc(#=test()#% - 24px)" class='progress-process-monitor clickableStep'>
       .....
      </div>
</script>

The used Kendo verison is 2021.3.1109. I tested the behavior in Chrome, Edge and Firefox, but the example runs as expected on my side. Could you please review the example and let me know if I am missing something? I will appreciate any detail on how the issue can be replicated locally, so we could provide appropriate assistance.

Regards,

Neli