Telerik Forums
KendoReact Forum
0 answers
40 views

Hi,

I have a problem with the Tooltip position issue.

If I move the pointer from outside of the chart to a a chart item, the tooltip position is correct

But if I try to hover on a chart item, after that I move the mouse to an item beside it, the position is incorrect now


Do you have any idea about this issue?  Any help would be great.

Thank you

Henry

PS: Please see the behavior in the .zip file (it contains a .gif file to compare 2 cases I listed above)

 
Henry
Top achievements
Rank 1
 asked on 18 Mar 2024
1 answer
31 views

I have kendoreact grid. I have total 8 columns. out of 8, 4 columns are locked. Currently horizontal scroll bar is displaying for entire grid. But i want to show the scroll bar only for un-locked columns. Kindly help.

 

requirement: 

Konstantin Dikov
Telerik team
 answered on 15 Mar 2024
1 answer
112 views

I am trying to fix an issue on an old react application and I am not familiar with the approach used here. We are using the following dependencies(some important ones mentioned). Node version is 14.x


"dependencies": {
"@progress/kendo-ui": "^2021.3.1207",
"@types/node": "^12.20.15",
"@types/react": "^17.0.11",
"moment": "^2.29.4",
"react": "^17.0.2",
.
.
.
}

  "devDependencies": {
    "@types/jquery": "^3.5.5",
.
.
.
  }

Right now we are using the below timepicker and this passes in a datetime value on save, in this format 2024-03-14T09:00:00.000Z. But I want to change this to pass in value as a time in this format HH:mm:ss .

      <input
        id={this.id}
        name={this.props.validationName}
        data-role="timepicker"
        data-bind={`value: ${ValueCodes.Start}`}
        data-format="h:mm tt"
        required={true}
        disabled={true}
      />
I understand that the ValueCodes.Start mentioned above is linked with the type of the input filed. I did find the following set of codes that determine the type of that field in the corresponding datasource builder file.
export class ValueCodes {
  public static readonly Start = 'sTRT_TIME';
.
.
.
}

protected getDataSourceOptions() {
    const fields: { [key: string]: { type: string } } = {};
    switch (this.categoryCode) {
      case 'INIT':
        fields[ValueCodes.Start] = { type: 'date' };
.
.
.
        break;
.
.
.
      default:
        break;
    }
    return {
      fields: fields,
      transportOptions: { baseUrl: `${X.getApiUrl()}value/${this.categoryCode}` }
    };
  }
}


On changing the 'type' from 'date' to 'time' here, fields[ValueCodes.Start] = { type: 'date' }; I encountered some errors. I was only able to save the value in my desired format, if I disable validation. Aprart from that the timepicker now will not load the datetime or time value fetched from the backend because of the 'type' change from 'date' to 'time'.

Is there a specific way in kendo that I can try to overcome this?

Konstantin Dikov
Telerik team
 answered on 14 Mar 2024
0 answers
54 views

I want to change the upload icon in Drag&drop component  to    before uploading the file. 

 

&   after uploading the file

Abhishek
Top achievements
Rank 2
Iron
Iron
Iron
 asked on 12 Mar 2024
1 answer
88 views

Before I was using

@use '~@progress/kendo-theme-default/scss/variables' as variables;

 

but recently after updating packages, I got jumped by a couple of errors saying there are no color variables in said file.
I found them in the dist folder but all those files also have

@import "all.scss";

 

at the end making me import whole scss files multiple times destroying all my overrides in previous files.

Is there any way I can import all Kendo theme variables to my scss files?

Zhuliyan
Telerik team
 answered on 12 Mar 2024
0 answers
35 views

I am having trouble navigating the grid with a screen reader using table navigation commmands. I think the problem might be my custom cells. Is there anything else that needs returned bessides tds? Here is an example of my grid.

```

<Grid data={transactions}>
        <Column field="name" title="Name" />
        <Column field="amount" title="Amount" format="{0:c2}" />
        <Column
          field="date"
          title="Date"
          cell={(props: GridCellProps) => (
            <td>{new Date(props.dataItem["date"]).toDateString()}</td>
          )}
        />
        <Column field="description" title="Description" />
        <Column
          title="Actions"
          cell={(props: GridCellProps) => (
            <td>
              <button
                onClick={() => {
                  setShowEditTransaction(true);
                  setEditTransaction(props.dataItem);
                }}
              >
                Edit
              </button>
              &nbsp;
              <button
                onClick={() => {
                  setShowDeleteTransaction(true);
                  setTransactionToBeDeleted(props.dataItem);
                }}
              >
                Delete
              </button>
            </td>
          )}
        />
     

</Grid>

```

Thanks in advance.

Chris
Top achievements
Rank 1
 asked on 10 Mar 2024
1 answer
40 views

Using the FontSize editor tool in the Editor I need the user to be able to select a value for the FontSize and retain that value after the user hits the enter key to go to a new line in the ediitor. Right now if you select anFontSize value it retains it till the user clicks enter then the FontSize dropdown value resets to unselected.

Thanks,

   Matt Heuerman

 

Vessy
Telerik team
 answered on 07 Mar 2024
1 answer
49 views

I have a kendo react grid. I am doing in-cell editing.  I have option to upload a file & the file might contain wrong data. when i do the upload i have to show the error highlight on each cell. i have done the upload part & showing the new row on the grid. I am facing issue while highlighting the cell with red color. i have already added custom cell for each columns. Please help

Filip
Telerik team
 answered on 06 Mar 2024
1 answer
59 views

I am trying to set the button themeColor attribute to a variable such as:

let themeColor: string = 'dark';

themeColor={themeColor}

but I get the error:

 

Type 'string' is not assignable to type '"base" | "dark" | "success" | "error" | "warning" | "info" | "primary" | "secondary" | "tertiary" | "light" | "inverse" | null | undefined'.ts(2322)
Button.d.ts(70, 5): The expected type comes from property 'themeColor' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Button> & Pick<Pick<Readonly<ButtonProps>, "form" | ... 283 more ... | "onTransitionEndCapture"> & Pick<...> & Pick<...>, "form" | ... 279 more ... | "onTransitionEndCapture"> & InexactPartial<...> & InexactPartial<...>'
(property) themeColor?: "base" | "dark" | "success" | "error" | "warning" | "info" | "primary" | "secondary" | "tertiary" | "light" | "inverse" | null | undefined
Patrick
Top achievements
Rank 1
Iron
 answered on 06 Mar 2024
1 answer
125 views

    Seeing this bug locally, and was able to reproduce it in CodeSandbox:

    1. Open this demo in CodeSandbox https://www.telerik.com/kendo-react-ui/components/grid/pdf-export/#toc-getting-started (original sandbox link: https://codesandbox.io/p/sandbox/proud-snow-z89k2q?)
    2. Ensure Dependencies includes React 18
    3. Make these changes to the bottom of main.jsx:
    • Comment out this line:

    ReactDOM.render(<App />, document.querySelector('my-app'));

    • Add these three lines in place of the above one:

    const container = document.querySelector('my-app');
    const root = createRoot(container); // createRoot(container!) if you use TypeScript
    root.render(<App />);

    A finished Sandbox in case it saves you some time -- https://stackblitz.com/edit/react-epnjnd?file=app%2Fmain.jsx

     

    • Notice that the first sandbox on page load gives the React 17/18 react-dom.render() issue. In contrast, the finished sandbox doesn't give the React 17/18 issue. This behavior is to be expected.
    • Click on "Export PDF" button. You now get the React 17/18 error on both sandboxes. You'd expect the error not to show up on the finished sandbox, as the parent code no longer utilizes the "old way of rendering React".
    Wissam
    Telerik team
     answered on 06 Mar 2024
    Narrow your results
    Selected tags
    Tags
    +? more
    Top users last month
    Henri
    Top achievements
    Rank 2
    Iron
    Iron
    Iron
    SUNIL
    Top achievements
    Rank 2
    Iron
    Iron
    Iron
    David
    Top achievements
    Rank 1
    Jackson
    Top achievements
    Rank 1
    Iron
    Iron
    Tim
    Top achievements
    Rank 3
    Iron
    Iron
    Iron
    Want to show your ninja superpower to fellow developers?
    Top users last month
    Henri
    Top achievements
    Rank 2
    Iron
    Iron
    Iron
    SUNIL
    Top achievements
    Rank 2
    Iron
    Iron
    Iron
    David
    Top achievements
    Rank 1
    Jackson
    Top achievements
    Rank 1
    Iron
    Iron
    Tim
    Top achievements
    Rank 3
    Iron
    Iron
    Iron
    Want to show your ninja superpower to fellow developers?
    Want to show your ninja superpower to fellow developers?