Completed
Last Updated: 03 May 2023 09:15 by ADMIN
Release R2.2023-Increment.3(7.June.2023)
Cuinn
Created on: 19 Apr 2023 10:39
Category: Grid
Type: Bug Report
0
An error is thrown when setting column attributes in the Grid

Bug report

When setting column attribute that contains "_" in the Grid, an error is thrown.

Reproduction of the problem

  1. Open this Dojo example - https://dojo.telerik.com/uPuDeTUk/4
  2. Open the browser console

Current behavior

An error is thrown due to the 'cause_error' attribute for the classification column

Expected/desired behavior

No errors should be thrown

Environment

  • Kendo UI version: 2023.1.314
  • Browser: [all]
2 comments
ADMIN
Martin
Posted on: 03 May 2023 09:15

Hello, Cuinn,

Thank you for the additional information. 

The developer that was assigned to fix the bug appears to have come to the same conclusion. It has already been fixed for our next official release in June.

If you wish, you can modify the grid.js file with the new function definition until the release.

function decorateCellWithClass(html) {
        let element = html;
        let classes = element.match(/class=["][^"]+/g);
        if (classes) {
            const cssClasses = classes[0].split('\"').pop();
            element = element.replace(cssClasses, cssClasses + " k-table-td");
        } else {
            element = element.replace("<td","<td class='k-table-td'");
        }
        return element;
    }

Let me know if you have any further questions.

Regards,
Martin
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources
Cuinn
Posted on: 27 Apr 2023 01:20

To be clear:

The error occurs because the 'cause_error' attribute value contains a string that contains 'class'. NOT because the attribute name contains '_'.

I have copied the ticket text below as it actually describes the error, the cause of the error, the location of the error and a suggested fix.

This function is located in the  kendo.grid.js file.

    function decorateCellWithClass(html) {
        let element = html;
        if (element.indexOf("class") !== -1) {
            const cssClasses = element.match(/class=["][^"]+/g)[0].split('\"').pop();
            element = element.replace(cssClasses, cssClasses + " k-table-td");
        } else {
            element = element.replace("<td","<td class='k-table-td'");
        }
        return element;
    }

 

When this function is called it errors as the element.indexOf("class") check returns true. The regex then runs and fails as the regex is more specific than the simple check for the 'class' string. This causes an error in the component. Could you please use an if check that is similar to the regex so that it doesn't mistakenly trigger.

In my case the string that is being checked (the value in the variable element is '<td data-cell-field="classification">'. So it finds the string 'class', but the regex is expecting to find 'class=""'.