[LaxGulawaniParticipant]

Hi Martin,

We have relooked at the problem and decided not to update state while displaying nested grid. That solved problem.

Now we are binding ajax result directly to nested grid and it works well.

Thanks for your help.

[LaxGulawaniParticipant]

Hi Martin,

Below is the method for actionCreator

requestDetailsByOrderId: (id: number):
        AppThunkAction<KnownAction> => (dispatch, getState) => {
            if (orderNumber !== getState().orders.orderNumber) {
                const fetchTask = fetch(<code>api/orders/GetOrderDetailsForOrderId/${id}</code>)
                .then((response) => response.json() as Promise<Order[]>)                
                .then((data) => {
                    dispatch({ type: 'RECEIVE_ORDERBYORDERID',
                               id,                               
                               orders: data },
                            );
                });
                addTask(fetchTask);
                dispatch({ type: 'REQUEST_ORDERBYORDERID', id});
            }
    }

As you have mentioned calling this method should not impact DOM in any way. however, currently it is causing a problem.

Thanks for your prompt response.

[LaxGulawaniParticipant]

Hi Martin,

Thanks for your inputs, I guess the issue is related to fetching data dynamically for the nested grid.

We just have minor modification in example you have provided as below:

const initrowdetails = (index: number, parentElement: any, gridElement: any, record: any): void => {
            const id = record.uid.toString();
            const nestedGridContainer = parentElement.children[0];
            nestedGrids[index] = nestedGridContainer;
            const orderId = record.id;
            //till below call we can see nestedGridContainer is present on actual DOM
            this.props.requestDetailsByOrderId(orderId);
            // after above line execution nestedGridContainer is removed from actual DOM, which causes exeception during ReactDOM.render at the end of function.

            const ordersbyid = this.props.orders

            const ordersSource = {
                datafields: [
                    { name: 'EmployeeID', type: 'string' },
                    { name: 'ShipName', type: 'string' },
                    { name: 'ShipAddress', type: 'string' },
                    { name: 'ShipCity', type: 'string' },
                    { name: 'ShipCountry', type: 'string' },
                    { name: 'ShippedDate', type: 'date' }
                ],
                id: 'OrderID',
                localdata: ordersbyid
            }
            const nestedGridAdapter = new jqx.dataAdapter(ordersSource);

            if (nestedGridContainer != null) {
                const columns: IGridProps['columns'] = [
                    { text: 'Ship Name', datafield: 'ShipName', width: 200 },
                    { text: 'Ship Address', datafield: 'ShipAddress', width: 200 },
                    { text: 'Ship City', datafield: 'ShipCity', width: 150 },
                    { text: 'Ship Country', datafield: 'ShipCountry', width: 150 },
                    { text: 'Shipped Date', datafield: 'ShippedDate', width: 200 }
                ];

                ReactDOM.render(
                    <JqxGrid width={780} height={200} source={nestedGridAdapter} columns={columns} />,
                    document.getElementById(nestedGridContainer.id)
                );
            }
        };

Please can you suggest why this happens or any alternate way to ensure element is not removed from actual DOM.

Thanks again for your support.

[Author]

Posts