Hi,

Please see example https://codesandbox.io/p/sandbox/dry-tdd-9hqysc?file=%2Fapp%2Fapp.tsx

The example shows a master grid with selection enabled. Master grid contains a detail grid which also have selection enabled. The problem is, when clicking a row in detail grid, the selection in master grid changes, and the detail grid's selection doesn't change.

Thanks,

Jie

Hi Team, 

Im having some trouble understanding how the GridColmn cell/cells properties are intended to be used. 

Quesion: When should I use the 'cell' property vs the 'cells' property. Historically I've used 'cell' and rendered its content based on the declarde editField. I now see there is a 'cells' property that has 'data' and 'edit' attributes. Should I be using these instead, they seem to handle that if check on the editField nativly?

What am I doing?
This example simulates what Im trying to achieve. This is an order form and each item can be ordered as units OR cases. For cases to be ordered, units must be 0 (and visa-versa). You can see in the itemChangeHandler im handling this as well as ensuring thats items cant have a negtive Qty. Thats all fine, but I want to make this UI more intutive by disabling the NumericTextBox that cannot be edited and preventing it from stepping below zero.

The problem Im having is extending the numeric editor on the GridColumn. I thought would be able to use the GridCell component and that it would manage the editor based on the grid editField, then I could either manipulate the GridCustomCellProps.children or GridCustomCellProps.render to add a disabled/max attribute to the NumericTextBox that is being rendered. 

However this does not appear to the case, the GridCell component does not consider the editField. Hence my original question? Uncomment line 80-84 to demo.

Why dont I just render a custom NumericTextBox?
This is possible but I have found that when the grid data changes, the NumericTextBox that is being edited looses focus (because all the lines are being re-rendered), which doesnt make a good UX. The native numeric editor doesnt loose focus though, so if you know how to solve that, it would help too.

!!! IMPORTANT I am using KendoReact v 5.19.0, updating it to the latest is not feasible, this needs to be resovled in the current version.

Any advice or feedback is appreciated.

Thanks,
Grant

Hello, I am trying to enable single selection mode on the Kendo UI TreeView and update the styling of each node as the item is selected. However, I am running into a few challenges. I am working in TypeScript. I have looked at all the examples and while simple, they simple do not work as listed unless I am missing something. 

My TreeView is configured like this:

const [selectedLayer, setSelectedLayer] = useState(['']);
const OnLayerItemSelected = (event: TreeViewItemClickEvent) => {

    const selectedItemId = String(event.item.id);
    setSelectedLayer([ids]);
 
    const item = event.item;
    item.selected = !item.selected;
// other code 
}
 
<TreeView
    className={"margin-top-5 margin-left-minus-2p5em"}
    data={nonContextualWorkspaceGroups}
    item={(props) =>
_CustomNonContextualLegendItemRenderer({
            ...props,
onCheckChange: onLayerVisibilityChanged,
        })}
    selectField={"selected"}
    draggable={true}
    expandIcons={false}
    checkboxes={false}

    aria-multiselectable = {false}
    onExpandChange={onLayerExpansionChanged}
    onCheckChange={onLayerVisibilityChanged}
    onItemClick={OnLayerItemSelected}
/>
                    

With the above code, my application crashes with this error:

If I instead do this pasted below, the application does not crash but single select mode is not enabled and a selected node in the tree looks like this:

const [selectedLayer, setSelectedLayer] = useState({
    ids: ["100"],
    idField : "id"
});

const OnLayerItemSelected = (event: TreeViewItemClickEvent) => {

    const selectedItemId = String(event.item.id);
    setSelectedLayer({ids : [selectedItemId], idField:'id'});
 
    const item = event.item;
    item.selected = !item.selected;
// other code 
}

<TreeView
    className={"margin-top-5 margin-left-minus-2p5em"}
   data={processTreeViewItems(nonContextualWorkspaceGroups, {
select: selectedLayer,
//check: visibleLayers,
        //expand: expandedWorkspace,
    })}
    item={(props) =>
_CustomNonContextualLegendItemRenderer({
            ...props,
onCheckChange: onLayerVisibilityChanged,
        })}
    selectField={"selected"}
    draggable={true}
    expandIcons={false}
    checkboxes={false}

    aria-multiselectable = {false}
    onExpandChange={onLayerExpansionChanged}
    onCheckChange={onLayerVisibilityChanged}
    onItemClick={OnLayerItemSelected}
/>
                                    

Hi,

I have a multi-step process form which has the Upload component on some screens. I've found that users don't wait for files to finish uploading and hit proceed to move to the next screen. Is there a way to block the user interface easily while a file is being uploaded, to prevent this from happening?  

Many thanks.

Hi,

How do I combine two separate grid tables in one PDF file and export them with one being on top of the other with some spacing between them? I'm trying to achieve this with GridPDFExport specifically.

I am currently working on a project that requires a React component with advanced chat bot functionality, and I would appreciate your guidance on how to implement it. The component should have the following capabilities:

• Initially display as a small icon.
• When the small icon is clicked, it should open a small chat window at the bottom corner of the screen.
• The small chat window should have the capability to be moved anywhere on the screen.
• The window should be able to expand to full screen by clicking a small icon on the chat box.
• The window should be able to open in a new tab or new browser window.
• Each message in the chat box should be able to be copied to the clipboard, and the alignment format of the messages should be changeable.

Hello, I am trying to customize each node in the Kendo UI React Treeview. So far my code looks like this:

    <TreeView
        className={"margin-top-15"}
        data={processTreeViewItems(contextualWorkspaceGroups, {
            //select: selectedLayer,
            //check: check,
            //expand: expandedWorkspace,
        })}
        focusIdField={"id"}
        draggable={false}
        expandIcons={false}
        item={customContextualLegendItemRenderer}
        onExpandChange={onLayerExpansionChanged}
        aria-multiselectable={true}
        onItemClick={OnLayerItemSelected}
        checkboxes={true}
        onCheckChange={onLayerVisibilityChanged}
    />
</div>

where the item template is defined as follows:

const customContextualLegendItemRenderer = ( props : any ) => {
    return (
        <div className={'contextualLegendItem'}>
            <SvgIcon className={"contextualLegendItemTypeIcon"} icon={aggregateFieldsIcon}/>
            <span className={"contextualLegendItemTypeText"}>{"Workflow"}</span>
            <span className={"contextualLegendItemText"}>{props.item.text}</span>
            <Label className={"contextualLegendItemStatusLabel"}>{props.item.status}</Label>
        </div>
    );
};

That seems to work, but I also need to control the checkbox's location and style. How do I do this?  

Hi,

just want to share that the new update to the Telerik site look cleaner and nice, but it does need some times to navigate the codes and look for the associated files.

We prefer to have keyboard up/down cursor correspond to navigating input focus up/down a row in the KendoReact Data Grid.

We are already successfully using custom GridColumn Cells to render inputs at all times in tandem with a Grid.onKeyDown handler that finds the next input to set focus.

(for anyone interested this only took a few lines of code to implement a dom navigation heuristic that finds the column index of the nearest TD via onKeyDown event.nativeEvent.target.closest("td") and then finds the corresponding td to that same column index in the next TR up or down, and then hits the first nested native html <input> found to call focus() -  this seems simple and durable to variances in nested components as long as there is a native input to be found, hence the need to render inputs at all times... which does run counter to the approach i saw represented in the KendoReact demos based on setting a particular dataitem's "inEdit" property which wasn't the look we were going for =)

The above cursor navigation is working but before it kicks in, inputs like the DateTimePicker are also taking a cursor up/down to change the date segment that currently has focus - and this doesn't seem to be optional behavior yet?

I believe the fundamental challenge to any dom "wrapper" approach is by the time an outer dom element receives onKeyDown it's too late for event.preventDefault or event.stopPropagation to hide it from the inner input element (the native kendoreact inputs in this case).

Hence the ask here to have an option to ignore that at on the individual KendoReact input components.

With previous KendoReact component builds (e.g. 8.2.0) we successfully proved "patch-package" various subcomponents of DateTimePicker, NumericTextBox and MultiSelect to prevent them from responding to up/down cursor events.

Of course patch-package approach is fragile to upgrades and sure enough recent need to take @progress/kendo-react-dateinputs@9.1.0-develop.6 to get into DateTimePicker formatPlaceholder bug fixes broke previous patches, highlighting need for more resilient fix.

I've attached the latest patch-package files to give precise reference to what keyboard events we're interested in disabling.

I'm assuming this is a feature request and happy to have it reallocated to a support ticket... but wanted to post it in open forums in case community might have alternative suggestions to achieve what we're looking for?

Maybe other approaches to what seems like it could be a general html nested component strategy pattern?

For instance, I'm hesitant to pursue any removeEventListener based approaches for fear of how that might conflict with how i vaguely understand react is continually recreating dom elements upon each render cycle, so i'd be open to encouragement in that direction if anyone has experience to share?

Also wondering if this falls into the realm of "accessibility" and maybe there's already ways to disable accessibility? (as negative as that sounds).