Spreadsheet

[Roja Jayashree]

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

[Roja Jayashree]

see picture below

[Stefan]

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

[Roja Jayashree]

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.

[Vasil]

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

[Roja Jayashree]

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?

[Stefan]

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

[Roja Jayashree]

Hello Stefan,

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

[Roja Jayashree]

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

[Stefan]

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

[Jamie]

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 !

[Roja Jayashree]

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

[Stefan]

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

[Roja Jayashree]

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

 

[Stefan]

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

[Roja Jayashree]

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

[Stefan]

Hello, Roja,

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

Regards,
Stefan
Progress Telerik

[Roja Jayashree]

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

[Stefan]

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

[Roja Jayashree]

Hello Stefan,

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

[Roja Jayashree]

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

[Stefan]

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

[Roja Jayashree]

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

[Stefan]

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

[Roja Jayashree]

Hello Stefan 

Thank you that helped us.

[Roja Jayashree]

Hello Team, 
i have issue with scrolling on ipad using the telerik grid. please see this below example attached as
any help would appreciated. 

[Stefan]

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