Hello,

I am looking for a library which would allow us to implement a drag and drop reordering of the rows of a virtualized list.

I would like to use the KendoReact Drag&Drop utility, but it seems that `useDraggable` needs a ref as its first argument.

And it seems that this ref should not be unmounted, otherwise it yields an error.

But, in virtualized lists such as `FixedSizeList` from React Window, the components will be automatically unmounted when they are outside the viewed area.

Is it possible to implement the Drag&Drop utility from KendoReact inside a virtualized list, or should we look for another Drag&Drop library which would support this use case?

Hello,

I am attempting to create a vertical menu with a custom style for the menu items. I have the following code with the output attached. As you can see the menuitems are not aligned. Any thoughts? 

const contentRender = (props: any) => {
    return (
        <div style={{margin:"0px 0px 5px 0px",
            padding: '0px 0pc 0px 0px !important',
            fontSize:"xx-small",
            textAlign:"center",
            justifyContent:"center"}}>
            <SvgIcon icon={props.item.svgIcon} size={"large"}/>
            <br/>
            <span>{props.item.text}</span>
        </div>
    );
};
 
<Menu vertical={true} itemRender={contentRender}>
    <MenuItem svgIcon={allIcon} text={"All"} />
    <MenuItem svgIcon={userIcon} text={"Me"} />
    <MenuItem svgIcon={folderIcon} text={"None"} />
    <MenuItem text={"Workflows"} svgIcon={aggregateFieldsIcon}/>
    <MenuItem text={"RFIs"} svgIcon={stickyNoteIcon}/>
    <MenuItem text={"Coordinat.."} svgIcon={clockIcon}/>
    <MenuItem text={"Observat.."} svgIcon={binocularsIcon}/>
    <MenuItem text={"Inspection"} svgIcon={clipboardIcon}/>
    <MenuItem text={"Punch"} svgIcon={pinIcon}/>
    <MenuItem text={"Incident"} svgIcon={groupCollectionIcon}/>
    <MenuItem text={"Correspnd.."} svgIcon={commentIcon}/>
</Menu>
 
 

Hi,

I'm working on a solution for my team's grid implementation. We need to prevent certain columns from being reordered into the last column position if that last column is designated as immovable. Is there a way to retrieve the target index of where a column is being moved to, so we can conditionally restrict reordering?

Thank you!

Hi,

So, I realized that if I create a <Grid data={dataSource}></Grid>, without anything in between, it is smart enough to create all the columns for me. That is super awesome, since I have a dataset with 16 columns.

However, now that I need to customize the filterCell for a couple particular columns. How do I do that? I have two solutions

1/ It seems like if I create one GridColumn (to have filterCell attribute), I have to create all 16 of them.

2/ I can do a mapping function to create all the non-customized columns, but since the customized ones are not in sequential order, all the columns excluded from the mapping function will be placed at the end (right-most of the grid) - which is not ideal. 

Any help is greatly appreciated.

Best regards,

Luu

Hello,

I'm trying to create a pivot grid and I want to have all my equipment even if they have no data in the pivot grid but if I add a equipment with no employee there is a row with null in it. Is there a way of hidding the row if it has null or empty but still have the column with no data?

Here is an image of what I have

If that can help here is the data I have that populate the pivot grid

const data = [
    { inspectionId: 1, Equipment: "Test1", Employee: "emp1", nbInspection:5 },
    { inspectionId: 2, Equipment: "Test1", Employee: "emp2", nbInspection:3 },
    { inspectionId: 3, Equipment: "Test2", Employee: "emp3", nbInspection:2 },
    { inspectionId: 4, Equipment: "Test2", Employee: "emp1", nbInspection:3 },
    { inspectionId: 5, Equipment: "Test2", Employee: "emp2", nbInspection:2 },
    { inspectionId: 6, Equipment: "Test3", Employee: "emp3", nbInspection:5 },
    { inspectionId: 7, Equipment: "Test3", Employee: "emp2", nbInspection:2 },
    { inspectionId: 8, Equipment: "Test3", Employee: "emp2", nbInspection:1 },
    { inspectionId: 9, Equipment: "Test3", Employee: "emp1", nbInspection:3},
    { inspectionId: 10, Equipment: "Test4", Employee: null, nbInspection:0 },
    { inspectionId: 11, Equipment: null, Employee: "emp4", nbInspection: 0 },
];

Hello;

We need to display a chart which shows the data we have from the backend. Each event has a date record that includes the milliseconds. It is very possible that we need to show several events that are only a few milliseconds apart.

I have managed to show the events per second, with this configuration only the last event we received for that second is shown, losing data in the chart.

If I configure the ChartCategoryAxisItem with baseUnit milliseconds, the web crashes and closes, it seems that it starts to calculate something and causes an error.

I attach the current development, it is quite simple.

Could you recommend the configuration of the components or tell us which components are recommended to use when working with dates that have milliseconds?

The idea is to show a series of events with dates with milliseconds in a chart.

Thanks in advance.

Event Example

{
    "idEvent": 551,
    "seqNumber": 0,
    "eventTime": "2024-05-16T23:59:48.200Z",
    "eventTimeQ": 1,
    "eventTimeLocal": 1,
    "quality": "1",
    "value": 30,
    "COT": null,
    "points_idPoint": 3,
    "DynamicTexts_idDynamicTexts": null
}

<Chart ref={chartRef} style={{ height: "100%" }}>
<ChartLegend position="top" visible />
<ChartTooltip
render={({ point }) => `${point.series.name}: ${point.value}`}
/>
<ChartCategoryAxis>
<ChartCategoryAxisItem
baseUnit="milliseconds"
baseUnitStep={100} 
min={new Date(startDate)}
max={new Date(endDate)}
majorGridLines={{ visible: true }}
title={{ text: "Event Time" }}
majorTicks={{ step: 5 }} // Muestra una etiqueta cada 5 puntos
labels={{ step: 5, rotation: "auto" }}
/>
</ChartCategoryAxis>
<ChartValueAxis>
<ChartValueAxisItem
name="digitalAxis"
title={{ text: "Digital" }}
min={0}
max={1}
labels={{ format: "{value}" }}
/>
<ChartValueAxisItem
name="analogAxis"
title={{ text: "Analog" }}
labels={{ format: "{value}" }}
/>
</ChartValueAxis>
<ChartSeries>
{signals
.filter((s) => s.visible)
.map((signal) => {
const events = chartData[signal.idPoint] || [];
return (
<ChartSeriesItem
key={signal.idPoint}
type="line"
data={events.map((event) => ({
value:
signal.idPointType <= 1
? event.state === "On"
? 1
: 0
: event.value || 0,
category: event.eventTime,
}))}
color={signal.color}
name={signal.tag}
axis={signal.idPointType <= 1 ? "digitalAxis" : "analogAxis"}
/>
);
})}
</ChartSeries>

</Chart>

Not seeing this in the docs, but wondering if there's a feature in planning to allow highlighting of an area on a PDF, and target a certain page. 

This feature exists in another library (React PDF Viewer), but it's no longer maintained.  Any plans for KendoReact?  Thank you.

Hello,

I would like to add a custom render for the GroupPanel component, or at the very least, obtain its ref to insert additional elements according to our design requirements (a non-functional div: "Group by:", "Drop column here"). Is this possible?

Example: 

Thank you in advance for your help!

Best regards,
Vsevolod

Hello,

ist it possibel to set up the DatePicker so that the week starts wit MONDAY and not Sunday?

Thank you, Matjaz Reberc