Telerik Forums
KendoReact Forum
1 answer
228 views

Hi.

To show what I want to achieve I have created an example on StackBlitz based on this example from your docs:

https://stackblitz.com/edit/react-esujqr?file=app%2Fmain.tsx,app%2Fproportional-view-item-week.tsx

In the WeekView of the Scheduler, the display of the items that are no all day items can get a little messy when there are overlapping events, especially if there are 10 items or more. I tried to achieve, that first of all the text in the event is not visible anymore. I did this by removing the title from the SchedulerViewItem. But then of course I didn't have a proper tooltip anymore.

So I created a SchedulerItem, placed a div inside of it and added a title from the dataItem to the div. Here are the issues I faced then:

1) I wanted to stretch the div to 100% width and height of the SchedulerItem but if I do this, at least the width does not work. I set it now to 10px width and height and gave it an orange background so I can at least test the standard tooltip but that is not really what I want to have. I would like to achieve that the tooltip is shown whereever I hover over the event item.

2) Generating the tooltip information with the times and the title coming from the dataItem is of course an expensive task if you have a lot of events in your Scheduler for a week (I'm talking about between 80 to 120 recurring events!), so I'd rather use the existing information of the title which I had to remove in order to achieve that there is no text showing in the event item.

3) The most awesome thing would be if I could use the Kendo-Tooltip instead of the standard tooltip. Any help in that direction would be great.

4) I noticed that if an event is for example only 5 minutes long, the item in the calendar is showing as if it was about 30 minutes or so. Any idea why that is the case?

5) A more general question: I added a file to my example (myData.tsx) where you can see example data from my application. In my local Scheduler version the data is working fine (I have 4.13.0) but somehow I can't get anything to display in the app on StackBlitz. Have there been any breaking changes in the data format?

Thanks as always for you help!

Greetings,

Bernd

Konstantin Dikov
Telerik team
 answered on 04 Jul 2022
1 answer
293 views

Hi.

In the Day-, Week- and Month view of the Scheduler a user can select the date to show in the header of the chosen view (see attached screenshots).

My question is if it is possible to limit what you can choose there. I would like to set a start date that should be the lowest date that a user can choose and disable all dates that are before that date. So for example a user shouldn't be able to choose a date before 1st of May 2022.

Is that possible?

Thanks,

Greetings,

Bernd

Konstantin Dikov
Telerik team
 answered on 30 Jun 2022
0 answers
94 views

I have a scenario to export a Grid to pdf using the GridPDFExport. What I am observing is that this fails when using the react Link with the error 

Error: Invariant failed: You should not use <Link> outside a <Router>

What I notice is that this works well with an anchor but this is something I cannot use in my situation as it caused full page reloads on the web page itself. How can I handle this?

 

Thanks

Thulani
Top achievements
Rank 1
 asked on 30 Jun 2022
1 answer
1.3K+ views

Any chance you could provide simple sample code (ideally stackblitz) demonstrating how to combine multiple PDFExport's into a single PDF file?

the need to combine comes from wanting page numbering to start at 1 within each individual pdf render.

totally open to using the lower level exportPDF from the drawing library... perhaps there's a straightforward path to combining the individual DataURI's?  also open to using additional 3rd party npmjs libraries

Konstantin Dikov
Telerik team
 answered on 29 Jun 2022
1 answer
132 views

Hi there, I'm trying to use a state hook and an effect hook to update the initialValues, but the form fields are not filled after the initialValues is updated. Is that an expected behavior? If so, how could I load the Form after I fetched initialValues from api? Thank you.

"@progress/kendo-react-form": "^5.4.0",

Yiheng
Top achievements
Rank 2
Iron
Iron
Iron
 updated answer on 29 Jun 2022
1 answer
443 views

I have implemented the virtual scrolling on a KendoReact grid based on the example given in the documentation with a remote data source.

This appears to work well. However, I have a scenario where I want to scroll the grid to a specific location. I am able to display the correct page by setting the Skip value on the state of the Grid, however.  The scrollbar position is not correctly recalculated when I set the skip value. Instead, the scrollbar remains at position 0.

How can I correctly set the scrollbar location?

Thanks

Thomas

Konstantin Dikov
Telerik team
 answered on 28 Jun 2022
1 answer
735 views

Hi, is it possible to make nested N hierarchy grid using kendo ui for react?

Can you provide any example?

Konstantin Dikov
Telerik team
 answered on 27 Jun 2022
1 answer
100 views

Doesn't seem to work here - https://stackblitz.com/edit/react-m59yg9?file=app%2Fmain.jsx

I want the input text to be formatted as such: $2.22, but the input allows 3 decimal places and shows no currency symbol. I have added the formatting to the column and to the editCell component, but neither seem to do the trick. If I've done it incorrectly, can you show me the correct way to achieve what the NumericTextBox input here does with its currency example? Thank you!

Konstantin Dikov
Telerik team
 answered on 27 Jun 2022
1 answer
102 views

Hi, I need to build a grid with single selection.

I started by the example on https://www.telerik.com/kendo-react-ui/components/grid/selection/

So, I noticed that if the grid has the single selection mode, when a row is selected I cannot unselect it: I can only select another row.

I would like to obtain this: when I click on a row it will be selected if is unselected, and it will be unselected if is selected.

 

This is my custom solution:

https://stackblitz.com/edit/react-mbwdnz?file=app%2Fmain.jsx

 

So, is there a better way to obtain the same?

Thank you

Vessy
Telerik team
 answered on 24 Jun 2022
1 answer
1.0K+ views

I have a requirement to add dynamic KendReact grid column  from a json file in an existing grid of one default column, say - ItemCode , on load the the grid should fill the below columns from json.

 

eg: - >

[
  {
    "wbsname": "A1",
  },
  {
    "wbsname": "A2",
  },
  {
    "wbsname": "A3",
  },
  {
    "wbsname": "A4",
  },
  {
    "wbsname": "A5",
  }
]
Konstantin Dikov
Telerik team
 answered on 24 Jun 2022
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?