Telerik Forums / KendoReact
This is a migrated thread and some comments may be shown as answers.

In-Cell Editing after applying custom style using GridCell Component

34 Answers 365 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Vikrant
Top achievements
Rank 1
Vikrant asked on 09 Oct 2018, 10:54 AM

We have applied a custom style to grid cells as below,

<Column key={groupArray[0]} title={currentTabColumns[groupArray[0]]} width="148px" field={groupArray[0]} cell = {RerValue} />

 

the extended class is as below,

export default class RerValue extends GridCell {
render() {

const style = {
backgroundColor: 'red'
};

return <td style={style}> {data} </td>;

}

 

but now the editing stops. If we remove the custom style the editing works.

Please guide us on how to make this work.

34 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 10 Oct 2018, 10:41 AM
Hello, Vikrant,

The described behavior occurs because the cell property is with a higher priority than the cellRender property. In the cell editing demo, the editing logic is added in the cellRender and when the cell property is used, for that specific column the editing logic is not added.

In this case, we can suggest adding the desired styles or modifications to the cell in the cellRender to keep the editing logic:

if(field === 'ProductName'){
  additionalProps.style = {backgroundColor : "red"}
}

I made an example based on the editing demo that shows this implementation:

https://stackblitz.com/edit/react-2kzkvf?file=app/renderers.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
Vikrant
Top achievements
Rank 1
answered on 10 Oct 2018, 11:03 AM

Hello Stefan,

we wish to modify the background of few cell not all in the column. Also on some condition the background and cell editing functionality should be disabled.

 

Thanks in advance.

0
Stefan
Telerik team
answered on 11 Oct 2018, 06:24 AM
Hello, Vikrant,

Yes, this is still possible with the cellRender.

I modified the example to apply styles to only some of the cells in the columns and  made only the cell with no additional styles editable:

https://stackblitz.com/edit/react-2kzkvf-sndqlv?file=app/renderers.js

The cellRender is able to the same customizations as the cell property with the difference that it is fired for all cells and require additional check which is the current column.

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
Vikrant
Top achievements
Rank 1
answered on 14 Oct 2018, 11:33 AM

Hi Stephan,

I am adding custom classname to the cell acoording to the conditions,

 I would like to know how shall I add the tooltip to that cell.

 

Thanks

0
Stefan
Telerik team
answered on 15 Oct 2018, 10:05 AM
Hello, Vikrant,

The Tooltip requires setting a title element to the Grid cells and wrapping the Grid inside a Toolip component:

if(field === 'ProductName' && dataItem.ProductID % 2){
  additionalProps.style = {backgroundColor : "red"}
  additionalProps.onClick = null
  additionalProps.title = "This is tooltip for: " + dataItem.ProductName


<Tooltip anchorElement='target' position='right'>
  <Grid
      data={this.state.data}

I updated the example:

https://stackblitz.com/edit/react-2kzkvf-sndqlv?file=app%2Frenderers.js

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
Vikrant
Top achievements
Rank 1
answered on 16 Oct 2018, 06:48 AM

Thanks Stephan, it worked.

I need 1 more help.

how can we set width of the grids to auto as per its content?

0
Stefan
Telerik team
answered on 16 Oct 2018, 09:07 AM
Hello, Vikrant,

Currently, the Grid supports only setting a fixed width or leaving no with to the columns which will set the width based on the Grid width.

I can suggest submitting a feature request for autofit column width based on the content. Our priorities greatly depend on the community demand and the feature request will allow more people to vote for it:

http://kendoui-feedback.telerik.com/forums/908425-kendo-ui-for-react-feedback

If you decide to submit the request, please share the link here and I will add some Telerik points to your account.

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
Vikrant
Top achievements
Rank 1
answered on 16 Oct 2018, 11:02 AM

Hi Stefan,

Couple of more queries.

1. How can I freeze the first column of the grid while scrolling horizontally.

2. We want to add parenthesis for the negative values in the grid

 

 

Thanks

 

0
Stefan
Telerik team
answered on 17 Oct 2018, 08:51 AM
Hello, Vikrant,

Regarding the questions:

1) The frozen columns are under development and are currently being tested. Once it is available the feature request item will be updated:

http://kendoui-feedback.telerik.com/forums/908425-kendo-ui-for-react-feedback/suggestions/33909391-frozen-column-in-react-grid

2) This can be done using the cellRender:

https://stackblitz.com/edit/react-2kzkvf-sndqlv?file=app%2Fmain.js

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
Vikrant
Top achievements
Rank 1
answered on 18 Oct 2018, 07:02 AM

Thanks Stephan. 

I have 1 more questions.

is it possible to navigate the cells using arrow keys and tab key, also the enter key once I am done with the changes in editable cell ?

I want to integrate it the same way as MS Excel works.

0
Vikrant
Top achievements
Rank 1
answered on 18 Oct 2018, 07:48 AM

Also there is 1 more issue I am facing.

When I am using onRowClick property of grid, In-cell editing stopped working. 

0
Vasil
Telerik team
answered on 19 Oct 2018, 12:53 PM
Hi Vikrant,

It depends on what is attached to the onRowClick. for example if you focus or click something or force update the app, it will affect the editing. Without the actual code it is hard to tell a solution.

It is possible if you attach KeyPress and wire your logic for navigation to achieve it, but it does not come built-in into the component.

On a side note it worth checking the Kendo UI Spreadsheet jQuery widget, it have a wrapper and can be used inside react app as well.

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
Vikrant
Top achievements
Rank 1
answered on 19 Oct 2018, 01:16 PM

Hi Vasil,

I am using following example as reference to select the row.

https://www.telerik.com/kendo-react-ui/components/grid/selection/

 

But it disables the editing

0
Vasil
Telerik team
answered on 22 Oct 2018, 07:44 AM
Hello,

The problem happens because the two functionalities are working on click at the same time.

Could you tell us what is your requirement, since I see multiple options here that can be implemented. Thus the code will be different:
a) click should select row without editing it
b) click should edit the row without selecting
c) click should select and edit row at the same time.


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
Vikrant
Top achievements
Rank 1
answered on 22 Oct 2018, 09:17 AM

Hi,

I want to select row and edit cell at the same time.

0
Vasil
Telerik team
answered on 23 Oct 2018, 01:33 PM
Hello Vikrant,

If this is the case, you don't need to handle the selection separately. Just set selectedField the same as the editField. This way you get selection on click in the in-cell edit example. Here is a runnable example https://stackblitz.com/edit/react-9kqvlg?file=app/main.js

Please let me know if you need further assistance.

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
Vikrant
Top achievements
Rank 1
answered on 27 Oct 2018, 09:47 AM

Hi Vasil,

I want to add a className to the cell, when user edits that cell.

How can we achieve that?

 

 

Thanks

0
Vasil
Telerik team
answered on 30 Oct 2018, 09:35 AM
Hi Vikrant,

Just add the following line to the additional props of your cell, if the cell is in edit.
className: 'MyClassName',
In the previous example at line 18 in renderers.js:
https://stackblitz.com/edit/react-9kqvlg?file=app%2Frenderers.js

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
Vikrant
Top achievements
Rank 1
answered on 21 Nov 2018, 05:01 AM

Hi Vasil,

I have set my grid cell with property 'editor="numeric"', but I dont want it to change values when I press arrow up and arrow down key.

I have different action on the arrow keys set.

Also is it possible to highlight all the cells which are edited?

 

 

Thanks

0
Stefan
Telerik team
answered on 21 Nov 2018, 11:54 AM
Hello, Vikrant,

If the behavior of the editor has to be changed, I can suggest using a flag on the custom action that will be set to true when the arrow keys are pressed. Then on the itemChanged event, if this flag is true, to not set a new value:

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

Could you please clarify if the currently edited cell has to be highlighted or all calls that are already edited?

-----------------------------------------------------------------------------------------------

Also, I noticed that this account is not currently associated with a valid License or a Trial. Before continuing with the technical support, could you please start a Trial account or associate this with a license if you already have a valid license.

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
Vikrant
Top achievements
Rank 1
answered on 21 Nov 2018, 12:19 PM

Thanks Stephan,

We want to highlight all the cell that have been edited.

 

Also could you please tell how to associate my account with the licensed account?

We already have purchased a license by using another account.

 

 

Thanks

0
Stefan
Telerik team
answered on 22 Nov 2018, 08:55 AM
Hello, Vikrant,

This can be done inside the cellRender. The approach can be to check if the current value is different than the original one and if it is to add additional styles.

if (currentProduct[field] !== dataItem[field]) {
  additionalProps.style = { backgroundColor: "blue" }
}

This is the modified example:

https://stackblitz.com/edit/react-2kzkvf-4izuh6?file=app/renderers.js

As for the license:

If your company has already purchased a license from another account, please contact the license holder and provide them with this link so they can add you as a licensed developer. Additionally, you can reach out to our product specialists on telerik-sales@progress.com. They will gladly assist you with finding both the answers to your questions and subscription details.

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
Vikrant
Top achievements
Rank 1
answered on 24 Dec 2018, 06:06 AM
grid.jpg
Hi,
Whenever I am trying to export grid to PDF, I am not able to export the rows and columns that are hidden by scroll.
I am using following library.
 import { PDFExport as GridPDFExport } from '@progress/kendo-react-pdf';

please go through the attached screenshot.

Also I need your help to understand, how shall I keep first column Freeze in react grids.

Thanks,
Vikrant
0
Vikrant
Top achievements
Rank 1
answered on 24 Dec 2018, 06:08 AM
Also, will you please help me freeze the first column of the grid (for horizontal scroll) ?
0
Stefan
Telerik team
answered on 24 Dec 2018, 08:36 AM
Hello, Vikrant,

I have provided answers to the last two questions in the following forum post with the same questions:

https://www.telerik.com/forums/react-grid-print-issue

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
Sandeep
Top achievements
Rank 1
answered on 24 Dec 2018, 11:33 AM

As compared to demo, when I change my import statement from

import { PDFExport as GridPDFExport } from '@progress/kendo-react-pdf';

to

import { GridPDFExport } from '@progress/kendo-react-pdf';

I receive following error @progress/kendo-react-pdf' does not contain an export named 'GridPDFExport'.

 

 

and when I import

import { PDFExport as GridPDFExport } from '@progress/kendo-react-pdf';

only the visible part is exported in the pdf.

 

 

Thanks

0
Stefan
Telerik team
answered on 25 Dec 2018, 07:43 AM
Hello, Sandeep,

Apologies for the mistake.

I did copy to demo twice instead of the modified example.

This is the example, please take a look at it:

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

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
Sandeep
Top achievements
Rank 1
answered on 26 Dec 2018, 06:40 AM

When i try to import 

import { GridPDFExport } from '@progress/kendo-react-pdf';

 

I get following error

'@progress/kendo-react-pdf' does not contain an export named 'GridPDFExport'.

0
Stefan
Telerik team
answered on 26 Dec 2018, 08:18 AM
Hello, Sandeep,

This is a strange error as the package has this named export.

Could you please ensure that this is using the latest version?

If the issues still occur, please provide an example where it is reproduced, and I will gladly assist further.

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
Sandeep
Top achievements
Rank 1
answered on 28 Dec 2018, 09:01 AM

We are using version 1.2.0 for kendo-react-grid and kendo-react-pdf.

When I tried updating the these libraries, I am facing issues with the existing functionality.

 

Thanks

0
Vasil
Telerik team
answered on 31 Dec 2018, 09:24 AM
Hi Sandeep,

GridPDFExport was moved from kendo-react-grid to kendo-react-pdf from version 2.0., and the documentation is always with our latest version.

If you are using 1.2 version, import the PDFExport module from the Grid's package.

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
Sandeep
Top achievements
Rank 1
answered on 10 Jan 2019, 01:13 PM

Thanks Vasil, It worked.

I have multiple dynamically generated grids on single page, when I try to export those grids to pdf, it always saves only the first grid.

Can you help me regarding this

 

 

Thanks

0
Stefan
Telerik team
answered on 11 Jan 2019, 08:20 AM
Hello, Sandeep,

Could you please share the code on how the Grids are added dynamically on the page and how the export is setup?

This will allow us to provide an answer best suited of the current implementation.

Also, is it expected to save all Grids on a single PDF?

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
Sandeep
Top achievements
Rank 1
answered on 11 Jan 2019, 03:10 PM

Thanks Stephan for the quick response.

I have found a way to achieve this, now it is working as expected.

 

Thanks

Tags
General Discussions
Asked by
Vikrant
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Vikrant
Top achievements
Rank 1
Vasil
Telerik team
Sandeep
Top achievements
Rank 1
Share this question
or