or
3 answers
339 views
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>...
Stefan
Telerik team
answered
on
31 Jan 2019
1 answer
142 views
Hello,
I have several kendo react grids, for which columns maybe resized and/or reordered. I have one question and one issue.
Let starts by the issue. As soon as I click (and release) the resize handler (without moving the mouse), the whole grid is resized. To illustrate this, the attached picture "before_resize" is taken before resizing and the attached picture "after_resize" is taken after a left mouse click and mouse up (no mouse move between).
And now, the question. I would like to memorize the size and the order of all columns, save it into some file and later restore the order and size of all columns. I think I can handle the two first items, but how could I reorder and resize by code the columns ?
Grid is defined by:
<Grid data={this.state.data} cellRender={this.renderers.cellRender} rowRender={this.renderers.rowRender} editField="inEdit" selectedField="selected" onSelectionChange={this.selectionChange} onHeaderSelectionChange={this.headerSelectionChange} onItemChange={this.itemChange} onColumnResize={(e) => { if(e.end) console.log(e); }} onColumnReorder={(e) => { console.log(e); }} onRowClick={this.rowClick} reorderable resizable scrollable="none">
While columns are defined by the following code, where width is undefined:
{ this.state.columns.map((column, idx) => column.show && ( <Column key={idx} field={column.field} title={column.title} filter={column.filter} cell={column.cell} editable={column.editable} editor={column.editor} width={column.width} columnMenu={ props => ( <CustomColumnMenu {...props} columns={this.state.columns} onColumnsSubmit={this.onColumnsSubmit} /> ) } /> ) )}
Stefan
Telerik team
answered
on
31 Jan 2019
1 answer
53 views
I have the case, when I need to add different margin for tooltips( or className)
How I can add it in the React?
Example
How I can add it in the React?
Example
Stefan
Telerik team
answered
on
31 Jan 2019
1 answer
120 views
We have purchased Kendo UI license. We have been using Kendo UI for React. Currently we have installed all the kendo packages from npm, do we need to make any changes in the production version of react?
Stefan
Telerik team
answered
on
31 Jan 2019
7 answers
239 views
I am trying to make a large grid perform adequately while scrolling. The grid is 40 columns with a page size of 50. Thirty-five of the columns are always editable.
Is there documentation on the understood limits on the performance of the kendo grid? I do not want to waste time trying to get the performance up if my scenario is significantly outside of the guidelines.
While profiling the grid, I also noticed that the header row is being rerendered even though none of the props have changed. Same goes for the filter row. Is this an issue in KendoReact or have I screwed something up in my headerCellRender function?
Vasil
Telerik team
answered
on
31 Jan 2019
2 answers
808 views
Hi, I have a quastion about Kendo Reat Tooltip component.
In my situation, I need show tooltip on click. But default functionality works only on hover.
How can I show my tooltip on click?
I found functionality that I need in jquery version, I need something like that, I give you a link, maybe it is can help you with answer.
https://docs.telerik.com/kendo-ui/api/javascript/ui/tooltip/configuration/showon
In my situation, I need show tooltip on click. But default functionality works only on hover.
How can I show my tooltip on click?
I found functionality that I need in jquery version, I need something like that, I give you a link, maybe it is can help you with answer.
https://docs.telerik.com/kendo-ui/api/javascript/ui/tooltip/configuration/showon
Serhii
Top achievements
Rank 1
Rank 1
answered
on
30 Jan 2019
1 answer
88 views
Hi,
I want to extract Date from DateTime field and bind to DatePicker. When I try to do that, it throws error as shown in below and in attached screenshot.
<DatePicker defaultValue={new Date().toLocaleDateString()}
Also wanted to know, Could onchange method on datepicker control return only date but not time?
Regards,
Parag
Stefan
Telerik team
answered
on
30 Jan 2019
1 answer
414 views
I have a web api that returns an array of json objects. I have followed the tutorial on binding data to a kendo grid and cannot get the tbody to show up. Columns are generated with appropriate names but the tbody fails to load with no error message. This is the tutorial I followed https://www.telerik.com/kendo-react-ui/wrappers/grid/data-binding/. I have gotten data to load from a local json array but when I grab from an web api it fails to load the data. I know I am getting good data because I can inspect it with f12 and log the json to the console. What is the grid expecting data-wise that I am not providing?
Stefan
Telerik team
answered
on
30 Jan 2019
1 answer
58 views
Hi,
I am having problems with setting mask for MaskedTextBox. My mask is something like this: mask={'Days:999 Hours:99 Minutes:99 Seconds:99'}, but letter 'a' is never rendering.
my code: https://stackblitz.com/edit/react-maskedtextbox?file=index.js
Is there any way to render full text?
Thank you,
Dusan
Stefan
Telerik team
answered
on
25 Jan 2019
1 answer
42 views
We're planning to use TreeList component from your library. As far as we see, this component is available but only as wrapper. Could you please update on your plans regarding moving this wrapper into general react components?
Best Regards,
Artem
Best Regards,
Artem
Stefan
Telerik team
answered
on
25 Jan 2019
