Hi, 

Like my title says imtrying to create a KendoReact Tooltip around a SvgIcon.

I tried these 3 options, but have not been successful:

Please advise.

Thanks,
Grant

Hello,

Is there a non hacky way to handle a column resizing to below the grid container's width? Basically, we want to cancel the resize event if the total width of the columns shrinks below the width. I came up with a hacky solution that sort of works, but I was wondering if there is a set way to do this?

Thanks!

Hello,

We are using the Find and Replace component from the Editor and we would like to have a supplementary feature.

When the "Find and Replace" dialog is already open, we would like to click on the "Find and Replace" button in the Editor toolbar to close it.

The goal would be to close and re-open the dialog even if the user has moved it outside the visible part of the screen.

We have looked for ways to achieve this, but it doesn't seem possible to customize the "Find and Replace" button.

Do you plan on implementing a way to customize the "Find and Replace" component in the future?

Regards

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>