Spreadsheet

22 posts, 8 answers
  1. Roja Jayashree
    Roja Jayashree avatar
    13 posts
    Member since:
    Apr 2018

    Posted 25 Feb 2019 Link to this post

    how to resize spread sheet in react , i have used innerHeight and innerWidth it worked but i couldn't get toolbar in full size and also grid lines
  2. Roja Jayashree
    Roja Jayashree avatar
    13 posts
    Member since:
    Apr 2018

    Posted 25 Feb 2019 in reply to Roja Jayashree Link to this post

    see picture below
  3. Answer
    Stefan
    Admin
    Stefan avatar
    2652 posts

    Posted 26 Feb 2019 Link to this post

    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
  4. Roja Jayashree
    Roja Jayashree avatar
    13 posts
    Member since:
    Apr 2018

    Posted 14 Mar 2019 in reply to Stefan Link to this post

    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.

  5. Answer
    Vasil
    Admin
    Vasil avatar
    1640 posts

    Posted 18 Mar 2019 Link to this post

    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
  6. Roja Jayashree
    Roja Jayashree avatar
    13 posts
    Member since:
    Apr 2018

    Posted 22 Mar 2019 in reply to Vasil Link to this post

    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?
  7. Stefan
    Admin
    Stefan avatar
    2652 posts

    Posted 25 Mar 2019 Link to this post

    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
  8. Roja Jayashree
    Roja Jayashree avatar
    13 posts
    Member since:
    Apr 2018

    Posted 25 Mar 2019 in reply to Stefan Link to this post

    Hello Stefan,

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

  9. Roja Jayashree
    Roja Jayashree avatar
    13 posts
    Member since:
    Apr 2018

    Posted 01 Apr 2019 Link to this post

    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 kenod spreadsheet along with images.

     

    Thanks in advance.

    -

    Rose

  10. Answer
    Stefan
    Admin
    Stefan avatar
    2652 posts

    Posted 02 Apr 2019 Link to this post

    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
  11. Jamie
    Jamie avatar
    2 posts
    Member since:
    Apr 2019

    Posted 05 Apr 2019 Link to this post

    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 !

  12. Roja Jayashree
    Roja Jayashree avatar
    13 posts
    Member since:
    Apr 2018

    Posted 15 Jan Link to this post

    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

  13. Answer
    Stefan
    Admin
    Stefan avatar
    2652 posts

    Posted 17 Jan Link to this post

    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
  14. Roja Jayashree
    Roja Jayashree avatar
    13 posts
    Member since:
    Apr 2018

    Posted 22 Jan in reply to Stefan Link to this post

    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

     

  15. Answer
    Stefan
    Admin
    Stefan avatar
    2652 posts

    Posted 23 Jan Link to this post

    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
  16. Roja Jayashree
    Roja Jayashree avatar
    13 posts
    Member since:
    Apr 2018

    Posted 24 Jan in reply to Stefan Link to this post

    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

  17. Answer
    Stefan
    Admin
    Stefan avatar
    2652 posts

    Posted 27 Jan Link to this post

    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
  18. Roja Jayashree
    Roja Jayashree avatar
    13 posts
    Member since:
    Apr 2018

    Posted 14 Feb in reply to Stefan Link to this post

    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

  19. Answer
    Stefan
    Admin
    Stefan avatar
    2652 posts

    Posted 17 Feb Link to this post

    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
  20. Roja Jayashree
    Roja Jayashree avatar
    13 posts
    Member since:
    Apr 2018

    Posted 18 Feb in reply to Stefan Link to this post

    Hello Stefan,

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

  21. Roja Jayashree
    Roja Jayashree avatar
    13 posts
    Member since:
    Apr 2018

    Posted 11 Mar Link to this post

    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

  22. Answer
    Stefan
    Admin
    Stefan avatar
    2652 posts

    Posted 13 Mar Link to this post

    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
Back to Top