Got Uncaught TypeError When Cell's Text is Truncated

[mewbie]

Hello,

I'm using truncate text script to trim data to be displayed in cells,

Code: [Select]

var truncateRenderSummary = function (ui) {
    var dataRow = ui.rowData.Summary;
    // console.log(ui.rowData);
    // dataRow = sanitize(dataRow);
    if (dataRow.length > 15)
        return dataRow.substring(0, 17) + '...';
    else
        return dataRow;
}
But in turns I got Uncaught TypeError: Cannot read property 'style' of null error, and the child grid display becomes blank

My parent grid settings:

Code: [Select]

       

        { title: "Summary", dataType: "string", minWidth: '150', align: "center", dataIndx: "Summary", render: truncateRenderSummary },

//

        resizable: true,
        flexHeight: true,
        flexWidth: false,
        collapsible: true,
        hoverMode: 'row',
        pageModel: { type: "remote", rPP: 10, strRpp: "{0}" },
        dataModel: dataModel,
        colModel: colModel,
        filterModel: { on: true, mode: "OR", header: true, type: 'remote' },
        selectionModel: { mode: 'single', type: 'row' },
        virtualX: true, virtualY: false,
        editable: false,
        showTitle: false,
        hwrap: false,
        editModel: { clicksToEdit: 2 },
        selectionModel: { mode: 'single', type: 'row' },
        detailModel: { init: initDetail },
       // toolbar settings

and my child grid settings:

Code: [Select]

            width: 'flex',
            maxHeight: 180,
            hwrap: false,
            numberCell: { show: false },
            showTop: false

I need the row height flexibility of the parent grid,
can each row be in fixed height to accommodate the truncate function?

[paramvir]

Could you please share plnkr of the issue:

https://plnkr.co/edit/zo6TdOvweAFvWM5JLasV?p=preview

Fix row height is attained by setting rowHt option and autoRow to false.

autoRow: false,
rowHt: 25

[mewbie]

Thank you,

Here it is, https://plnkr.co/edit/dCGRoA9eV7rHkbQHWlAU?p=preview

You can see when you open the child tab and scroll right then back again you will find the child grid's is missing,
however you don't see this when the window is maximized (launched in separate window),

this is just like in my case, it seems fine when maximized (although the error log sometimes occur),
but when DevTools is docked (grid window is not full), when the opened grid is scrolled right and back, the child grid is missing.

[mewbie]

Also in the plunkr, if you add

                wrap: true,

in the child grid (gridDetailModel), the column (product name) is set to resizable: false,
and when you edit the cell with longer data, column is still flexed and wrap is false.

https://plnkr.co/edit/Xy1fCtxN4SxkNTdH5B1s?p=preview

How can I make it fixed width for child's grid?

[paramvir]

column is flexed due to call to flex. Just comment this code.

Code: [Select]

                /*refresh: function (evt, ui) {
                    if (ui.source != "flex") {
                        this.flex();
                    }
                },*/

I'm still looking for child grid display problem.