In our grid we are providing an expansion field and providing a detail grid as given in the Master-Detail grid example:
React Data Grid Master-Detail Grids - KendoReact

In all of the examples the detail grid takes up the entire width of the main grid. I can limit the detail grid to be the screen size and align it to the left of the master grid, but I am having difficulty having the grid be sticky within the master grid. (here is an example from MUI Data Grid - Master detail - MUI X) 

I have tried making the inner div
position: sticky;
width: 90vw;
left: 5vw

but it does not scroll within the grid. Am I missing something easy?

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.