Get gridPanel columns at server side

[Fla]

Hi again :)
Is there a way to retrieve at server side the columns list for a gridpanel?
I've tried to get the grid using

var grid = this.GetCmp<GridPanel>(myGridName);
and it runs, however all properties of the object are empty or null...
For example: grid.Store is always null and so grid.Columns

Note: I need these info in an action called from a button click.

Regards,
Fla

[AndreyChechel]

Hello @Fla,

Let me demonstrate several scenarios showing how component data can be accessed in a DirectEvent handler.
The sample below defines a simple GridPanel and 3 Buttons.

GridPanel.cshtml


<ext-gridPanel id="myGrid"
title="Array Grid"
frame="true">
<columns>
<ext-column text="Company" dataIndex="company" flex="1" />
<ext-column text="Price" dataIndex="price" renderer="Ext.util.Format.usMoney" />
<ext-column text="Change" dataIndex="change" renderer="change" />
</columns>
</ext-gridPanel>

<ext-button text="Update Title">
<directEvents>
<click pageHandler="UpdateTitleClick">
<extraParams>
<ext-add key="newTitle" value="Updated Grid Title" />
</extraParams>
</click>
</directEvents>
</ext-button>

<ext-button text="Get Title">
<directEvents>
<click pageHandler="GetTitleClick">
<extraParams>
<ext-add key="myGrid" value="App.myGrid" mode="Raw" />
</extraParams>
</click>
</directEvents>
</ext-button>

<ext-button text="Get Columns">
<directEvents>
<click pageHandler="GetColumnsClick">
<extraParams>
<ext-add key="columns" value="App.myGrid.columns" mode="Raw" />
</extraParams>
</click>
</directEvents>
</ext-button>


GridPanel.cshtml.cs


public IActionResult OnPostUpdateTitleClick()
{
var myGrid = this.GetCmp<GridPanel>("myGrid");

myGrid.Title = "Updated title";

return this.Direct();
}

public IActionResult OnPostGetTitleClick(GridPanel myGrid)
{
this.X().Toast($"Grid title: '{myGrid.Title}'");

return this.Direct();
}

public IActionResult OnPostGetColumnsClick(string columns)
{
var serializerOpts = new System.Text.Json.JsonSerializerOptions()
{
PropertyNameCaseInsensitive = true
};

var columnModels = System.Text.Json.JsonSerializer.Deserialize<Column[]>(
columns,
serializerOpts
);

var columnNames = columnModels.Select(x => "'" + x.Text + "'");
var columnNamesStr = string.Join(", ", columnNames);

this.X().Toast($"Grid columns: {columnNamesStr}");

return this.Direct();
}


1. The UpdateTitleClick shows how this.GetCmp<>(id) can be used. Indeed, it returns an empty object with only one identifier property set. This method is not able to return more data for a model without providing that information from client-side. Thus, the best scenario for this.GetCmp will be updating properties of a rendered component by the component ID. In the sample above the grid title gets updated.

2. The OnPostGetTitleClick demonstrates how it's possible to pass a model from client-side to a server, so it can access the model properties. By default, only primitive properties are serialized to avoid huge payload sent over the wire, but this behavior can be adjusted using toJSON attribute configured on the component or globally in the Ext.NET middleware options.

3. The OnPostGetColumnsClick handler shows how it's possible to access GridPanel column configuration sent from client-side to a server. Currently it can be done by receiving the configuration into a string and then deserializing the string into the array of Column objects. This sample doesn't look clean enough, so we'll look investigate the possibility to simplify it in the next Ext.NET Classic release.


Hope it helps.

[AndreyChechel]

@Fla one more thing I'd like to mention is - if the grid columns are fixed and are not adjusted on client-side, things become much easier. In this case it'd be more efficient to refactor the GridPanel configuration, so it can be accessible from the direct event handler. No need to pass that config from client-side, it's already known on the server.

GridPanel.cshtml


<ext-gridPanel id="myGrid"
title="Array Grid"
frame="true"
columns="Model.Columns">
</ext-gridPanel>

<ext-button text="Get Columns">
<directEvents>
<click pageHandler="GetColumnsClick" method="POST" />
</directEvents>
</ext-button>


GridPanel.cshtml.cs


public class GridPanelModel : PageModel
{
public List<Column> Columns = new List<Column>
{
new Column { Text="Company", DataIndex="company", Flex=1 },
new Column { Text="Price", DataIndex="price", Renderer="Ext.util.Format.usMoney" },
new Column { Text="Change", DataIndex="change", Renderer="change" }
};

public IActionResult OnPostGetColumnsClick()
{
var columnNames = Columns.Select(x => "'" + x.Text + "'");
var columnNamesStr = string.Join(", ", columnNames);

this.X().Toast($"Grid columns: {columnNamesStr}");

return this.Direct();
}
}