[CLOSED] How to use Row Widget Plugin?

[plok77]

We're having trouble making use of the Row Widget Plugin. We want to display a grid of child rows when a row in the main grid is expanded. The v7 Examples Site doesn't have an example of how to do this.

Here is the code for our page:


@page
@model SPS.Web.Pages.Auth.RowWidgetTestModel
@{
ViewData["Title"] = "GridPanel RowWidget";
}
<ext-viewport layout="Anchor">
<items>
<ext-gridPanel title="GridPanel" width="960" height="640" frame="true">
<store>
<ext-store storeId="StoreCompanies" data="Model.GridData.ToList<object>()">
<fields>
<ext-integerDataField name="id" />
<ext-stringDataField name="name" />
<ext-stringDataField name="address" />
<ext-dataField name="contacts" type="Array" />
</fields>
</ext-store>
</store>
<columns>
<ext-column text="Id" dataIndex="id" width="80" />
<ext-column text="Name" dataIndex="name" width="100" />
<ext-column text="Address" dataIndex="address" width="150" />
</columns>
<plugins>
<ext-rowWidgetPlugin>
<widget>
<ext-gridPanel autoLoad="true">
<customConfig>
<ext-add key="store">
<ext-add key="data" value="{record.contacts}"></ext-add>
</ext-add>
</customConfig>
<bind>
<ext-add key="title" value="Contacts"></ext-add>
</bind>
<columns>
<ext-column text="Id" dataIndex="id" width="50"></ext-column>
<ext-numberColumn text="Name" dataIndex="name" width="150"></ext-numberColumn>
<ext-numberColumn text="Email" dataIndex="email" width="150"></ext-numberColumn>
</columns>
</ext-gridPanel>
</widget>
</ext-rowWidgetPlugin>
</plugins>
</ext-gridPanel>
</items>
</ext-viewport>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace SPS.Web.Pages.Auth
{
public class RowWidgetTestModel : PageModel
{
public List<Company> GridData { get; set; }

public void OnGet()
{
this.GridData ??= new List<Company>
{
new Company
{
Id = 111, Name = "3m Co", Address = "Colombus",
Contacts = new List<Company.Contact>
{
new Company.Contact
{
Id = 1,
Name = "John Patt",
Email = "test89@test.com"
},
new Company.Contact
{
Id = 2,
Name = "Rod Max",
Email = "test53@test.com"
},
new Company.Contact
{
Id = 3,
Name = "Mary H",
Email = "test123@test.com"
}
}
},
new Company
{
Id = 112, Name = "General Electric Company", Address = "London",
Contacts = new List<Company.Contact>
{
new Company.Contact
{
Id = 4,
Name = "Jeff Earls",
Email = "test223@test.com"
},
new Company.Contact
{
Id = 5,
Name = "Pam Dam",
Email = "test44@test.com"
}
}
}
};
}

public class Company
{
public int Id { get; set; }
public string Name { get; set; }
public string Address { get; set; }
public List<Contact> Contacts { get; set; }

public class Contact
{
public int Id { get; set; }
public string Name { get; set; }
public string Email { get; set; }
}
}

}
}


When the page runs, the following error is reported in the browser on expanding a row:


Uncaught Error: You're trying to decode an invalid JSON String: {record.contacts}
at new Ext.Error (ext-all-debug.js:2770)
at Function.raise (ext-all-debug.js:2835)
at Object.Ext.raise (ext-all-debug.js:2916)
at Object.Ext.JSON.me.decode (ext-all-debug.js:57326)
at me.getRoot (extnet-all-debug.js:11373)
at constructor.me.getRoot (extnet-all-debug.js:11372)
at constructor.readRecords (ext-all-debug.js:98356)
at constructor.read (ext-all-debug.js:98276)
at constructor.read (ext-all-debug.js:99713)
at constructor.doExecute (ext-all-debug.js:91947)

Please can you advise what changes we need to make in order to get this sample to work?

Thanks

Paul

[fabricio.murta]

Hello Paul!

Interesting find, I don't remember seeing this plugin introduced to Ext JS at all! We historically have been using the Row Expander plugin but this one might mostly replace it and it even has a nice expander handle column.

We'll take a look at your test case and get back to you with some means to make it run, so please bear with us a little more!

The Senha documentation entry on Ext.grid.plugin.RowWidget (https://docs.sencha.com/extjs/7.3.1/classic/Ext.grid.plugin.RowWidget.html) has a working fiddle for this (https://fiddle.sencha.com/#fiddle/37bg&view/editor) and we may just be able to base on this working copy to tell what's left on your test case.

Thanks for providing the test case by the way, it helps a lot to know what you need!

We'll post back soon.

[plok77]

Can I get an update on this issue please?

Thanks

Paul

[fabricio.murta]

Hello Paul!..

I think I have forgotten to click the "post" button and closed the tab! Sorry! I will never recall what I filled in the answer!

Basically you added bind expressions outside bind scope and declared things in bind scope without using a single bind reference...

Anyways, what matters I still have on hand: the working version of the test case.

There you go:



@{
ViewData["Title"] = "GridPanel RowWidget";
Layout = null;
}

<!DOCTYPE html>
<html>
<head>
<title>
GridPanel's RowWidget plug in - Ext.NET Examples
</title>
</head>
<body>

<ext-viewport layout="Anchor">
<items>
<ext-gridPanel title="GridPanel" width="960" height="640" frame="true">
<store>
<ext-store storeId="StoreCompanies" data="Model.GridData.ToList<object>()">
<fields>
<ext-integerDataField name="id" />
<ext-stringDataField name="name" />
<ext-stringDataField name="address" />
<ext-dataField name="contacts" type="Array" />
</fields>
</ext-store>
</store>
<columns>
<ext-column text="Id" dataIndex="id" width="80" />
<ext-column text="Name" dataIndex="name" width="100" />
<ext-column text="Address" dataIndex="address" width="150" />
</columns>
<plugins>
<ext-rowWidgetPlugin>
<widget>
<ext-gridPanel title="Contacts">
<bind>
<ext-add key="store" value="{record.contacts}" />
</bind>
<columns>
<ext-column text="Id" dataIndex="id" width="50"></ext-column>
<ext-column text="Name" dataIndex="name" width="150"></ext-column>
<ext-column text="Email" dataIndex="email" width="150"></ext-column>
</columns>
</ext-gridPanel>
</widget>
</ext-rowWidgetPlugin>
</plugins>
</ext-gridPanel>
</items>
</ext-viewport>
</body>
</html>


Code behind/model is the same as you provided.

Hope this helps! Let me know if something is not clear and I'll try to recall what I've written in the original, never-sent, answer!

[fabricio.murta]

oh yes, and you were feeding strings to number columns... so they were just blank. :)

I'm really sorry the answer was not sent and I am to be blamed for that. Thanks for sending the "bump" to the thread! I remember I had it answered the next day following the first response.

[plok77]

Thanks. We've checked your sample and it has solved our problem.

Regards

Paul

[fabricio.murta]

Thanks for the feedback, glad it helped!