detailRowModule.expand command is throwing error after updating to version 20.1.47

[Matthew Gulick]

The following command (that is working without issue in v19.2.51) 

• grid.detailRowModule.expand(rowIndex)
  

is throwing the following error in the browser console in v20.1.47

Uncaught TypeError: Cannot read properties of undefined (reading 'style')
    at t.updateVisibleExpandCollapseRows (ej2.min.js:9:1207714)
    at e.toogleExpandcollapse (ej2.min.js:9:2187354)
    at e.expand (ej2.min.js:9:2188729)
    at UpdateGridDetailRow (view.js?v=1.4.1.5:3403:34)
    at view.js?v=1.4.1.5:3373:13
    at Array.forEach (<anonymous>)
    at UpdateGridRows (view.js?v=1.4.1.5:3368:10)
    at Object.<anonymous> (view.js?v=1.4.1.5:3343:17)
    at j (jquery?v=1.4.1.5:5:26925)
    at Object.fireWith [as resolveWith] (jquery?v=1.4.1.5:5:27738)

[Matthew Gulick]

 Here is my function (any any relevant functions) in case this will assist in determining a solution.

/**
 * Update grid detail row
 * @param {object} grid ej2_instances[0] of the grid
 * @param {object} ele element
 */
function UpdateGridDetailRow(grid, ele) {
    //  get index of the row from the element id
    let rowIndex = grid.dataSource.map(function (x) { return x.id; }).indexOf(ele.id);

    //  get next row (before the collapse)
    let nextRow = grid.element.querySelector("tbody tr.section-row[aria-rowindex='" + rowIndex + "']").nextElementSibling;
    let detailRowWasExpanded = IsGridRowExpanded(grid, rowIndex);
 
    //  is row expanded?
    if (detailRowWasExpanded) {
        //  collapse detail row for the row (so the icon is reset)
        grid.detailRowModule.collapse(rowIndex);
    }
   
    //  is the next row the detail row?
    if (IsNotNullOrUndefined(nextRow) && (nextRow.style["display"] == "none" || nextRow.classList.contains("e-detailrow"))) {
        //  remove detail row
        nextRow.remove();
 
        if (detailRowWasExpanded) {
            //  trigger the rendering of the detail row by expanding the row
            grid.detailRowModule.expand(rowIndex);
        }
    }
}
 
/**
 * Is the grid row expanded?
 * @param {object} grid ej2_instances[0] of the grid
 * @param {number} rowIndex grid row index
 */
function IsGridRowExpanded(grid, rowIndex) {
    return grid.element.querySelector("tbody tr.e-row[aria-rowindex='" + rowIndex + "'] div.e-icons.e-dtdiagonaldown.e-icon-gdownarrow");
}

[Rajapandi Ravi]

Hi Matthew,

Greetings from Syncfusion support

We have checked your query and we could see that you are facing the problem while invoking detailRowModule.expand method in the latest version. Before we start providing a solution to your query, we need more information for our clarification. So please share the below details that will be helpful for us to provide a better solution.

1)         Please share your exact requirement with a detailed description.

2)         In your shared information, before invoking the detailRowModule.expand method you are performing some actions in the UpdateGridDetailRow function. Please share the details about what

             you are trying to achieve your requirement.

3)         Please share your complete Grid rendering code.

4)          If possible, please share any issue reproducible sample or try to reproduce the problem in the below-attached sample, that will be helpful for us to validate and provide a better solution.

              Sample: https://stackblitz.com/edit/xewqkm?file=index.ts

Regards,

Rajapandi R

[Matthew Gulick]

1. Please share your exact requirement with a detailed description
   • requirement is simple. I need to collapse, remove then expand a grids detail row. This worked fine before I had to update to 20.1.47 (to correct other bugs)
   • Details: the detail row is rendered on expand (rowdatabound) and some user triggered action may require the detail row to be re-rendered (as read-only or whatever the business rules dictate). As the grid does not natively allow updating of the detail row directly my work-around was to remove it then on expand rowdatabound is triggered again and the detail row renders the new data. if the user had the row expanded, then I programmatically collapse, remove, expand. if they didn't have it expanded then I don't have to do anything because if they expand it, the detail row will be rendered with the new data.
     
2. In your shared information, before invoking the detailRowModule.expand method you are performing some actions in the UpdateGridDetailRow function. Please share the details about what you are trying to achieve your requirement.
   • the only thing that was not included was the function "IsNotNullOrUndefined" (which as its name implies) does a null or undefined check on the "next row" element and is inconsequential to this query.
3. Please share your complete Grid rendering code.
   • too complex and it is not needed to reproduce this issue .... see link below
     
4. If possible, please share any issue reproducible sample or try to reproduce the problem in the below-attached sample, that will be helpful for us to validate and provide a better solution.
   • https://stackblitz.com/edit/xewqkm-8uanmj

[Pavithra Subramaniyam]

Hi Matthew,

Thanks for the details.

In our EJ2 Grid, removing the details row is not recommended. However, currently we are validating the reported scenario and will update further details on April 11^th, 2022. Until then we appreciate your patience.

Regards,

Pavithra S

[Rajapandi Ravi]

Hi Matthew,

Thanks for your patience

We have checked your shared sample and we could see that after collapsing the record you are removing the detail row element. By default, in our EJ2 Grid, after collapsing the record we have hiding the detail row element by setting style display as none. Removing the detail row element was not a proper way and it is not recommended way. This was the default behavior in our current architecture.

By default, in our Grid while expand/collapse we have maintained the expand/collapse rows visibility status, Since you are removing the detail element,  so that the detail row elements were not existing while updating the visibility status in the source method “updateVisibleExpandCollapseRows”. It was the cause of the problem. So, we suggest you not removing the detail row in your application.

Regards,

Rajapandi R

[Matthew Gulick]

What is the "recommended" way to refresh/re-render the details row now as there wasn't one before and this was my work-around to this limitation?

[Rajapandi Ravi]

Hi Matthew,

Thanks for the update.

Before we start providing solution on your query, we need some information for our clarification. Please share the below details that will be helpful for us to provide better solution.

1)         Please share the use case scenario about why you would like to remove the detail row.

2)         In your query you have mentioned that “recommended way to refresh/re-render the detail row”, so please share the details about why you would like to refresh/re-render the detail row.

Regards,

Rajapandi R

[Matthew Gulick]

I will attempt to reiterate this issue again.

On expand of a grid row the detail row is rendered which contains html elements such as buttons, textbox, textarea, dropdownlist, checkbox, richtexteditor, etc, etc. 

When the user clicks a button (outside of the detail row) the html elements inside the detail row need to be re-rendered into their read-only states. The button click sends an ajax request and the razor view returns the new element "states" based on properties passed to it, set by the backend business logic, therefore the detail rows html needs to be changed to reflect this new html (without page reload or grid refresh).

For the detail row to be re-rendered it must be removed (at least in the version this was written in) and re-expanded so the row databound event is triggered again, which is why if it is expanded, I collapse it, remove it, then re-expand it.

It does still expand on grid.detailRowModule.expand(rowIndex), but there is a console error thrown as follows.

"Uncaught TypeError: Cannot read properties of undefined (reading 'style')"

from the following line in ej2.min.js

t.prototype.updateVisibleExpandCollapseRows = function() {
            for (var e = this.getRowsObject(), t = 0, i = e.length; t < i; t++)
                (e[t].isDataRow || e[t].isAggregateRow) && "none" === this.getRowElementByUID(e[t].uid).style.display ? e[t].visible = !1 : e[t].visible = !0
        }

Perhaps the attached zip with images will better illustrate.

Attachment: iamges_361d10e1.zip

[Rajapandi Ravi]

Hi Matthew,

Currently, we are working on this query with your shared information, and we will update you on the details on or before 19^th APR 2022. Until then we appreciate your patience.

Regards,

Rajapandi R

[Matthew Gulick]

.detailRowModule.collapse(rowIndex) also has the same issue. sometimes it works and sometimes it does not.

This issue is a big problem and is breaking core functionality on this page.

[Rajapandi Ravi]

Hi Matthew,

Thanks for the update.

We have checked your shared information and we suggest you use the below way to resolve the script error. In the below sample, we have override the updateVisibleExpandCollapseRows() and resolve the script error. Please refer the below code example and sample for more information.

 

load: function() {

            grid.updateVisibleExpandCollapseRows = function() {

                const rows: any = this.getRowsObject();

                for (let i: number = 0, len: number = rows.length; i < len; i++) {

 

                    if ((rows[i].isDataRow || rows[i].isAggregateRow) && this.getRowElementByUID(rows[i].uid) && (this.getRowElementByUID(rows[i].uid) as HTMLTableRowElement).style.display === 'none') {

                        (<{ visible?: boolean }>rows[i]).visible = false;

                    } else {

                        //rows[i].visible = true

                        (<{ visible?: boolean }>rows[i]).visible = true;

                    }

                }

       

            }

        },

 

Sample: https://stackblitz.com/edit/xewqkm-curd2p

Regards,

Rajapandi R

[Matthew Gulick]

Thanks, that appears to have solved the issue.

Is this word-around something that I will have to use for all time, or will there be an adjustment to the grid in a future release to account for a detail row being removed (or hopefully a built in way to update a grid row when detail template is used)?

[Rajapandi Ravi]

Hi Matthew,

In your application you have remove the detailRow tr element and override our default behavior. Since it is not a valid case we have not able to fix in our source, to resolve the problem we suggest you use the solution which was already shared in our previous update.

Regards,

Rajapandi R