Hi,
I am trying to get this grid to display the TEST message in the detail when I click the expander against the row. Everything looks to be working as expected (I am using state.fetchErrorMsg to provide debug text to prove that state is changing and triggering re-rendering when necessary, I can also confirm that the expander toggles between + and - as expected).
Any ideas what I am doing wrong here? I suspect it is something to do with how I am handling the promise that returns the data, since I can get this working when I use locally built static arrays instead of the fetch.
Cheers
Mike
import React, { useEffect, useState } from 'react';
import { UserInfo, TcbObjMilestoneGrp, TcbObjInfo } from '../../models/models';
import { loadingDiv } from '../../functions/componentFunctions';
import { Grid, GridColumn, GridExpandChangeEvent, GridDetailRowProps } from '@progress/kendo-react-grid';
import './TcbObjMilestones.css';
type TcbObjMilestonesProps = {
tcbObj: TcbObjInfo;
userInf: UserInfo;
}
type TcbObjMilestonesState = {
milestoneList: TcbObjMilestoneGrp[];
milestonesFetched: boolean;
fetchError: boolean;
fetchErrorMsg: string;
fetchInProg: boolean;
}
function TcbObjMilestones(props: TcbObjMilestonesProps) {
const [state, setState] = useState<TcbObjMilestonesState>({
milestoneList: [],
milestonesFetched: false,
fetchError: false,
fetchErrorMsg: '',
fetchInProg: false
});
useEffect(() => {
state.fetchErrorMsg = 'FetchInProg';
state.fetchInProg = true;
setState({ ...state});
let url = props.userInf.currProject.apiUrl + '/api/details/GetTcbObjMilestones';
fetch(url, { method: 'POST', body: JSON.stringify(props.tcbObj), headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + props.userInf.token } })
.then(resp => resp.json())
.then(res => {
switch (res.callStatus) {
case "OK":
let ml: Array<TcbObjMilestoneGrp> = res.results;
state.fetchErrorMsg = 'Got MilestoneData '
state.milestoneList = ml;
state.milestonesFetched = true;
state.fetchInProg = false;
setState({ ...state });
break;
case "UNAUTH":
let uInf: UserInfo = { ...props.userInf, isAuthorised: false };
state.fetchInProg = false;
setState({ ...state });
break;
default:
state.fetchInProg = false;
state.fetchError = true;
state.fetchErrorMsg = res.callStatusMessage;
setState({ ...state });
}
})
.catch(err => {
state.fetchInProg = false;
state.fetchError = true;
state.fetchErrorMsg = 'Error fetching Item Details - ' + err.toString();
setState({ ...state });
});
}, []);
const expandGrpChange = (e: GridExpandChangeEvent) => {
let dr: TcbObjMilestoneGrp = e.dataItem;
let ml = state.milestoneList;
let mlg = ml.find(x => x.milestoneId === dr.milestoneId)!;
mlg.isExpanded = !e.dataItem.isExpanded;
state.fetchErrorMsg = 'Expanded ' + mlg.isExpanded;
setState({ ...state});
}
const renderMilestoneDetails = (e: GridDetailRowProps) => {
return (<section><p>TEST</p></section>);
};
if (state.fetchInProg)
return loadingDiv();
let formatStr = "{0:dd-MMM-yyyy HH:mm }";
return (
<>
<p>{state.fetchErrorMsg}</p>
<Grid
data={state.milestoneList}
detail={renderMilestoneDetails}
expandField="isExpanded"
onExpandChange={expandGrpChange}
resizable
>
<GridColumn field="milestoneDesc" title="Milestone" className="TcbObjMilestoneGridMainCell" />
<GridColumn field="latestMilestoneDate" title="Latest" format={formatStr} width="120px" className="TcbObjMilestoneGridCell" />
<GridColumn field="latestSource" title="Source" width="90px" className="TcbObjMilestoneGridCell" />
</Grid>
</>
);
}
export default TcbObjMilestones;
Hello,
I'm running into an issue with a custom GridColumnMenuFilter cell. The component is very simple:
import * as React from "react";
import {
GridColumnMenuFilter,
GridColumnMenuProps,
} from "@progress/kendo-react-grid";
export default function ColumnMenu(props: GridColumnMenuProps) {
return (
<div>
<GridColumnMenuFilter {...props} expanded={true} />
</div>
);
};
I'm trying to get this to work within the Master headers on a Master/Detail grid. Previously the grid was not a Master/Detail grid and the filter popup was working fine, however when it was refactored to a Master/Detail grid the filter popups are not being displayed when the sideways elipsis is clicked. Unfortunately no js errors are being reported in the browser console, there is just a warning about a stylesheet not loading in time. My question is, are custom GridColumnMenuFilter cells, or any filtering at all, supported in a Master/Detail grid? If so, is there anything specific we would need to do to enable this?
Any assistance is definitely appreciated.
Thanks,
Paul Johnson
I wanted to add data grid in my existing project. where all the dependencies are installed with yarn
so I installed the kendo-react-grid dependency with yarn and i am getting the error.
here is the code.
import * as React from "react";import * as ReactDOM from "react-dom";import { Grid, GridColumn } from "@progress/kendo-react-grid";import products from "./products.json";
export const KindoRactApp = () => { return ( <Grid style={{ height: "400px" }} data={products}> <GridColumn field="ProductID" title="ID" width="40px" /> <GridColumn field="ProductName" title="Name" width="250px" /> <GridColumn field="Category.CategoryName" title="CategoryName" /> <GridColumn field="UnitPrice" title="Price" /> <GridColumn field="UnitsInStock" title="In stock" /> </Grid> );};
this is the error
Greetings,
I have an issue where the grid height does not change correctly when the row height is increased which causes the table to not display all information. User requires to scroll to see the rest of the information (Please see the attached image for example).
The grid is displaying correctly if the row height is using the default value.
Is there a way to make the table size to size-to-fit? Thanks!
Jason
Hello
I'm having trouble using the Kendo mesh export feature
There is no selection status information in the "Selected" column of the exported file, which is always empty.
Is it possible to show selection status in exported files?
Regards,
Sunny
Hello,
I'm trying to freeze (make sticky) the master grid column header on a master/details grid. For each of the master grid column headers, I've set the locked property to true and I can verify that the associated th elements have the k-grid-header-sticky class applied. All grid columns have fixed width values as well. Am I missing anything additional in order to freeze the headers?
Any help is definitely appreciated!
Thanks,
Paul
I'm trying to determine if displaying Master Header Columns for each Master record in a Master/Details grid is supported. I didn't see any documentation about this so I don't believe it is, but just wanted to confirm.
Any help is definitely appreciated!
Thanks,
Paul
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
https://www.telerik.com/kendo-react-ui/components/grid/data-operations/odata-server-operations/
in the above example could you set the filter option as dropdown "in stock" coloumn so that when user can select the value from the dropdown api call will fire and table data will filtered based on that.
Would love a prop to hideHeader on KendoReact grids!
For the same reasons that were enumerated in this 2017 Kendo Angular thread: https://github.com/telerik/kendo-angular/issues/285
- For shared grids that only need 1 header row
- For small grids that have sorting/filtering controls outside of the grid header