Telerik Forums / KendoReact
This is a migrated thread and some comments may be shown as answers.

React Grid looses cell alignment when grouping

3 Answers 339 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Ryan
Top achievements
Rank 1
Ryan asked on 29 Jan 2019, 10:39 PM
notworking.jpg
working.jpg

Hi,

We are using the grid on a lot of pages and on some of the pages after grouping the cells loose their alignment with the header cells. I've attached screen shots of one working and not working and I've added the relevant DOM from the Working and Not Working grids below. Please advise...

Working

<div class="k-widget k-grid" style="height: 545px;">
    <div class="k-grouping-header k-grouping-header-flex">
        <div class="k-indicator-container">
            <div class="k-group-indicator"><a class="k-link" href="#" tabindex="-1"><span class="k-icon k-i-sort-asc-sm"></span>Supplier</a><a class="k-button k-button-icon k-bare" tabindex="-1"><span class="k-icon k-i-group-delete"></span></a></div>
        </div>
        <div class="k-indicator-container"></div>
    </div>
    <div class="k-grid-header" style="padding: 0px 16px 0px 0px;">
        <div class="k-grid-header-wrap">
            <table style="width: 1032px;">
                <colgroup>
                    <col width="32px">
                    <col width="129px">
                    <col width="128px">
                    <col width="236px">
                    <col width="78px">
                    <col width="68px">
                    <col width="127px">
                    <col width="88px">
                    <col width="58px">
                    <col width="88px">
                </colgroup>
                <thead>
                <tr>
                    <th colspan="1" rowspan="1" class="k-header"><a class="k-link"> </a><span class="k-column-resizer" draggable="false" style="cursor: col-resize; display: block; height: 1000%; position: absolute; right: 0px; top: 0px; width: 0.5em;"></span></th>
                    <th colspan="1" rowspan="1" class="k-header">
                        <div style="display: inline;">
                            <div style="display: inline; position: absolute; cursor: pointer; right: 5px;"><span class="k-icon k-i-more-vertical"></span></div>
                        </div>
                        <a class="k-link" href="#">Group</a><span class="k-column-resizer" draggable="false" style="cursor: col-resize; display: block; height: 1000%; position: absolute; right: 0px; top: 0px; width: 0.5em;"></span>
                    </th>
                    <th colspan="1" rowspan="1" class="k-header">
                        <div style="display: inline;">
                            <div style="display: inline; position: absolute; cursor: pointer; right: 5px;"><span class="k-icon k-i-more-vertical"></span></div>
                        </div>
                        <a class="k-link" href="#">Item #</a><span class="k-column-resizer" draggable="false" style="cursor: col-resize; display: block; height: 1000%; position: absolute; right: 0px; top: 0px; width: 0.5em;"></span>
                    </th>
                    <th colspan="1" rowspan="1" class="k-header">
                        <div style="display: inline;">
                            <div style="display: inline; position: absolute; cursor: pointer; right: 5px;"><span class="k-icon k-i-more-vertical"></span></div>
                        </div>
                        <a class="k-link" href="#">Description</a><span class="k-column-resizer" draggable="false" style="cursor: col-resize; display: block; height: 1000%; position: absolute; right: 0px; top: 0px; width: 0.5em;"></span>
                    </th>
                    <th colspan="1" rowspan="1" class="k-header centered-grid-cell">
                        <div style="display: inline;">
                            <div style="display: inline; position: absolute; cursor: pointer; right: 5px;"><span class="k-icon k-i-more-vertical"></span></div>
                        </div>
                        <a class="k-link" href="#">Case UPC</a><span class="k-column-resizer" draggable="false" style="cursor: col-resize; display: block; height: 1000%; position: absolute; right: 0px; top: 0px; width: 0.5em;"></span>
                    </th>
                    <th colspan="1" rowspan="1" class="k-header centered-grid-cell">
                        <div style="display: inline;">
                            <div style="display: inline; position: absolute; cursor: pointer; right: 5px;"><span class="k-icon k-i-more-vertical"></span></div>
                        </div>
                        <a class="k-link" href="#" style="">U/M</a><span class="k-column-resizer" draggable="false" style="cursor: col-resize; display: block; height: 1000%; position: absolute; right: 0px; top: 0px; width: 0.5em;"></span>
                    </th>
                    <th colspan="1" rowspan="1" class="k-header">
                        <div style="display: inline;">
                            <div style="display: inline; position: absolute; cursor: pointer; right: 5px;"><span class="k-icon k-i-more-vertical"></span></div>
                        </div>
                        <a class="k-link" href="#">Supplier</a><span class="k-column-resizer" draggable="false" style="cursor: col-resize; display: block; height: 1000%; position: absolute; right: 0px; top: 0px; width: 0.5em;"></span>
                    </th>
                    <th colspan="1" rowspan="1" class="k-header centered-grid-cell">
                        <div style="display: inline;">
                            <div style="display: inline; position: absolute; cursor: pointer; right: 5px;"><span class="k-icon k-i-more-vertical"></span></div>
                        </div>
                        <a class="k-link" href="#">Start Date</a><span class="k-column-resizer" draggable="false" style="cursor: col-resize; display: block; height: 1000%; position: absolute; right: 0px; top: 0px; width: 0.5em;"></span>
                    </th>
                    <th colspan="1" rowspan="1" class="k-header centered-grid-cell">
                        <div style="display: inline;">
                            <div style="display: inline; position: absolute; cursor: pointer; right: 5px;"><span class="k-icon k-i-more-vertical"></span></div>
                        </div>
                        <a class="k-link" href="#">Frontline</a><span class="k-column-resizer" draggable="false" style="cursor: col-resize; display: block; height: 1000%; position: absolute; right: 0px; top: 0px; width: 0.5em;"></span>
                    </th>
                    <th colspan="1" rowspan="1" class="k-header centered-grid-cell">
                        <div style="display: inline;">
                            <div style="display: inline; position: absolute; cursor: pointer; right: 5px;"><span class="k-icon k-i-more-vertical"></span></div>
                        </div>
                        <a class="k-link" href="#">Status</a><span class="k-column-resizer" draggable="false" style="cursor: col-resize; display: block; height: 1000%; position: absolute; right: 0px; top: 0px; width: 0.5em;"></span>
                    </th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
    <div class="k-grid-container">
        <div class="k-grid-content k-virtual-content">
            <div style="position: relative;">
                <table tabindex="-1" class="k-grid-table" style="width: 1032px;">
                    <colgroup>
                        <col width="32px">
                        <col width="129px">
                        <col width="128px">
                        <col width="236px">
                        <col width="78px">
                        <col width="68px">
                        <col width="127px">
                        <col width="88px">
                        <col width="58px">
                        <col width="88px">
                    </colgroup>
                    <tbody>
                    <tr class="k-grouping-row">
                        <td colspan="10">
                            <p class="k-reset"><a href="#" tabindex="-1" class="k-i-collapse k-icon"></a>Boston Beer Co Inc</p>
                        </td>
                        <td class="centered-grid-cell"></td>
                        <td class="centered-grid-cell"><span></span></td>
                    </tr>
                    <tr class="k-master-row">
                        <td class="k-group-cell"></td>
                        <td>1</td>
                        <td>1025</td>
                        <td>Sam Adams Seasonal Variety S (Sv) 2/12/12 Btl</td>
                        <td class="centered-grid-cell">87692291053</td>
                        <td class="centered-grid-cell">CASE</td>
                        <td>Boston Beer Co Inc</td>
                        <td class="centered-grid-cell">01/24/2019</td>
                        <td class="centered-grid-cell">$30.38</td>
                        <td class="centered-grid-cell"><span class="PUBLISHED">PUBLISHED</span></td>
                    </tr>
...

Not Working

<div class="k-widget k-grid" style="height: 545px;">
    <div class="k-grouping-header k-grouping-header-flex">
        <div class="k-indicator-container">
            <div class="k-group-indicator"><a class="k-link" href="#" tabindex="-1"><span class="k-icon k-i-sort-asc-sm"></span>State</a><a class="k-button k-button-icon k-bare" tabindex="-1"><span class="k-icon k-i-group-delete"></span></a></div>
        </div>
        <div class="k-indicator-container"></div>
    </div>
    <div class="k-grid-header" style="padding: 0px;">
        <div class="k-grid-header-wrap">
            <table>
                <colgroup>
                    <col width="32px">
                    <col>
                    <col>
                    <col>
                    <col>
                    <col>
                    <col>
                    <col>
                    <col>
                    <col width="61px">
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th colspan="1" rowspan="1" class="k-header"><a class="k-link"> </a><span class="k-column-resizer" draggable="false" style="cursor: col-resize; display: block; height: 1000%; position: absolute; right: 0px; top: 0px; width: 0.5em;"></span></th>
                    <th colspan="1" rowspan="1" class="k-header k-sorted">
                        <div style="display: inline;">
                            <div style="display: inline; position: absolute; cursor: pointer; right: 5px;"><span class="k-icon k-i-more-vertical"></span></div>
                        </div>
                        <a class="k-link" href="#">Company<span class="k-icon k-i-sort-asc-sm"></span></a><span class="k-column-resizer" draggable="false" style="cursor: col-resize; display: block; height: 1000%; position: absolute; right: 0px; top: 0px; width: 0.5em;"></span>
                    </th>
                    <th colspan="1" rowspan="1" class="k-header">
                        <div style="display: inline;">
                            <div style="display: inline; position: absolute; cursor: pointer; right: 5px;"><span class="k-icon k-i-more-vertical"></span></div>
                        </div>
                        <a class="k-link" href="#">Email</a><span class="k-column-resizer" draggable="false" style="cursor: col-resize; display: block; height: 1000%; position: absolute; right: 0px; top: 0px; width: 0.5em;"></span>
                    </th>
                    <th colspan="1" rowspan="1" class="k-header">
                        <div style="display: inline;">
                            <div style="display: inline; position: absolute; cursor: pointer; right: 5px;"><span class="k-icon k-i-more-vertical"></span></div>
                        </div>
                        <a class="k-link" href="#">Phone</a><span class="k-column-resizer" draggable="false" style="cursor: col-resize; display: block; height: 1000%; position: absolute; right: 0px; top: 0px; width: 0.5em;"></span>
                    </th>
                    <th colspan="1" rowspan="1" class="k-header">
                        <div style="display: inline;">
                            <div style="display: inline; position: absolute; cursor: pointer; right: 5px;"><span class="k-icon k-i-more-vertical"></span></div>
                        </div>
                        <a class="k-link" href="#">Address</a><span class="k-column-resizer" draggable="false" style="cursor: col-resize; display: block; height: 1000%; position: absolute; right: 0px; top: 0px; width: 0.5em;"></span>
                    </th>
                    <th colspan="1" rowspan="1" class="k-header">
                        <div style="display: inline;">
                            <div style="display: inline; position: absolute; cursor: pointer; right: 5px;"><span class="k-icon k-i-more-vertical"></span></div>
                        </div>
                        <a class="k-link" href="#" style="">City</a><span class="k-column-resizer" draggable="false" style="cursor: col-resize; display: block; height: 1000%; position: absolute; right: 0px; top: 0px; width: 0.5em;"></span>
                    </th>
                    <th colspan="1" rowspan="1" class="k-header">
                        <div style="display: inline;">
                            <div style="display: inline; position: absolute; cursor: pointer; right: 5px;"><span class="k-icon k-i-more-vertical"></span></div>
                        </div>
                        <a class="k-link" href="#">State</a><span class="k-column-resizer" draggable="false" style="cursor: col-resize; display: block; height: 1000%; position: absolute; right: 0px; top: 0px; width: 0.5em;"></span>
                    </th>
                    <th colspan="1" rowspan="1" class="k-header">
                        <div style="display: inline;">
                            <div style="display: inline; position: absolute; cursor: pointer; right: 5px;"><span class="k-icon k-i-more-vertical"></span></div>
                        </div>
                        <a class="k-link" href="#">Zip</a><span class="k-column-resizer" draggable="false" style="cursor: col-resize; display: block; height: 1000%; position: absolute; right: 0px; top: 0px; width: 0.5em;"></span>
                    </th>
                    <th colspan="1" rowspan="1" class="k-header">
                        <div style="display: inline;">
                            <div style="display: inline; position: absolute; cursor: pointer; right: 5px;"><span class="k-icon k-i-more-vertical"></span></div>
                        </div>
                        <a class="k-link" href="#">Industry</a><span class="k-column-resizer" draggable="false" style="cursor: col-resize; display: block; height: 1000%; position: absolute; right: 0px; top: 0px; width: 0.5em;"></span>
                    </th>
                    <th colspan="1" rowspan="1" class="k-header centered-grid-cell">
                        <div style="display: inline;">
                            <div style="display: inline; position: absolute; cursor: pointer; right: 5px;"><span class="k-icon k-i-more-vertical"></span></div>
                        </div>
                        <a class="k-link" href="#">Status</a><span class="k-column-resizer" draggable="false" style="cursor: col-resize; display: block; height: 1000%; position: absolute; right: 0px; top: 0px; width: 0.5em;"></span>
                    </th>
                    <th colspan="1" rowspan="1" class="k-header">
                        <div style="display: inline;">
                            <div style="display: inline; position: absolute; cursor: pointer; right: 5px;"><span class="k-icon k-i-more-vertical"></span></div>
                        </div>
                        <a class="k-link" href="#">Managed By</a><span class="k-column-resizer" draggable="false" style="cursor: col-resize; display: block; height: 1000%; position: absolute; right: 0px; top: 0px; width: 0.5em;"></span>
                    </th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
    <div class="k-grid-container">
        <div class="k-grid-content k-virtual-content">
            <div style="position: relative;">
                <table tabindex="-1" class="k-grid-table">
                    <colgroup>
                        <col width="32px">
                        <col class="k-sorted">
                        <col>
                        <col>
                        <col>
                        <col>
                        <col>
                        <col>
                        <col>
                        <col width="61px">
                        <col>
                    </colgroup>
                    <tbody>
                    <tr class="k-grouping-row">
                        <td colspan="11">
                            <p class="k-reset"><a href="#" tabindex="-1" class="k-i-collapse k-icon"></a>AL</p>
                        </td>
                        <td><span></span></td>
                        <td><span></span></td>
                        <td><span></span></td>
                        <td><span></span></td>
                        <td><span></span></td>
                        <td><span></span></td>
                        <td><span></span></td>
                        <td><span></span></td>
                        <td class="centered-grid-cell"><span></span></td>
                        <td><span></span></td>
                    </tr>
                    <tr class="k-master-row">
                        <td class="k-group-cell"></td>
                        <td><span class="Fintech">Integrity Restaurant Group of FL dba Made In Italy</span></td>
                        <td><span class="Fintech">alert_test@fintech.net</span></td>
                        <td><span class="Fintech"></span></td>
                        <td><span class="Fintech">1601 Rainbow Dr</span></td>
                        <td><span class="Fintech">Gadsden</span></td>
                        <td><span class="Fintech">AL</span></td>
                        <td><span class="Fintech">35901</span></td>
                        <td><span class="Fintech">Restaurant</span></td>
                        <td class="centered-grid-cell"><span class="ACTIVE">ACTIVE</span></td>
                        <td><span class="Fintech">Fintech</span></td>
                    </tr>
                    <tr class="k-grouping-row">
                        <td colspan="11">
                            <p class="k-reset"><a href="#" tabindex="-1" class="k-i-collapse k-icon"></a>AR</p>
                        </td>
                        <td><span></span></td>
                        <td><span></span></td>
                        <td><span></span></td>
                        <td><span></span></td>
                        <td><span></span></td>
                        <td><span></span></td>
                        <td><span></span></td>
                        <td><span></span></td>
                        <td class="centered-grid-cell"><span></span></td>
                        <td><span></span></td>
                    </tr>
                    <tr class="k-master-row">
                        <td class="k-group-cell"></td>
                        <td><span class="Fintech">Sam's Club</span></td>
                        <td><span class="Fintech">alert_test@fintech.net</span></td>
                        <td><span class="Fintech"></span></td>
                        <td><span class="Fintech">708 SW 8th Street</span></td>
                        <td><span class="Fintech">Bentonville</span></td>
                        <td><span class="Fintech">AR</span></td>
                        <td><span class="Fintech">72716</span></td>
                        <td><span class="Fintech">Club Store</span></td>
                        <td class="centered-grid-cell"><span class="ACTIVE">ACTIVE</span></td>
                        <td><span class="Fintech">Fintech</span></td>
                    </tr>
                    <tr class="k-master-row k-alt">
                        <td class="k-group-cell"></td>
                        <td><span class="Fintech">Walmart - DSD</span></td>
                        <td><span class="Fintech">alert_test@fintech.net</span></td>
                        <td><span class="Fintech"></span></td>
                        <td><span class="Fintech">708 SW 8th Street</span></td>
                        <td><span class="Fintech">Bentonville</span></td>
                        <td><span class="Fintech">AR</span></td>
                        <td><span class="Fintech">72716</span></td>
                        <td><span class="Fintech">Mass Merchant</span></td>
                        <td class="centered-grid-cell"><span class="ACTIVE">ACTIVE</span></td>
                        <td><span class="Fintech">Fintech</span></td>
                    </tr>
                    <tr class="k-grouping-row">
                        <td colspan="11">
                            <p class="k-reset"><a href="#" tabindex="-1" class="k-i-collapse k-icon"></a>AZ</p>
                        </td>
                        <td><span></span></td>
                        <td><span></span></td>
                        <td><span></span></td>
                        <td><span></span></td>
                        <td><span></span></td>
                        <td><span></span></td>
                        <td><span></span></td>
                        <td><span></span></td>
                        <td class="centered-grid-cell"><span></span></td>
                        <td><span></span></td>
                    </tr>
                    <tr class="k-master-row">
                        <td class="k-group-cell"></td>
                        <td><span class="Fintech">CB Theater Experience, LLC</span></td>
                        <td><span class="Fintech">alert_test@fintech.net</span></td>
                        <td><span class="Fintech"></span></td>
                        <td><span class="Fintech">2000-B Southbridge Parkway Suite 100</span></td>
                        <td><span class="Fintech">Birmingham</span></td>
                        <td><span class="Fintech">AZ</span></td>
                        <td><span class="Fintech">35209</span></td>
                        <td><span class="Fintech">Theater</span></td>
                        <td class="centered-grid-cell"><span class="ACTIVE">ACTIVE</span></td>
                        <td><span class="Fintech">Fintech</span></td>
                    </tr>
                    <tr class="k-master-row k-alt">
                        <td class="k-group-cell"></td>
                        <td><span class="Fintech">Circle K</span></td>
                        <td><span class="Fintech">alert_test@fintech.net</span></td>
                        <td><span class="Fintech"></span></td>
                        <td><span class="Fintech">P.O. Box 52085</span></td>
                        <td><span class="Fintech">Phoenix</span></td>
                        <td><span class="Fintech">AZ</span></td>
                        <td><span class="Fintech">85072</span></td>
                        <td><span class="Fintech">C-Store</span></td>
                        <td class="centered-grid-cell"><span class="ACTIVE">ACTIVE</span></td>
                        <td><span class="Fintech">Fintech</span></td>
                    </tr>
                    <tr class="k-master-row">
                        <td class="k-group-cell"></td>
                        <td><span class="Fintech">Hillstone Restaurant Group, Inc.</span></td>
                        <td><span class="Fintech">alert_test@fintech.net</span></td>
                        <td><span class="Fintech"></span></td>
                        <td><span class="Fintech">2425 E. Camelback Rd.</span></td>
                        <td><span class="Fintech">Phoenix</span></td>
                        <td><span class="Fintech">AZ</span></td>
                        <td><span class="Fintech">85016</span></td>
                        <td><span class="Fintech">Restaurant</span></td>
                        <td class="centered-grid-cell"><span class="ACTIVE">ACTIVE</span></td>
                        <td><span class="Fintech">Fintech</span></td>
                    </tr>
                    <tr class="k-master-row k-alt">
                        <td class="k-group-cell"></td>
                        <td><span class="Fintech">North Mary Brickell LLC dba North Miami</span></td>
                        <td><span class="Fintech">alert_test@fintech.net</span></td>
                        <td><span class="Fintech"></span></td>
                        <td><span class="Fintech">4455 East Camelback Road Suite B100</span></td>
                        <td><span class="Fintech">Phoenix</span></td>
                        <td><span class="Fintech">AZ</span></td>
                        <td><span class="Fintech">85018</span></td>
                        <td><span class="Fintech">N/A</span></td>
                        <td class="centered-grid-cell"><span class="ACTIVE">ACTIVE</span></td>
                        <td><span class="Fintech">Fintech</span></td>
                    </tr>
                    <tr class="k-master-row">
                        <td class="k-group-cell"></td>
                        <td><span class="Fintech">PF Chang's China Bistro</span></td>
                        <td><span class="Fintech">alert_test@fintech.net</span></td>
                        <td><span class="Fintech"></span></td>
                        <td><span class="Fintech">7676 East Pinnacle Peak Road</span></td>
                        <td><span class="Fintech">Scottsdale</span></td>
                        <td><span class="Fintech">AZ</span></td>
                        <td><span class="Fintech">85255</span></td>
                        <td><span class="Fintech">Restaurant</span></td>
                        <td class="centered-grid-cell"><span class="ACTIVE">ACTIVE</span></td>
                        <td><span class="Fintech">Fintech</span></td>
                    </tr>
                    <tr class="k-master-row k-alt">
                        <td class="k-group-cell"></td>
                        <td><span class="Fintech">TFK Boca</span></td>
                        <td><span class="Fintech">alert_test@fintech.net</span></td>
                        <td><span class="Fintech"></span></td>
                        <td><span class="Fintech">4455 E Camelback Rd #A115</span></td>
                        <td><span class="Fintech">Phoenix</span></td>
                        <td><span class="Fintech">AZ</span></td>
                        <td><span class="Fintech">85018</span></td>
                        <td><span class="Fintech">Restaurant</span></td>
                        <td class="centered-grid-cell"><span class="ACTIVE">ACTIVE</span></td>
                        <td><span class="Fintech">Fintech</span></td>
                    </tr>
                    <tr class="k-grouping-row">
                        <td colspan="11">
                            <p class="k-reset"><a href="#" tabindex="-1" class="k-i-collapse k-icon"></a>CA</p>
                        </td>
                        <td><span></span></td>
                        <td><span></span></td>
                        <td><span></span></td>
                        <td><span></span></td>
                        <td><span></span></td>
                        <td><span></span></td>
                        <td><span></span></td>
                        <td><span></span></td>
                        <td class="centered-grid-cell"><span></span></td>
                        <td><span></span></td>
                    </tr>
                    <tr class="k-master-row">
                        <td class="k-group-cell"></td>
                        <td><span class="Fintech">Apex Parks Group</span></td>
                        <td><span class="Fintech">alert_test@fintech.net</span></td>
                        <td><span class="Fintech"></span></td>
                        <td><span class="Fintech">27061 Aliso Creek Road Suite 100</span></td>
                        <td><span class="Fintech">Aliso Viejo</span></td>
                        <td><span class="Fintech">CA</span></td>
                        <td><span class="Fintech">92656</span></td>
                        <td><span class="Fintech">Concession</span></td>
                        <td class="centered-grid-cell"><span class="ACTIVE">ACTIVE</span></td>
                        <td><span class="Fintech">Fintech</span></td>
                    </tr>
                    <tr class="k-master-row k-alt">
                        <td class="k-group-cell"></td>
                        <td><span class="Fintech">BJ's Restaurants, Inc.</span></td>
                        <td><span class="Fintech">alert_test@fintech.net</span></td>
                        <td><span class="Fintech"></span></td>
                        <td><span class="Fintech">7755 Center Avenue</span></td>
                        <td><span class="Fintech">Huntington Beach</span></td>
                        <td><span class="Fintech">CA</span></td>
                        <td><span class="Fintech">92647</span></td>
                        <td><span class="Fintech">Restaurant</span></td>
                        <td class="centered-grid-cell"><span class="ACTIVE">ACTIVE</span></td>
                        <td><span class="Fintech">Fintech</span></td>
                    </tr>
                    <tr class="k-master-row">
                        <td class="k-group-cell"></td>
                        <td><span class="Fintech">Central Florida Restaurants Inc dba TGI Friday's</span></td>
                        <td><span class="Fintech">alert_test@fintech.net</span></td>
                        <td><span class="Fintech"></span></td>
                        <td><span class="Fintech">3550 Mowry Ave Suite 301</span></td>
                        <td><span class="Fintech">Freemont</span></td>
                        <td><span class="Fintech">CA</span></td>
                        <td><span class="Fintech">94538</span></td>
                        <td><span class="Fintech">Restaurant</span></td>
                        <td class="centered-grid-cell"><span class="ACTIVE">ACTIVE</span></td>
                        <td><span class="Fintech">Fintech</span></td>
                    </tr>
                    <tr class="k-master-row k-alt">
                        <td class="k-group-cell"></td>
                        <td><span class="Fintech">Cheesecake Factory Restaurants</span></td>
                        <td><span class="Fintech">alert_test@fintech.net</span></td>
                        <td><span class="Fintech"></span></td>
                        <td><span class="Fintech">26901 Malibu Hills Rd.</span></td>
                        <td><span class="Fintech">Calabasas Hills</span></td>
                        <td><span class="Fintech">CA</span></td>
                        <td><span class="Fintech">91301</span></td>
                        <td><span class="Fintech">Restaurant</span></td>
                        <td class="centered-grid-cell"><span class="ACTIVE">ACTIVE</span></td>
                        <td><span class="Fintech">Fintech</span></td>
                    </tr>
                    <tr class="k-master-row">
                        <td class="k-group-cell"></td>
                        <td><span class="Fintech">Cinema Beverage Holding Co.</span></td>
                        <td><span class="Fintech">alert_test@fintech.net</span></td>
                        <td><span class="Fintech"></span></td>
                        <td><span class="Fintech">2222 S. Barrington Ave.</span></td>
                        <td><span class="Fintech">Los Angeles</span></td>
                        <td><span class="Fintech">CA</span></td>
                        <td><span class="Fintech">90064</span></td>
                        <td><span class="Fintech">Theater</span></td>
                        <td class="centered-grid-cell"><span class="ACTIVE">ACTIVE</span></td>
                        <td><span class="Fintech">Fintech</span></td>
                    </tr>
                    <tr class="k-master-row k-alt">
                        <td class="k-group-cell"></td>
                        <td><span class="Fintech">Cost Plus</span></td>
                        <td><span class="Fintech">alert_test@fintech.net</span></td>
                        <td><span class="Fintech"></span></td>
                        <td><span class="Fintech">1201 Marina Village Parkway </span></td>
                        <td><span class="Fintech">Alameda</span></td>
                        <td><span class="Fintech">CA</span></td>
                        <td><span class="Fintech">94501</span></td>
                        <td><span class="Fintech">Mass Merchant</span></td>
                        <td class="centered-grid-cell"><span class="ACTIVE">ACTIVE</span></td>
                        <td><span class="Fintech">Fintech</span></td>
                    </tr>
                    <tr class="k-master-row">
                        <td class="k-group-cell"></td>
                        <td><span class="Fintech">Spearmint Rhino - WPB Hospitality</span></td>
                        <td><span class="Fintech">alert_test@fintech.net</span></td>
                        <td><span class="Fintech"></span></td>
                        <td><span class="Fintech">1875 Tandem Way</span></td>
                        <td><span class="Fintech">Norco</span></td>
                        <td><span class="Fintech">CA</span></td>
                        <td><span class="Fintech">92860</span></td>
                        <td><span class="Fintech">Restaurant</span></td>
                        <td class="centered-grid-cell"><span class="ACTIVE">ACTIVE</span></td>
                        <td><span class="Fintech">Fintech</span></td>
                    </tr>
                    <tr class="k-master-row k-alt">
                        <td class="k-group-cell"></td>
                        <td><span class="Fintech">Specialty Restaurant Corp dba Rusty Pelican- Miami</span></td>
                        <td><span class="Fintech">alert_test@fintech.net</span></td>
                        <td><span class="Fintech"></span></td>
                        <td><span class="Fintech">8191 E Kaiser Blvd</span></td>
                        <td><span class="Fintech">Aneheim</span></td>
                        <td><span class="Fintech">CA</span></td>
                        <td><span class="Fintech">92808</span></td>
                        <td><span class="Fintech">Restaurant</span></td>
                        <td class="centered-grid-cell"><span class="ACTIVE">ACTIVE</span></td>
                        <td><span class="Fintech">Fintech</span></td>
                    </tr>
                    <tr class="k-master-row">
                        <td class="k-group-cell"></td>
                        <td><span class="Fintech">Specialty Restaurant Corp dba Whiskey Joe's- Tampa</span></td>
                        <td><span class="Fintech">alert_test@fintech.net</span></td>
                        <td><span class="Fintech"></span></td>
                        <td><span class="Fintech">8191 E Kaiser Blvd</span></td>
                        <td><span class="Fintech">Aneheim</span></td>
                        <td><span class="Fintech">CA</span></td>
                        <td><span class="Fintech">92808</span></td>
                        <td><span class="Fintech">Restaurant</span></td>
                        <td class="centered-grid-cell"><span class="ACTIVE">ACTIVE</span></td>
                        <td><span class="Fintech">Fintech</span></td>
                    </tr>
                    <tr class="k-master-row k-alt">
                        <td class="k-group-cell"></td>
                        <td><span class="Fintech">Trader Joe's</span></td>
                        <td><span class="Fintech">alert_test@fintech.net</span></td>
                        <td><span class="Fintech"></span></td>
                        <td><span class="Fintech">800 South Shamrock Avenue</span></td>
                        <td><span class="Fintech">Monrovia</span></td>
                        <td><span class="Fintech">CA</span></td>
                        <td><span class="Fintech">91017</span></td>
                        <td><span class="Fintech">Grocery</span></td>
                        <td class="centered-grid-cell"><span class="ACTIVE">ACTIVE</span></td>
                        <td><span class="Fintech">Fintech</span></td>
                    </tr>
                    <tr class="k-grouping-row">
                        <td colspan="11">
                            <p class="k-reset"><a href="#" tabindex="-1" class="k-i-collapse k-icon"></a>CO</p>
                        </td>
                        <td><span></span></td>
                        <td><span></span></td>
                        <td><span></span></td>
                        <td><span></span></td>
                        <td><span></span></td>
                        <td><span></span></td>
                        <td><span></span></td>
                        <td><span></span></td>
                        <td class="centered-grid-cell"><span></span></td>
  ...</tr></tbody></col></col></col></col></col></col></col></col></col></col></colgroup></table></div></div></div></col></col></col></col></col></col></col></colgroup></table></div></div></div>
...

3 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 30 Jan 2019, 07:36 AM
Hello, Ryan,

Thank you for the code.

A similar issue can occur if a custom cell render is used in the Grid and the specific grouping cells are returned as regular cells.

If this is the case, please share the implementation with us, and I will be happy to suggest an approach on how to fix it.

If the case is different, please share and runnable example where we can observe what could be causing this.

Regards,
Stefan
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Ryan
Top achievements
Rank 1
answered on 30 Jan 2019, 05:37 PM
Thanks Stefan. It turns out that it is a custom cell render. This is the offending code.

import React from "react";
import { retailerManagedByField } from "../grid.constants";
 
export class RetailerCell extends React.Component {
  render() {
    const value = this.props.dataItem[this.props.field];
    const managedByValue = this.props.dataItem[retailerManagedByField];
    return (
      <td>
        <span className={managedByValue}>{value ? value : ""}</span>
      </td>
    );
  }
}

 

I noticed that our working custom cell has

<td className="centered-grid-cell">
  <span className={value}>{value}</span>
</td>

 

So I updated our code to include the centered-grid-cell style as shown below but still isn't working. I also pulled the style off the span just to make sure that wasn't the problem.

import React from "react";
import { retailerManagedByField } from "../grid.constants";
// import classNames from "classnames";
 
export class RetailerCell extends React.Component {
  render() {
    const value = this.props.dataItem[this.props.field];
    const managedByValue = this.props.dataItem[retailerManagedByField];
    return (
      <td className="centered-grid-cell">
        <span>{value ? value : ""}</span>
      </td>
    );
  }
}

Please advise...



0
Stefan
Telerik team
answered on 31 Jan 2019, 11:55 AM
Hello, Ryan,

This issue occurs because the customCell render is fired for every cell even form the groupHeaderCell. In this case, we have to check the cell rowType and if it is groupHeader to return null:

class CustomCell extends React.Component {
  render() {
    const value = this.props.dataItem[this.props.field];
    if (this.props.rowType === "groupHeader") {
      return null
    }
    return (
      <td style={{ color: value ? this.props.myProp[0].color : this.props.myProp[1].color }}> {
        (value === true || value === false) ? value.toString() : ""}
      </td>
    );
  }
}

https://stackblitz.com/edit/react-t9ce44-rljdkt?file=app/main.js

I hope this is helpful.

Regards,
Stefan
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
General Discussions
Asked by
Ryan
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Ryan
Top achievements
Rank 1
Share this question
or