[CLOSED] [Razor] 2.1 in MVC4 Grid using JSON reader with root property

[thesvr]

Hi,

I cannot get a working grid when the data is loaded from a JSON webservice using the root property. To get a simplified example I converted the example: https://examples2.ext.net/#/GridPane...ON_WebService/ to MVC 4 razor as:

View:

@Html.X().ResourceManager()
@(Html.X().GridPanel()
    .Title("TEST")
    .Height(300)
    .Store(store => store.Add(Html.X().Store()
        .PageSize(5)
        .Model(model => model.Add(Html.X().Model()
            .Fields(fields => {
                fields.Add(Html.X().ModelField().Name("Common"));
                fields.Add(Html.X().ModelField().Name("Botanical"));
                fields.Add(Html.X().ModelField().Name("Light"));
                fields.Add(Html.X().ModelField().Name("Price"));
                fields.Add(Html.X().ModelField().Name("Availability"));
                fields.Add(Html.X().ModelField().Name("Indoor"));
            })
        ))

        .AutoLoadParams(AP =>
        {
            AP.Add(Html.X().Parameter()
                .Name("start")
                .Value("0")
                .Mode(ParameterMode.Raw)
                );
            AP.Add(Html.X().Parameter()
                .Name("limit")
                .Value("5")
                .Mode(ParameterMode.Raw)
                );
        })

        .Proxy(proxy => proxy.Add(Html.X().AjaxProxy()
            .Url("/API/test")
            .Json(true)
            .Reader(reader =>
                    Html.X().JsonReader()
                    .Root("d.data")
                    .TotalProperty("d.total")
            )
        ))
    ))

    .ColumnModel(columnModel =>
    {
        columnModel.Columns.Add(Html.X().Column()
                .Text("Light")
                .DataIndex("Light")
                .Width(180));
        columnModel.Columns.Add(Html.X().Column()
                .Text("Botanical")
                .DataIndex("Botanical")
                .Width(180));
        columnModel.Columns.Add(Html.X().Column()
                .Text("Common Name")
                .DataIndex("Common")
                .Width(180));
        columnModel.Columns.Add(Html.X().Column()
                .Text("Price")
                .DataIndex("Price")
                .Width(180));
        columnModel.Columns.Add(Html.X().Column()
                .Text("Indoor")
                .DataIndex("Indoor")
                .Width(180));
        columnModel.Columns.Add(Html.X().Column()
                .Text("Available")
                .DataIndex("Availability")
                .Width(180));
    })
        
    .BottomBar(BB => {
        BB.Add(Html.X().PagingToolbar()
            .DisplayInfo(true)
            .DisplayMsg("Displaying plants {0} - {1} of {2}")
            .EmptyMsg("No plants to display")
            );
        
    })
)

The grid is shown without data. I see that their is a http request to the json webservice with a valid JSON response. I don't get any errors but the data is not displayed in the grid.

What am I missing?

Sander

[Vladimir]

Can you post text of response?
Are you sure that data is wrapped by 'd'?

[thesvr]

Hi,

In my own implementation i am using a REST service. To eliminate any issues regarding JSON format I used the following code for testing. The code's output is equal to the output of the examples.ext.net webservice.

            sJSON = @"{""d"":{""data"":[{""Common"":""Adder\u0027s-Tongue"",""Botanical"":""Erythronium americanum"",""Zone"":""4"",""ColorCode"":""E1E1E1"",""Light"":""Shade"",""Price"":9.58,""Availability"":""\/Date(1144879200000)\/"",""Indoor"":true},{""Common"":""Anemone"",""Botanical"":""Anemone blanda"",""Zone"":""6"",""ColorCode"":""E7E7E7"",""Light"":""Mostly Shady"",""Price"":8.86,""Availability"":""\/Date(1167087600000)\/"",""Indoor"":true},{""Common"":""Bee Balm"",""Botanical"":""Monarda didyma"",""Zone"":""4"",""ColorCode"":""E1E1E1"",""Light"":""Shade"",""Price"":4.59,""Availability"":""\/Date(1146607200000)\/"",""Indoor"":true},{""Common"":""Bergamot"",""Botanical"":""Monarda didyma"",""Zone"":""4"",""ColorCode"":""E1E1E1"",""Light"":""Shade"",""Price"":7.16,""Availability"":""\/Date(1146088800000)\/"",""Indoor"":true},{""Common"":""Black-Eyed Susan"",""Botanical"":""Rudbeckia hirta"",""Zone"":""Annual"",""ColorCode"":""FFFFFF"",""Light"":""Sunny"",""Price"":9.80,""Availability"":""\/Date(1150581600000)\/"",""Indoor"":false}],""total"":36}}";

            return new HttpResponseMessage()
            {
                Content = new StringContent(sJSON, System.Text.Encoding.UTF8, "application/json")

            };

[Vladimir]

In any way, can you post reponse text?

[Vladimir]

You did not add a reader to Reader collection
Please use the following code

.Reader(reader =>
                {
                    reader.Add(
                        Html.X().JsonReader()
                        .Root("d.data")
                        .TotalProperty("d.total")
                    );
                })

or

.Reader(
                    Html.X().JsonReader()
                        .Root("d.data")
                        .TotalProperty("d.total")
                )

[thesvr]

The response is:

{"d":{"data":[{"Common":"Adder\u0027s-Tongue","Botanical":"Erythronium americanum","Zone":"4","ColorCode":"E1E1E1","Light":"Shade","Price":9.58,"Availability":"\/Date(1144879200000)\/","Indoor":true},{"Common":"Anemone","Botanical":"Anemone blanda","Zone":"6","ColorCode":"E7E7E7","Light":"Mostly Shady","Price":8.86,"Availability":"\/Date(1167087600000)\/","Indoor":true},{"Common":"Bee Balm","Botanical":"Monarda didyma","Zone":"4","ColorCode":"E1E1E1","Light":"Shade","Price":4.59,"Availability":"\/Date(1146607200000)\/","Indoor":true},{"Common":"Bergamot","Botanical":"Monarda didyma","Zone":"4","ColorCode":"E1E1E1","Light":"Shade","Price":7.16,"Availability":"\/Date(1146088800000)\/","Indoor":true},{"Common":"Black-Eyed Susan","Botanical":"Rudbeckia hirta","Zone":"Annual","ColorCode":"FFFFFF","Light":"Sunny","Price":9.80,"Availability":"\/Date(1150581600000)\/","Indoor":false}],"total":36}}

[Vladimir]

Thanks, please see my last answer

[thesvr]

Hi, I missed that one, this solved the issue, thx! I was really stuck because it worked without root property. But in this case probably a default reader is used and the reader i defined incorrectly was ignored?

[Vladimir]

yes, in your sample the store was rendered without the reader