I'm migrating KendoUI for jQuery to React. In jQuery version of Kendo Grid was possible to set "values" property to columns with "id" values.
In React version of the kendo grid, the "values" property for the GridColumn component is not available. How can I make the same like in jQuery version?
Thanks a lot for an each help.
I am using Kendo React for Griding and using only for development and for learning and testing not for the commercial purpose.
Is there a way to Achieve all attribute,functionlity without getting license key (with out water Mark).
Remember This is only for testing,Learning, Development not for commercail purpose
On the Scheduler, we have three requirements that we need to implement on the first row:
We got close to implementing these features with the WeekView, but our rows need to correspond to employees and not hours, and we add the employee data as resources. Every time we add resources to the Scheduler with the WeekView it adds them as an additional row column instead of replacing the hours column. We also tried creating our own custom slot to have the SchedulerItems remain sticky when scrolling, but it still wouldn't remain in the sticky row.
So my specific questions are: 1) Can the three requirements be implemented in the Scheduler? 2) Is using resources the correct way to add the employee column for the rows? If not, what is the correct approach?
Hi,
Is there a way to get these paging controls when
scrollable="none"?
If I set scrollable=none, I get these paging controls
"I'm utilizing a Kendo form featuring checkboxes. I've integrated a feature wherein selecting the 'Select All' checkbox prompts the other checkboxes within the view, update, or create sections to be set to a true value. How can I effectively implement this functionality within the Kendo form?
Hi,
I have React Kendo Datagrid, in inline editing numeric textbox loses focus after key press.
I debugged it and found cause of the problem is itemChange function.
Actually I followed https://www.telerik.com/kendo-react-ui/components/grid/editing/editing-inline/ document.
How to solve it? I attached whole page.
const itemChange = (event: GridItemChangeEvent) => {
const field = event.field || "";
const newData = result.data.map((item) => {
return item.id === event.dataItem.id
? { ...item, [field]: event.value }
: item
});
const dataResult = {
data: newData,
total: newData.length
};
setResult(dataResult);
};
<Grid
style={{ width: 985 }}
className="gridTable"
filterable={false}
sortable={false}
pageable={false}
{...dataState}
data={result}
rowRender={rowRender}
onItemChange={itemChange}
editField={editField}
onDataStateChange={dataStateChange}
resizable={true}
size='small'
selectable={{
enabled: true,
mode: 'multiple'
}}
dataItemKey={dataItemKey}
selectedField={selectedField}
>
<GridToolbar className='ms-auto'>
<div>
<button
title="Add new"
onClick={addNew}
style={{ border: "none", padding: "none", background: "none" }}
>
<i className="bi bi-file-plus" style={{ color: "#0F62FE", fontSize: "1.5rem" }}></i>
</button>
</div>
</GridToolbar>
<Column field="attendeeCompanyId" cell={DropDownCellAttendeeCompanies} title="Katılımcı Şirketi" width={300} />
<Column field="distributionCompanyId" cell={DropDownCellDistributionCompanies} title="Dağıtım Şirketi" width={300} />
<Column field="ratio" editor="numeric" title="Oran" width={150} format='%{0:#.##}' />
<Column field="attendeeCount" editable={false} title="Katılımcı Sayısı" width={120} />
<Column cell={CommandCell} width="100px" />
</Grid>
Thanks
With a sidebar-grid layout, where the grid has resizable column widths, I cannot get the grid to generate a horizontal scrollbar. The documentation "advice" in useless on this: setting explicit column width larger than the width doesn't work and is a hack. Without the sidebar (e.g. outside of a parent flex that maintains the sidebar), resizing a column larger generates the horizontal scrollbar just fine. There's nothing documented I can find as to what the layout expectations of the datagrid are, and I'm really frustrated at hacking at it.
What are the specific layout expectations of the datagrid to generate a horizontal scrollbar? This is a common UI idiom- why is it so hard to get a grid to occupy the full width of its container and scroll when constrained?
Is the following error because kendo is using eval() in some areas?
Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' https://maps.googleapis.com 'sha256-FCclJ10YV/xEc9PbnYcWzMs7Mw9DRGVf31pHhGF1jtp='".
at Function (<anonymous>)
at Object.getter (kendo.all.min.js:26:455)
at init.get (kendo.all.min.js:27:21790)
at new e (ScheduleDsb.tsx:367:30)
at 125 (DyScheduleTimeline.tsx:67:46)
at i (scheduler:1:1815)
at r (scheduler:1:1684)
at Array.t [as push] (scheduler:1:1547)
at main.358cb176.chunk.js:1:73
getter @ kendo.all.min.js:26
get @ kendo.all.min.js:27
e @ ScheduleDsb.tsx:367
125 @ ScheduleTimeline.tsx:67
i @ scheduler:1
r @ scheduler:1
t @ scheduler:1
(anonymous) @ main.358cb176.chunk.js:1
Following are some details on the version we are using.
"dependencies": { "@progress/kendo-ui": "^2021.3.1207", "@types/node": "^12.20.15", "@types/react": "^17.0.11", "moment": "^2.29.4", "react": "^17.0.2", . . . } "devDependencies": { "@types/jquery": "^3.5.5", . . . }