or
0 answers
11 views
HI there,
I am trying to build custom combobox which offers Add text inputbox, refer the pic for the reference,
with the help of below example code.
<ComboBox
style={{
width: '180px',
}}
id='newx'
name='newX'
textField='add new data'
value={value}
data={selectedval}
onChange={(e) => handleChange(e, props)}
header={
<span
style={{
marginLeft: '60px',
}}
>
<form className='k-form' onSubmit={(e) => e.preventDefault()}>
<fieldset>
{/* <div>Name</div> */}
<TextBox
value={selectedval}
onChange={handleChangeval}
// placeholder='John Smith'
suffix={() => (
<>
{/* {value !== EMPTY_VALUE && ( */}
<InputClearValue
onClick={handleAddoperation}
className={styles.plus}
>
<SvgIcon icon={plusIcon} />
</InputClearValue>
{/* )}
<InputSeparator /> */}
</>
)}
/>
</fieldset>
</form>
</span>
}
// footer={
// <span
// style={{
// marginLeft: '60px',
// }}
// >
// footer
// </span>
// }
/>
Issue encountered:
1. when i click on text input box inside combobox, options popup closing. ( means i am not able to type or add new contents in text input box) 2. i am trying to implement this with incell. is there any other things to consider wrt Incell edit.
1 answer
31 views
Greetings,
I have a table row that contains a string: "Disallow: * Siri Suggestions * Camera Access * Screen recording"
When I try to filter it using the following text input: ": " (a colon with a space), I'm not getting any results.
It only works if I type a colon without the space. Please help, thanks!
Jason
1 answer
66 views
Hi,
When we are trying to enter decimal values all as zeros in the numeric input cell of grid, with scale 10 and precision 18 ,
i.e., if in the numeric column enter "5.00" in one row, "5.500" in another row.
Upon Save or Reload (some postback), the trailing zeros are removed, which shouldn't. and the values are shown as 5 , 5.5 respectively, instead of 5.00 and 5.500
Could you suggest any way to achieve this, or is there an example on this grid numeric cell, as this is working in textbox outside the grid.
Thanks,
Seetha
1 answer
66 views
Hi
I have a scenario to add onChange for custom Grid Cell the issue is that When I try to do that the cell loses focus on
any update of the grid parent component state
when I added useEffect to track the component lifecycle, the component unmounts and mounts with every change.
"The cell that loses focus here is the Discount cell"
Running Example stackblitz
Code
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Grid, GridColumn } from '@progress/kendo-react-grid';
import { NumericTextBox } from '@progress/kendo-react-inputs';
const products = [
{
ProductID: 1,
ProductName: 'Chai',
Price: 18.0,
Discount: 0,
},
{
ProductID: 2,
ProductName: 'Chang',
Price: 19.0,
Discount: 0,
},
];
const CustomCell = (props) => {
React.useEffect(() => {
console.log('componet mount');
}, []);
return (
<td style={{ padding: '1rem', textAlign: 'center' }}>
<NumericTextBox
onChange={(e) => props.onChange(e, props)}
style={{ width: '100px' }}
value={props.dataItem[props.field]}
/>
</td>
);
};
const App = () => {
const [data, setData] = React.useState(products);
const handleDiscountChange = (e, cellProps) => {
setData((_data) => {
return _data.map((item) => {
if (item.ProductName === cellProps.dataItem.ProductName) {
item.Discount = e.value || 0;
item.Price -= item.Discount;
}
return item;
});
});
};
return (
<>
<Grid data={data} title={'title'} editField="inEdit">
<GridColumn field="ProductName" title="Product Name" />
<GridColumn
field="Discount"
cell={(props) => {
return <CustomCell {...props} onChange={handleDiscountChange} />;
}}
/>
<GridColumn field="Price" title="Price" editor="numeric" />
</Grid>
</>
);
};
ReactDOM.render(<App />, document.querySelector('my-app'));
1 answer
74 views
I have a Grid component with a custom cell property. The input field for the cell is determined dynamically depending on a different field type input. So for example if the dataType is 'string" I display a simple input field, if it is 'enum' I display a NumericTextBox.
The grid and the determination of the input field can be seen here:
https://stackblitz.com/edit/react-ts-xapte3?file=index.tsx
This is NOT a working application because it is just too big to put here in its full glory... In the index.tsx from line 200 to 251 you see the implementation of the cell ("ValueCell") and in the file CustomInputFields you can find the ChannelTypeInput component. As the FieldRenderProps require a onFocus and onBlur handler, I tried to implement that myself but I guess this is not enough to handle them.
This works perfectly but the issue is that if I try to type into the Input or NumericTextBox, it loses focus after every character and I have to click into it again. How can I get rid of this behavior?
Another question is: The NumericTextBox also allows negative values. Can I somehow specify that only positive values can be added?
Stefan
Telerik team
answered
on
15 Dec 2021
0 answers
95 views
Hello,
I've this issue in my project with my data grid toggle in edit mode :
Part of my package.json
"@progress/kendo-data-query": "^1.5.5",
"@progress/kendo-drawing": "^1.10.1",
"@progress/kendo-licensing": "^1.1.4",
"@progress/kendo-react-animation": "^4.7.0",
"@progress/kendo-react-data-tools": "^4.7.0",
"@progress/kendo-react-dateinputs": "^4.7.0",
"@progress/kendo-react-dropdowns": "^4.7.0",
"@progress/kendo-react-grid": "^4.7.0",
"@progress/kendo-react-inputs": "^4.7.0",
"@progress/kendo-react-intl": "^4.7.0",
"@progress/kendo-react-layout": "^4.7.0",
"@types/react-transition-group": "^4.4.1",Parts of my render code :
<Grid filterable={false} pageable={true} sortable={false}
data={dataSource}
reorderable={true}
onItemChange={this.itemChange}
editField={"inEdit"}>
<Column title="Ligne">
<Column field="NoLig" width="50px" cell={this.cellFormat} />
<Column field="FlagAnnul" width="50px" cell={this.cellFormat} />
<Column field="Classification" width="64px" cell={this.cellFormat} />
</Column>
</Grid>function cellFormatting
cellFormat = (props) => {
const { dataItem } = props;
const { dataBinding } = this.state;
let value = props.dataItem[props.field];
let editor = "";
let max = 0;
let min = 0;
let maxLength = 0;
let formatOptions = "";
let valueDate = null;
const index = dataBinding.dataScheme.findIndex((o) => o.Name === props.field);
if (index > -1) {
const scheme = dataBinding.dataScheme[index];
editor = scheme.Type;
switch (editor) {
case "boolean":
break;
case "text":
maxLength = scheme.MaxLength;
break;
case "date":
valueDate = moment(value, 'DD/MM/YYYY').toDate();
break;
case "int":
if (value)
value = parseInt(value);
min = parseInt(scheme.Min);
max = parseInt(scheme.Max);
formatOptions = "n0";
break;
case "float":
if (value)
value = parseFloat(value);
min = parseFloat(scheme.Min);
max = parseFloat(scheme.Max);
formatOptions = "n" + scheme.Min.split(",")[1].length;
break;
}
}
return (
<td colSpan={props.colSpan}
className={props.className}
role="gridcell"
aria-colindex={props.ariaColumnIndex}
aria-selected={props.isSelected}
expanded={props.expanded.toString()}
data-grid-col-index={props.columnIndex}
editor={editor}>
{dataItem.inEdit ? (<>
{editor === "boolean" && (<Input />)}
{editor === "text" && (<Input field={props.field} maxLength={maxLength} defaultValue={value} onChange={(e, dataItem) => this.cellValueOnChange(e, props.dataItem)} />)}
{editor === "date" && (<DateInput field={props.field}
defaultValue={valueDate}
data-required-msg=""
validationMessage="" />)}
{(editor === "int" || editor === "float") && (<NumericTextBox field={props.field} max={max} min={min} format={formatOptions} defaultValue={value} onChange={(e, dataItem) => this.cellValueOnChange(e, props.dataItem)} />)}
</>) : (value)}
</td>)
};
I tried add this 2 attributes in props of DateInput element but no success :
data-required-msg=""
validationMessage=""I need hide this tooltip.
I've same issue this DatePicker too !!!
Do you know how resolve this issue, please ?
Thank you
Cyril REILER
