Rendering column template scrumbles content.

Progress® Kendo UI® for jQuery Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Need More Info

Last Updated: 27 Sep 2022 14:49 by ADMIN

Sergio

Created on: 20 Sep 2022 13:36

Category: TreeList

Type: Bug Report

Rendering column template scrumbles content.

Hi,

Using Fluor´s commercial purchase, we were able to get latest kendoui.for.jquery.2022.3.913.commercial, previously we were using v2019.1.220

After migration, I see that when using a kendoTreeList, that has a column template, it does not properly render the template content.

Template to render:

</div>

</div>

</div>

</script>

Rendered template (good one) with previous version v2019.1.220

</div>

</div>

</div>

</td>

Rendered template (buggy one) after upgrading to version 2022.3.913

</i></div><i class="fas fa-calendar-alt">

</i></div><i class="fas fa-pencil-alt">

</i></div><i class="fas fa-trash-alt">

</i></i></i></td>

As we can see in the original template there are icons wrapped in anchors, previous version rendered the template ok, but new version scrambles this tags…

I have also been playing in the Dojo and this seems to be the case.

Regards….

3 comments

ADMIN

Georgi Denchev

Posted on: 27 Sep 2022 14:49

Hi, Sergio,

Thank you for the provided Dojo.

The reason for the data to not appear is that all of the columns are frozen(locked) and the TreeList doesn't have a defined height:

height: 500, // This line of code will fix the problem

As for the problem with the template, I ran the example in v2019 and it behaves in the exact same manner on my end. The issue is that the <i> tag is not self-closing. In simpler words, <i /> is not allowed. You must close it with </i>.

After making the above changes, the TreeList seems to be behaving normally, here's the HTML output of a <td> element:

<td role="gridcell" aria-describedby="f5313baf-430f-4a83-9599-0038e19ebaed" class="" style="white-space: nowrap;"><span class="k-icon k-i-expand"></span>

    <div id="actions-revenue">

        <a id="delayButton">

        <i class="fas fa-calendar-alt"></i>1</a>

      </div>

    <div id="actions-edit">

        <a id="editButton">

        <i class="fas fa-pencil-alt"></i>2</a>

      </div>

    <div id="actions-delete">

        <a id="deleteButton">

        <i class="fas fa-trash-alt"></i>3</a>

      </div>
    </td>

Dojo

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

Could you let me know if this is the expected result?

Best Regards,
Georgi Denchev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Sergio

Posted on: 27 Sep 2022 12:41

Hi, I have simplified a little the code and throw to the Dojo https://dojo.telerik.com/uXEzOkoD

Not sure why today it´s not even rendering the rows...

Regards...

ADMIN

Georgi Denchev

Posted on: 27 Sep 2022 08:43

Hello, Sergio,

Thank you for the provided code snippet.

Would it be possible for you to provide me with the Dojo where you have tested the template and reproduced the issue? I'm missing some of the custom styles and properties and I am having a bit of a difficulty with the reproduction of the problem.

Afterwards, I can examine it and potentially confirm the bug(or provide any other relevant information to you).

Best Regards,
Georgi Denchev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.