Have a grid ( or grid like ) in the rowbody of a grid-row

[ThierryC]

i would like to have a grid -like capability in the row body .. i know one can create a row body that contains table of just HTML data .. but is there a way, or how would you do it to have a variable number of 'rows' in the row body


the example if have ..

i have a grid showing all the available stock for a customer ,
fe.

  article  - description - ready to ship-  in warehouse - suppliernbr - supplier name
+ 12345678 my article  -    2000                5000                -                    -

it is for medical but the stock is where lotnbr and expiry date is important..

so i had the idea to show in the row expand the quantities of the stock, but grouped on lot / expirydate

article  - description - ready to ship-  in warehouse - suppliernbr - supplier name
> 12345678 my article  -    2000                5000                -             -
        Lotnbr  - exp date 1 - Qty to ship -   Qty on stock
        ABCLOT1    2025-10-30  -  1500
        ABCLOT2    2025-10-25  -  500
        ABCLOT3    2026-01-30  -      0    - 5000
?

is something like that possible with row expand, or not .. or how would you create the UI to the user
?

[Johnny Major]

If the record has the data you want to present in the row body, you can do that more easily within the JavaScript section instead of the HTML markup section.

The JavaScript code just needs to return the markup, so it will build the markup for however many rows are needed and return it.

Screenshot 2025-10-30 at 8.22.55?AM.png

With that said, maybe the Tree widget would better suit this, with the first level as your main row and the second level as the lots, etc.?

[ThierryC]

so if i understand well..
if i can have in my SQL as a result a JSON_object like generated below, i should be able to create via Javascript a HTML markup to be displayed/

am i right ? will this then be possible ? any experience with that?

image.png
image.png??

[Johnny Major]

Here is a quick example and the Valence Assistant should help you with the JavaScript if you need it.

Data Source SQL:

WITH orderinfo AS (
  SELECT
    cusno,
    cast(
      '[' concat listAgg(
        json_object(
          'status' value trim(status),
          'orderNumber' value orderno,
          'scheduleDate' value schdate
        ),
        ','
      ) within group(
        ORDER BY
          schdate
      ) concat ']' AS varchar(32000)
    ) AS orders
  FROM
    demoord_h
  GROUP BY
    cusno
)
SELECT
  mst.cusno AS cusno,
  mst.cname AS cname,
  ord.orders AS orders
FROM
  democmast AS mst
  LEFT JOIN orderinfo AS ord ON ord.cusno = mst.cusno

Grid Row Body JavaScript:

let orders = rec.get('ORDERS');
let markup = '';

if (!Valence.isEmpty(orders)) {
    let valid = true;
    
    try {
        orders = JSON.parse(orders);
    } catch (e) {
        valid = false;
        markup = '<div>Invalid orders</div>';
    }
    
    if (valid) {
        if (!Array.isArray(orders) || orders.length === 0) {
            markup = '<div>No orders</div>';
        } else {
            const tableStyle = 'width:100%; border-collapse:collapse; font-family:inherit; font-size:12px;';
            const thStyle = 'text-align:left; padding:6px 12px; border-bottom:1px solid #e5e7eb; color:#374151; background:#f9fafb; white-space:nowrap;';
            const tdStyle = 'padding:6px 12px; border-top:1px solid #f3f4f6; color:#111827; white-space:nowrap;';
            
            function rowMarkup(o) {
                return `
                <tr>
                    <td style="${tdStyle}">${o.status || ''}</td>
                    <td style="${tdStyle}">${o.orderNumber || ''}</td>
                    <td style="${tdStyle}">${o.scheduleDate || ''}</td>
                </tr>
                `;
            }
            
            const rows = orders.map(rowMarkup).join('');

            markup = `
                <table cellspacing="0" cellpadding="0" style="${tableStyle}">
                    <thead>
                        <tr>
                            <th style="${thStyle}">Status</th>
                            <th style="${thStyle}">Order Number</th>
                            <th style="${thStyle}">Scheduled Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${rows}
                    </tbody>
                </table>
            `;
        }
    }
}

return markup;

Screenshot 2025-10-30 at 2.18.39?PM.png

[ThierryC]

wow... perfect example..

thx

[ThierryC]

one sidemark.. in your code your using javascript to do HTML markup .. would it be an idea to use Et.Xtemplate instead... or would this have more negative impact?

[Johnny Major]

Yes, in my example I’m not using Ext.XTemplate, however, there wouldn’t be a negative impact if you did
?