View Full Version : [CLOSED] GridPanel bind to complex JSON results

Apr 03, 2013, 8:09 PM
I am attempting to bind GridPanel columns to a complex JSON result, and have no idea how to represent the binding in a DataIndex. I've tried various things in terms of syntax and cannot get a result. I've considered cheating by using a column renderer, but I don't know if that is the best way to go. Flattening the data structure I am serializing is difficult because it's being generated from multiple Entity Framework entities.

In any case, the basic structure of the JSON object is:

Data Model

var object = {
propertyA: '',
propertyB: '',
properties: [
{ otherA: '', otherB: '' },
{ otherC: '', otherD: '' }

So note, I have an object with several properties, than an array of other objects. I need to be able to create a column model like:

Column Model

Property A, Property B, Other A, Other B, Other C, Other D

Creating the column model is easy, I just can't figure out how to map DataIndex. What are my options? I've searched these forums and even extjs forums and haven't found a reliable solution.

Apr 03, 2013, 8:39 PM
I found different ways of mapping fields by modifying the JsonReader configuration. I do not think using a column renderer is a viable course of action for me, because I do not know how many items will be in the properties array and during rendering it will be somewhat difficult (or hacked) to tell which element of the properties array I am rendering and which property of that element to render.

I am currently modifying the grid column model dynamically through a direct method.

Is it possible to pass in the current store configuration via that same direct method, and then modify the store's JSON reader configuration server-side? This could solve the problem I think, because I can generate the mapping configuration from the server without much of a problem.

Apr 04, 2013, 12:57 AM

Sorry, I don't quite understand, you want to use HasMany association or you want to have just array of objects?

Is it possible to pass in the current store configuration via that same direct method, and then modify the store's JSON reader configuration server-side? This could solve the problem I think, because I can generate the mapping configuration from the server without much of a problem.

What you want to pass about current store configuration? I don't thing that it's possible to change reader configuration but we'll check it.

Apr 04, 2013, 3:10 AM
Also, please take a look at these examples:

Apr 04, 2013, 12:37 PM
I took a look at the samples and I am struggling to understand how I can apply them. Grid reconfiguration isn't my problem, I am already doing that with a DirectMethod. I think I can solve this gracefully enough with data preparation; I wanted to avoid using JavaScript if at all possible but it looks like I won't have a choice either way.

I found another solution that patches extjs to support JSONpath expressions in DataIndex, but I will avoid that to prevent potential incompatibilities with Ext.NET's extjs and the patch:


I'm sorry I wasn't so clear in my original explanation, all I am trying to do is flatten a hierarchical object like this:

var log = {
Name: 'Test',
Description: 'Test Object',
Channels: [
{ Name: 'A', Process: 54, Setpoint: 50 },
{ Name: 'B', Process: 61, Setpoint: 60 }

So that the columns model represents:

Name, Description, Channel A Process, Channel A Setpoint, Channel B Process, Channel B Setpoint

As you can see, I just want to flatten the hierarchy by creating a column for each property of each channel object. I am not having a problem creating the column model, I am just having a problem mapping the channel properties to the created columns via DataIndex. It looks like I could solve this problem using the principles in the data preparation sample, I just feel it tightly couples the user interface to the underlying data model too tightly. I'd prefer if I can send over the data mapping from the server so the client needs little knowledge of the data model. The other issue I foresee is I have an array of objects rather than just a single complex object.

If that means changing the JSON reader configuration via DirectMethod or some other mechanism, I am okay with that. If the server has control over the data presentation model that is more acceptable because changing the user interface or scripting is more expensive and inconvenient.

Apr 04, 2013, 1:27 PM
I have solved my problem by reconfiguring the grid's store model at the same time I am generating the column model for the grid via a DirectMethod. The basic process for populating my grid is:

Click refresh button
Direct request to controller to reconfigure grid
Construct model fields based on nested data model
Construct column fields with data index to added model fields
Return direct result
Request grid data

Basically, I am re-configuring the grid and then requesting the data. I am using the Mapping property on the ModelField instances to map to the correct channel property.

So for the example data I gave, a matching column field definition for the first channel could be:

ModelField field = new ModelField() { Name = "ChannelASetpoint", Mapping = "Channels[0].Setpoint" };


Column column = new Column() { Text = "Channel A SP", DataIndex = "ChannelASetpoint" };

In my code I am generating the Name and Mapping of the model field through string manipulation in a loop. This is an acceptable solution because it does not require the client-side to understand or realize the data model, and allows me to flatten the hierarchy as much as necessary.

You can mark this as closed and I will try to answer any questions on the precise implementation.

Apr 05, 2013, 6:13 AM
Hi @chrish,

First of all, thank you for: the interesting question/scenario, the detailed descriptions and the willingness to share the solution. We much appreciate it.

Well, you are on the right way. I think constructing a Model and Columns according to the data is the only appropriate/possible solution.

The only bad thing in your solution is two requests: one for constructing a Model and Columns, another - for the data.

Fortunately, Sencha provided a convenient way for such a scenario. It allows to return metadata for a load request. We incorporated it into Ext.NET and here is an example.

Currently, this example is in SVN only, but it will be available online with the upcoming v2.2 release.

So, please take a look at this example. You will need to replace:

MetaConfig metaData = MetaConfig.From(data);
with your code constructing a Model and Columns.