SQL to Ext Grid

[m0f]

Hello friends,

I'm new here on everything which is .Net. I have experience with ExtJs, but this is my first time creating an webtool with Ext.Net and i have a little problem which i dont get how to fix it.
I have an webtool which has an TreeGrid where the data is get from the MSSQL and is populate correctly. After clicking on a child from that treegrid, an formpanel will show up with some tabs. On those tabs it will be some textfields with a gridpanel. My problem is that i can't bring the data for GridPanel. I dont understand what i'm doing wrong.
I'm using the Ext.Net v7.2.0 Classic.

I will drop below a few codes to see what i'm talking about.

Here is the GridPanel View:

<ext-container layout="HBox">
<defaults>
<ext-add key="header" value="false" mode="Raw" />
<ext-add key="frame" value="true" mode="Raw" />
<ext-add key="width" value="100" mode="Raw" />
</defaults>
<items>


<!-- Configure a GridPanel and reference the Store above -->
<ext-gridPanel
title="Grouped Header"
width="800"
height="300"
frame="true">
<!-- Configure a Store -->
<store>
<ext-store id="Store1" data="Model.GridPanel" autoLoad="true">
<fields>
<ext-integerDataField name="CommentId"/>
<ext-integerDataField name="CompensationPeriodKey"/>
<ext-stringDataField name="Title" />
<ext-stringDataField name="Comment" />
<ext-booleanDataField name="Print" />
</fields>
</ext-store>
</store>
<columns>
<ext-column text="#" dataIndex="CommentId" />
<ext-column text="Print" dataIndex="Print" />
<ext-column text="Title" dataIndex="Title" />
<ext-column text="Comment" dataIndex="Comment" flex='1' />
</columns>
<bbar>
<ext-toolbar>
<items>
<ext-button text="Print" iconCls="x-md md-icon-print" handler="this.up('grid').print();" />
</items>
</ext-toolbar>
</bbar>
</ext-gridPanel>
</items>
</ext-container>

And here is the Controller:

namespace MyApp.Controllers
{
public class Controller: Controller
{
public IActionResult Index(int compPeriod)
{
// load entity for selected key
TREEGRID entity = null;
using (var context = new MyDbContext())
{
entity = context.TREEGRID.Include(per => per.GridPanel).FirstOrDefault(per => per.DataPeriodKey == compPeriod);
}
return View("Index", entity);
}
}
}

And my return is:
25503

[fabricio.murta]

Hello @m0f, and welcome to Ext.NET forums!

For what I can see in your example you are returning the model for the tree grid but not for the grid panel.

You should assign to the index page in controller code something like (if you don't want to define a class for it):



return View("Index", new { TreeGrid = entity, GridPanel = <gridpanel_data_variable> });


In case you need to fetch the grid panel data depending on the selected node, you simply cannot provide grid panel data during initial page load. You'll have to implement a query to return grid data given the selected node.

You can, of course, especially if they are just a few nodes each with a couple grid rows, return the "list of grid panel data" and simply assign it as the user selects, but still, you'd need to return the grid data, and also populate the grid once a node is selected.

Then you can use either data binding (we're talking client side here, so same you'd do in pure Ext JS) or bind the click/select event in the tree grid to fetch the preloaded grid data given the selected ID, into the target grid.

If you're still lost with that info, I suggest you draw a simple test case to reproduce the most basic of your scenario with mock data (no SQL nor real production data), and then share here that code sample, you should be able to wrap something really simple with a few tens of lines per code file (view, controller and unlikely model). Otherwise we won't be able to tell you what exactly you need where to, say, populate the grid on select, or fetch server data on-demand.

I could say a lot other alternatives here but it would probably only bring more confusion, so if you we are on a test case that indeed does what you want I believe we could do a much better explanation.

You may already know that but, just in case, we do have several examples in our v7 examples explorer[/var]. You can also run the website locally by cloning [url=https://github.com/extnet/examples.ext.net/]its github public repository (https://examples.ext.net/) locally and building it.

We also do have a comprehensive list of examples for Ext.NET Version 5's WebForms (https://examples5.ext.net) and MVC (https://mvc5.ext.net/) that may prove useful in understanding some advances concepts. Just keep in mind v5 and v7 would differ syntax considerably. The overall concept though, is commonplace between the projects.

Hope this helps!

[m0f]

Hey Fabricio!

Thank you a lot for all the information!
i have successful full the table with data by modifying in:

In Controller i have erased everything and the final code looks like:

namespace MyApp.Controllers
{
public class Controller : Controller
{
public IActionResult Index(int compPeriod)
{
return View("Index", new MyGridModel(compPeriod));
}
}
}

And i added to MyGridModel:

namespace MyApp.Models
{
public class MyGridModel : PageModel
{
public TREEGRID_DATA CompPeriod;

public List<object> TREEGRID_DATA_COMMENTS;

public MyGridModel(int TreeGridKey)
{
// load entity for selected key
TREEGRID_DATA entity = null;

using (var context = new MyDbContext())
{
entity = context.TREEGRID_DATA.Include(per => per.TREEGRID_DATA_COMMENTS)
.Include(per => per.GRID_DATA)
.ThenInclude(griddata => griddata.GRID_DATA2)
.FirstOrDefault(per => per.TREEGRID_DATA_Key == TreeGridKey);


}

CompPeriod = entity;

TREEGRID_DATA_COMMENTS= new List<object>();

foreach (var comment in entity.TREEGRID_DATA_COMMENTS)
{
TREEGRID_DATA_COMMENTS.Add(new object[] { comment.CommentId, comment.CompensationPeriodKey, comment.Title, comment.Comment, comment.Print });
}

}

}
}


And is working.

Thank you very much!

[fabricio.murta]

Glad you could figure out what was left in your scenario, thanks for the feedback!