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

Grid Questions

5 Answers 154 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Parag
Top achievements
Rank 1
Parag asked on 06 Nov 2018, 05:34 PM

Hi,

I have couple of general questions for Grid

1) Is it possible to set the width in Percentage to Grid cell? I tried below but it is not working 

       <GridColumn title="Last Name" cell={lastNameCell}  width="50%"/>

2) Onchange : I have created custom cell inside the grid (for example lastNameCell which of type control input Html) and onchange of input I have return     following code 1. In the below code whenever I start typing it invokes grid itemchange event, however with itemchange event I also want to invoke other function which I received from other component

 

Code 1

onChange = (event) => {
        this.props.onChange({
            dataItem: this.props.dataItem,
            field: "FullName",
            syntheticEvent: event.syntheticEvent,
            value: event.target.value
        });
        this.setState({
            data: this.filterData(event.target.value),
            value: event.target.value
        });
    }

For example : My first component is receiving the function from other component, therefore whenever I start editing the controls onchange invokes the function return in other component. later in first component I have added Grid with custom input control, therefore whenever I start editing the control inside the grid it should invoke the grid itemchange as well as the function which I am receiving from other component.

3) For paging, in the example mentioned at below link, if I removed all the records from input js file, the grid still displays the forwarding arrow in enable state. is there any way to disable this? Attached is the screenshot for same

https://stackblitz.com/run/?file=app%2Fwith-state.js

 

Regards,

Parag

 

 

 

5 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 07 Nov 2018, 09:31 AM
Hello, Parag,

Regarding the questions:

1) Is it possible to set the width in Percentage to Grid cell? I tried below but it is not working  - We have a feature request for this and I can suggest voting for it as it will increase its chances to be implemented sooner:

http://kendoui-feedback.telerik.com/forums/908425-kendoreact-feedback/suggestions/34412002-grid-set-column-width-by-percentages-or-pixels

2)   My first component is receiving the function from another component, therefore whenever I start editing the controls onchange invokes the function return in another component. later in the first component, I have added Grid with custom input control, therefore whenever I start editing the control inside the grid it should invoke the grid itemchange as well as the function which I am receiving from another component. - Based on this I assume that the component that holds the Grid has access to that function. If this is the case, inside the itemChange event the function should be accessible via the props:

itemChange = (e) => {
 this.props.customFuction()
 .......
}


3)  For paging, in the example mentioned at below link, if I removed all the records from input js file, the grid still displays the forwarding arrow in enable state. is there any way to disable this? Attached is the screenshot for same - I can suggest setting the pageable property to a function that will set the pager only if there is data:

https://stackblitz.com/edit/react-ycb49q?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
Parag
Top achievements
Rank 1
answered on 14 Nov 2018, 07:37 PM

Hi Stefan,

Thanks for clarification. 

Is there any attribute to provide the name to grid ? for e.g. in case of normal control we are using name="abc" etc.

Regards,

Parag

 

 

0
Stefan
Telerik team
answered on 15 Nov 2018, 12:37 PM
Hello, Parag,

This can be achieved using the Grid ref element and applying the attribute:

<Grid
    ref={el => ReactDOM.findDOMNode(el).setAttribute('name', 'test-name')}

https://stackblitz.com/edit/react-jqyqt8?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
Parag
Top achievements
Rank 1
answered on 17 Nov 2018, 02:15 AM

Hi Stefan,

 

Thanks for the clarification.

 

I tried to performed Snapshot testing for couple of Kendo controls, but getting attached error.

I am getting error in case of dropdown and datepicker

 

Please help.

 

Regards,

Parag

 

0
Stefan
Telerik team
answered on 19 Nov 2018, 07:48 AM
Hello, Parag,

This is indeed caused by the internal use of a guid generator function that ensures that every instance of the component and its attributes is unique.

The approach listed in the Jest documentation is a good approach and it is actually the one recommended by them in this cases:

https://github.com/facebook/jest/blob/master/docs/SnapshotTesting.md#property-matchers

We may consider removing the source of randomness directly inside the code, but this could lead to issues when multiple components are added and we have to discuss this cases in more details.

Let me know if you need more details on this matter.

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
Tags
General Discussions
Asked by
Parag
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Parag
Top achievements
Rank 1
Share this question
or