Telerik Forums
KendoReact Forum
1 answer
96 views

Hi guys,

I have a strange behavior of this control. When the value is null and when I use the Now button, the date part is wrong.

Steps:
1. Set value to null
2. Press the Now button .
3. Date 1.1.1980 (wrong date)

This only happens when the value is null and when I press the Now button. In all other situations we get what we expect.
We use null value because we want "hour:minute AM" instead of 12:00 AM. Also we don't want to use react wrappers, but native react components.

 

code:
https://stackblitz.com/edit/kendo-time-picker-bug?file=main.js

Stefan
Telerik team
 answered on 08 Feb 2019
2 answers
693 views

Hi,

I am exporting a PDF using @progress/kendo-drawing in Client side(React js)

I have a requirement to save the same file in server(Node js).

Could you please let me know how to export the same PDF to server

 

SomaSundari
Top achievements
Rank 1
 answered on 07 Feb 2019
3 answers
209 views

Is there a way to have columns auto resize when double clicking the headers in the React Grid?

The wrapper grid supported this.

-Ryan

Stefan
Telerik team
 answered on 07 Feb 2019
5 answers
234 views

When using a Kendo React PanelBar in expandMode="single" I am getting the following warning, plus a drawing error: 

Warning: Failed prop type: PanelBar child should be either PanelBarItem or Array of PanelBarItem.
    in PanelBar (created by _temp)

I am rendering the control as seen in this HTML snippet:

return (
 <PanelBar className="filter-bar" expandMode="single">
    <PanelBarItem title={this.state.filterTitle} expanded={this.state.expanded} onSelect={this.handlePanelBarSelect}>
      <form id="filterForm" className="filter-form" onSubmit={this.handleSubmit}>
        <div className="form-row">
          <div className="col">
            <div className="form-group">
              <label>Company:</label>
              <DropDownList
                className="form-control"
                data={this.state.companies}
                textField="text"
                dataItemKey="id"
                onChange={this.handleCompanyChange}
                defaultItem={defaultItemCompany}
                value={this.state.company}
              />
            </div>
          </div>
          <div className="col">
            <div className="form-group">
              <label>Site:</label>
              <DropDownList
                className="form-control"
                data={this.state.sites}
                textField="text"
                dataItemKey="id"
                onChange={this.handleSiteChange}
                defaultItem={defaultItemSite}
                value={this.state.site}
              />
            </div>
          </div>
          <div className="col">
            <div className="form-group">
              <label>Functional Location:</label>
              <DropDownList
                className="form-control"
                data={this.state.functionalLocations}
                textField="text"
                dataItemKey="id"
                onChange={this.handleFuncLocChange}
                defaultItem={defaultItemFunctionalLocation}
                value={this.state.functionalLocation}
              />
            </div>
          </div>
          <div className="col">
            <button title="Filter" ref="filterBtn" className="k-button k-primary" onClick={this.handleFilter}
                    disabled={this.state.filterBtnDisabled}>
              {t('filter')}
            </button>
          </div>
        </div>
      </form>
    </PanelBarItem>
  </PanelBar>
);

Furthermore the downarrow/uparrow icon is drawn in the middle of a grid that follows this control on the page (see attached screenshot).

Attached is the generated code from the browser in a screenshot

 

 

Stefan
Telerik team
 answered on 06 Feb 2019
1 answer
100 views

Step to reproduce:

1. Visit https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselect/

2. Type in multiselect input "WWWWWWW" in upper case

 

Expected result: "WWWWWWW" is visible
Actual result: Part of string is hidden.

Stefan
Telerik team
 answered on 05 Feb 2019
1 answer
109 views

     Hi,

 I am trying to implement the locale in a such a way that, as per country the date format should change. I referred below example which is available on kendo website

https://www.telerik.com/kendo-react-ui/components/dateinputs/globalization/

I change the locale type but it is not changing the date format.

For example : I want to implement something like when I am using my system in US network it should by default display mm/dd/yyyy format and If I am in Great Britan then it should display dd/mm/yyyy

 

Regards,

Parag

Stefan
Telerik team
 answered on 05 Feb 2019
4 answers
242 views
I have got a task of displaying a TreeView inside a dropdown. How should I approach it. Can I put a TreeView component inside a dropdown.
Mukesh
Top achievements
Rank 1
 answered on 04 Feb 2019
3 answers
380 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
202 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
69 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
Stefan
Telerik team
 answered on 31 Jan 2019
Narrow your results
Selected tags
Tags
+? more
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?