This is a migrated thread and some comments may be shown as answers.

Spreadsheet

26 Answers 962 Views
Wrappers for React
This is a migrated thread and some comments may be shown as answers.
Roja Jayashree
Top achievements
Rank 1
Veteran
Roja Jayashree asked on 25 Feb 2019, 03:20 PM
how to resize in  , i have used innerHeight and innerWidth it worked but i couldn't get toolbar in full size and also grid lines

26 Answers, 1 is accepted

Sort by
0
Roja Jayashree
Top achievements
Rank 1
Veteran
answered on 25 Feb 2019, 03:24 PM
0
Accepted
Stefan
Telerik team
answered on 26 Feb 2019, 09:57 AM
Hello, Roja,

This can be achieved on the render event of the spreadsheet by changing the height and width. Then the Spreadsheet needs to be refreshed:

https://docs.telerik.com/kendo-ui/api/javascript/ui/spreadsheet/events/render

This is an example:

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

I hope this is helpful.

Regards,
Stefan
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Roja Jayashree
Top achievements
Rank 1
Veteran
answered on 15 Mar 2019, 01:00 AM

Thank you very much. I appreciate you for sharing demo.

Also, I have another question for you, Is it possible one component of Telerik within spreadsheet component in react ? Especially with data grid.  If yes, could you please a demo in react?

Actually, we are trying to implement a data grid as a table within the spreadsheet component.

0
Accepted
Vasil
Telerik team
answered on 18 Mar 2019, 01:32 PM
Hi Roja,

The Spreadsheet widget does not able to render react components inside. This would be possible when we create brand new Spreadsheet Component for KendoReact.

However, you may try to use Portal to render something inside already rendered cells of the Spreadsheet widget.

Regards,
Vasil
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Roja Jayashree
Top achievements
Rank 1
Veteran
answered on 22 Mar 2019, 07:28 PM
Thank you very much for your response. But that is not the best solution for what we are looking for. We want to implement tables by selecting the range and giving a fixed header in the spreadsheet that's the reason we came up with an idea of overlaying grid component within the spreadsheet is it possible?
0
Stefan
Telerik team
answered on 25 Mar 2019, 09:39 AM
Hello, Roja,

The Spreadsheet cell is designed to hold a single value and the Grid as an array of objects.

In cases like this, we can advise rendering the Grid next to the Spreadsheet and dynamically changing its data based on the user selection inside the Spreadsheet.

Regards,
Stefan
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Roja Jayashree
Top achievements
Rank 1
Veteran
answered on 25 Mar 2019, 07:29 PM

Hello Stefan,

Thank you for your response. We will take your advice into consideration and work to resolve our issue. 

0
Roja Jayashree
Top achievements
Rank 1
Veteran
answered on 01 Apr 2019, 10:20 PM

Hello Team,

I am trying to upload an excel sheet designed in Microsoft Excel with images into kendo react spreadsheet component. It loads the tags and other things properly but it doesn't load images instead it just shows empty cell in place of images.

 

Can you please explain to me or provide me a demo which will load sheet into  spreadsheet along with images.

 

Thanks in advance.

-

Rose

0
Accepted
Stefan
Telerik team
answered on 02 Apr 2019, 07:40 AM
Hello, Roja,

The team is currently working on implementing this feature.

The progress can be observed here. It is currently on a planned status, and it will be updated once it is released:

https://feedback.telerik.com/kendo-jquery-ui/1360020-spreadsheet

Regards,
Stefan
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Jamie
Top achievements
Rank 1
answered on 05 Apr 2019, 11:32 AM

Even I was looking for an answer for the question "Also, I have another question for you, Is it possible one component of Telerik within spreadsheet component in react ? Especially with data grid.  If yes, could you please a demo in react?"

Got that !

0
Roja Jayashree
Top achievements
Rank 1
Veteran
answered on 15 Jan 2020, 08:54 PM

I am trying to use custom editor within spreadsheet using  sender._view.openCustomEditor(); it works fine when i try to mount a component as jquery element and bind the data as kendo.bind(el, model);

The issue which i am facing is i have a react component for instance think about editor component  { Editor } from '@progress/kendo-editor-react-wrapper' or any other react component to be bind in the place of jquery element, how can i do that ? 

1. sender._view.openCustomEditor();  -> https://dojo.telerik.com/ewaDunUR/5

2. kendo.bind(el, model); for jquery element -> http://dojo.telerik.com/@nenchef/ojEWU/9

3. A wrapper component like -> https://stackblitz.com/run/?file=app%2Fmain.js

Please give a solution along with demo. 

Thank you

0
Accepted
Stefan
Telerik team
answered on 17 Jan 2020, 08:59 AM

Hello, Roja,

Thank you for the examples.

In this case, I can suggest adding the Kendo UI Editor directly instead of the wrapper.

The approach used in the Spreadsheet to add custom editors relives on the model binding which is a very different approach than the one used in React. Using the wrapper may be possible, but the wrapper will initialize the same Kendo UI Editor underneath so, the end result in terms of functionality and rendering will be the same. 

I updated the example to use the Editor component inside:

https://dojo.telerik.com/ewaDunUR/8

Regards,
Stefan
Progress Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Roja Jayashree
Top achievements
Rank 1
Veteran
answered on 22 Jan 2020, 09:34 PM

Hi Stefan:

Thank you for your quick response to my question.  It is a solution but does not totally address my issue as it means that I will have to load all the editors into each sheet ahead of time.  Can I not dynamically connect or load the custom editor for each editor on a cell click?  The editors I have are React components, some which I have created for specific purposes.  Is there a way to create a wrapper on an arbitrary React Component and bind that to a cell?  Even if that wrapper is a JQuery one!

Bottom line a JQuery wrapper that is bound to a cell that invokes a React component when the cell is clicked, would be the answer to my problem at hand.   Thank you for your attention to this matter.

Best regards,

Roja

 

0
Accepted
Stefan
Telerik team
answered on 23 Jan 2020, 03:44 PM

Hello, Roja,

I do understand the scenario, and can agree and it is expected when working with React.

Unfortunately, this is a limitation of the wrapper as the binding is different and it uses standard templates from the jQuery components.

This is one of the main reasons why we started making fully native components.

Regards,
Stefan
Progress Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Roja Jayashree
Top achievements
Rank 1
Veteran
answered on 24 Jan 2020, 02:37 PM

Hello, Stefan,

Thank you your quick response.  We will try to figure out how we can make use of jQuery components to resolve our issue. I appreciate your patience for taking time to understand my question and addressing it.

 

Regards,

Roja

0
Accepted
Stefan
Telerik team
answered on 27 Jan 2020, 08:36 AM

Hello, Roja,

We stay ready to assist if any issues or further questions arise during the implementation.

Regards,
Stefan
Progress Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Roja Jayashree
Top achievements
Rank 1
Veteran
answered on 14 Feb 2020, 02:07 PM

Hello Stefan,

I want to make a particular piece of text in the cell to bold instead of having whole cell text as bold, is there any way i can set that 

I have shared a example link below

https://docs.telerik.com/kendo-ui/api/javascript/spreadsheet/range/methods/bold

https://dojo.telerik.com/?_ga=2.256454733.737045941.1581370560-1579570296.1576011602&_gac=1.159155784.1580236020.CjwKCAiA1L_xBRA2EiwAgcLKA7qeK32uigY5w6I7wWSfB23OiML3wPrc4Lu2fn-cwdYIf7uABf38rBoC6I4QAvD_BwE

All i need is if a react spreadsheet cell has  two words some thing like 'Hello World' i want only 'world' to be bold which means in cell it should show as 'Hello World' is there any way to implement this ?

Please provide with a example.

Thank you.

-

Rose

0
Accepted
Stefan
Telerik team
answered on 17 Feb 2020, 10:25 AM

Hello, Roja,

Currently, the Spreadsheet can set the bold style only per cell:

https://docs.telerik.com/kendo-ui/api/javascript/ui/spreadsheet/configuration/sheets.rows.cells.bold#sheetsrowscellsbold

As the wrapper Spreadsheet is based on the Kendo UI Spreadsheet, I can suggest submitting a feature request for this in the portal:

https://feedback.telerik.com/kendo-jquery-ui?listMode=Recent&categoryId=1674

Regards,
Stefan
Progress Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Roja Jayashree
Top achievements
Rank 1
Veteran
answered on 18 Feb 2020, 06:42 PM

Hello Stefan,

Thank you for response. i will make a feature request for sure. 

0
Roja Jayashree
Top achievements
Rank 1
Veteran
answered on 11 Mar 2020, 01:28 PM

I am trying to set html data for text formatting styles into cell of react wrapper spreadsheet and i was unable to re-render on scroll as because on scroll it will set the text back to html data and doesnt show formatted text unless i make a event on the spreadsheet

Here is the example. To see the issue all you need to do is scroll down and scroll up bcak again now you will see HTML as text in below example converted into html tag data

https://stackblitz.com/edit/kendo-react-spreadsheet-hnzgaf?file=app%2Fmain.js

0
Accepted
Stefan
Telerik team
answered on 13 Mar 2020, 08:12 AM

Hello, Roja,

Currently, the render event is the closest one and I can agree that is far from perfect.

We may subscribe to this on the scrolling event, but as that event fires many times, this may lead to performance issues.

As we have an open item for the same functionally, please vote and comment on the request, so it becomes more popular, and we add it as a built-in feature:

https://feedback.telerik.com/kendo-jquery-ui/1359632-spreadsheet-render-cell-using-custom-html

Regards,
Stefan
Progress Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Roja Jayashree
Top achievements
Rank 1
Veteran
answered on 18 Jun 2020, 08:26 PM

Hello Stefan,

If we have internal build release as nuget package how we can install that and see for the fix made by the team on nuget package. I have tired following the steps given for kendo UI jquery but i failed as my visual studio was throwing the error all the time. please help me. thanks

0
Stefan
Telerik team
answered on 19 Jun 2020, 06:05 AM

Hello, Roja,

Please share more details on how the components are included inside the application.

In our examples we use the npm packages, which are already released with the latest version:

https://www.npmjs.com/package/@progress/kendo-ui

Also, we just released a new major version of Kendo UI 2 days ago, and an internal build, should not be needed:

Regards,
Stefan
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Roja Jayashree
Top achievements
Rank 1
Veteran
answered on 13 Jul 2020, 03:25 PM
Hello Stefan 

Thank you that helped us.
0
Roja Jayashree
Top achievements
Rank 1
Veteran
answered on 14 Oct 2020, 02:37 PM
Hello Team, 
i have issue with scrolling on ipad using the telerik grid. please see this below example attached as
any help would appreciated. 
0
Stefan
Telerik team
answered on 15 Oct 2020, 11:51 AM

Hello, Roja,

I saw the picture, but as this is a scrolling issue it is hard to observe it on a static image.

Also, this is a forum post related to the Spreadsheet, please open a new thread in the forum for this issue as it is connected to the Grid.

We prefer separate forum posts for different issues as this will make it easier for everyone when they are searching for a similar question.

Regards,
Stefan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Wrappers for React
Asked by
Roja Jayashree
Top achievements
Rank 1
Veteran
Answers by
Roja Jayashree
Top achievements
Rank 1
Veteran
Stefan
Telerik team
Vasil
Telerik team
Jamie
Top achievements
Rank 1
Share this question
or