Sub grid in ext.net

[user2022]

Hello,

I want to create the sub grid with edit mode differently for main grid and sub grid like below


The main grid will have edit mode with component (like: combo box)
The sub grid will also have some component differently.

Please show me how to implement such a multi-level grid like that or direct me to something else which can handle the situation better.

Thanks a lot in advance.

[fabricio.murta]

Hello @user2022!

How much of that multi-level grid panel do you have at the moment? You're beginning with it still?

The first thing that comes to mind is using a RowExpander with a grid within it. How grid editors will behave will depend on each grid setup. You probably don't want to display two sub-grids at once, as this could not just be confusing to the user, but also require extra care not to repeat IDs from the sub-grids, or keep each one to individual IFRAMEs.

That said, I believe you could basically combine these two examples:

- Multi Level Grid Panel using Row Expander plugin.
- Cell Editing Grid Panel Plugin.

Watch out for some known limitations using multi-level grid panels with row expander (they are mentioned in the example above).

EDIT: This HasMany association for grids might interest you as well, please take a look at this example to see if it adds anything to the requirements you may have: Association - Has Many - Simple

Hope this helps!

[user2022]

Hello @fabricio.murta,

The sub grid has many limitation which I think it is not suitable for our needs, so basically I want to create a custom grid which has multiple row level.

The parent row level will have edit mode with different component for editing than the child level and I need maximum 3 levels.

My other idea is using custom template with 2 way data binding for the grid panel so I can customize the parent rows and child rows base on my needs.

Unfortunately, i can not find any clear documentation or examples for this idea, i start with the very simple code below:
DATA STORE

        X.Store().ID("storeData").Fields(f =>
        {
            f.Add("ID", ModelFieldType.Int);
            f.Add("ParentID", ModelFieldType.Int);
            f.Add("FullName");
            f.Add("CallingName");
            f.Add("DateOfBirth", ModelFieldType.Date);
        })
        .Data(new[] {
            new { ID = 1, ParentID = 0, FullName = "Jone Doe", CallingName="Jone", DateOfBirth = DateTime.Now.AddYears(-20) },
            new { ID = 2, ParentID = 0, FullName = "Will Smith", CallingName="Will", DateOfBirth = DateTime.Now.AddYears(-40) }
        })

GRID

        X.GridPanel().Frame(true).Title("GRID WITH CUSTOM TEMPLATE")
            .StoreID("storeData")
            .ColumnModel(
                X.Column().Text("ID").DataIndex("ID"),
                X.Column().Text("FullName").DataIndex("FullName").Editor(X.TextField())
            )
            .View(X.GridView().Tpl(X.XTemplate().Html("<tpl><tr><td>{ID}</td><td>{FullName}</td></tr></tpl>")))
            .Plugins(X.RowEditing().AutoCancel(true).ClicksToEdit(2))

but I get the error in javascript:

Uncaught TypeError: Cannot read properties of null (reading 'childNodes')

Please help

[fabricio.murta]

Hello again, @user2022!

What about doing something like Grid Panel - Update - Batch example? Basically a grid panel that you'd click or double-click a row and shows a window with either a grid or a form with details on the cells.

As for your example, there's some issue when using the XTemplate the way you do. It's not necessarily wrong, but probably there's another way to still use the template and bind data to the grid, I just need to check with some working examples and will get back to you.

We will post a follow up soon.

[fabricio.murta]

Hello once again, @user2022!

I've checked your example and I don't quite get what you want with it.

When you set:

.View(X.GridView().Tpl(X.XTemplate().Html("<tpl><tr><td>{ID}</td><td>{FullName}</td></tr></tpl>")))

in a Grid Panel's View, what you're doing is, replacing the actual grid, columns, lines, by the template (HTML table rows and columns). In fact, you're "deconstructing" the "grid aspect" of the grid, thus all its features. The template as you used is intended to, for instance, show structured data into a DataView component. Once the template takes place in your example, there's no way the grid would know what is a column and much less how to add a row editor to the table rows, so it's completely bound to break... well, as it did!..

I believe the example I linked in the previous post illustrates well a form updating a grid and the other way around, but perhaps you wanted something to do with grid-to-grid, which you can see in the Data Binding - Chained Stores example.

And for some already in MVC formatting, you have some HasMany Association examples in MVC Examples Explorer that might just help.

Notwithstanding, MVC EE also got this DataBinding example with a grid expanding its row into detailed info based on the row's record. Mixing that one with the two-way feature (WebForms two-way example), the expanded row could be a form to change the records. Instead of expanding the row, it could be changed to open a window with the data, so it could be changed and reflected immediately back in the window (back to the last post's linked example).

So, options are plenty, it's just a matter of choosing the one you're most comfortable with.

Hope this helps!