Json data does not Render in the Grid (MVC)

[Akaize]

Hi guys, I'm new here, and need some advice.

This is the Function that return Json data. Both ways don't work. The grid is empty

Code: [Select]

public ActionResult Acao1(string callback)
{
var bb = Dashboard.lstValoresA;

StringBuilder sb = new StringBuilder(callback + @"({""data"":");

JavaScriptSerializer js = new JavaScriptSerializer();

string json = js.Serialize(bb);
sb.Append(json);
sb.Append("})");

return this.Content(sb.ToString(), "text/text");

//return Json(Dashboard.lstValoresA, JsonRequestBehavior.AllowGet);
}
Result

({"data":[{"ano":2012,"mes":1,"dia":1,"lucro":200},{"ano":2012,"mes":1,"dia":2,"lucro":600},{"ano":2012,"mes":1,"dia":3,"lucro":300},{"ano":2012,"mes":1,"dia":4,"lucro":400},{"ano":2012,"mes":1,"dia":5,"lucro":500},{"ano":2012,"mes":1,"dia":6,"lucro":900},{"ano":2012,"mes":1,"dia":7,"lucro":100},{"ano":2012,"mes":1,"dia":8,"lucro":500},{"ano":2012,"mes":1,"dia":9,"lucro":500},{"ano":2012,"mes":1,"dia":10,"lucro":500},{"ano":2012,"mes":1,"dia":11,"lucro":200},{"ano":2012,"mes":1,"dia":12,"lucro":600},{"ano":2012,"mes":1,"dia":13,"lucro":300},{"ano":2012,"mes":1,"dia":14,"lucro":400},{"ano":2012,"mes":1,"dia":15,"lucro":500},{"ano":2012,"mes":1,"dia":16,"lucro":900},{"ano":2012,"mes":1,"dia":17,"lucro":100},{"ano":2012,"mes":1,"dia":18,"lucro":500},{"ano":2012,"mes":1,"dia":19,"lucro":500},{"ano":2012,"mes":1,"dia":20,"lucro":500},{"ano":2012,"mes":1,"dia":21,"lucro":200},{"ano":2012,"mes":1,"dia":22,"lucro":600},{"ano":2012,"mes":1,"dia":23,"lucro":300},{"ano":2012,"mes":1,"dia":24,"lucro":400},{"ano":2012,"mes":1,"dia":25,"lucro":500},{"ano":2012,"mes":1,"dia":26,"lucro":900},{"ano":2012,"mes":1,"dia":27,"lucro":100},{"ano":2012,"mes":1,"dia":28,"lucro":500},{"ano":2012,"mes":1,"dia":29,"lucro":500},{"ano":2012,"mes":1,"dia":30,"lucro":500},{"ano":2012,"mes":1,"dia":31,"lucro":200}]})

This is the object (Yes, I just take the example and modified it a little bit) It's a lab

Code: [Select]

            var dataModel = {
                location: "remote",
                sorting: "local",
                dataType: "JSON",
                method: "GET",
                sortIndx: "Rank",
                url: "@Url.Action("Acao1", "Grid")",
                getData: function (dataJSON) {
                    return { data: dataJSON.data };
                }
            };

            var obj = {
                numberCell: { resizable: true, title: "#", width: 30, minWidth: 30 },
                title: "Exemplo",
                filterModel: { header: true, type: 'local' },
                scrollModel: { autoFit: true, theme: true },

                colModel: [
                    { title: "", minWidth: 27, maxWidth: 27, type: "detail", resizable: false, editable: false /* no need to mention dataIndx */ },
                    {
                        title: "Rank", width: 100, dataType: "string",
                        filter: {
                            type: 'textbox',
                            condition: 'begin',
                            listeners: ['keyup'],
                        }
                    },
                    { title: "Company", width: 200, dataType: "string" },
                    { title: "Revenues ($ millions)", width: 150, dataType: "float", align: "right" },
                    { title: "Profits ($ millions)", width: 150, dataType: "float", align: "right" }
                ],

                dataModel: dataModel,

                pageModel: { type: "local", rPP: 20, strRpp: "{0}", strDisplay: "{0} to {1} of {2}" },
                hwrap: false,
                virtualX: true,
                virtualY: true,
                // freezeBorders: true,
                hoverMode: 'row',
                collapsible: { on: false },
                scrollModel: { pace: 'fast', autoFit: true, theme: true },
                numberCell: { show: false },
                historyModel: { on: true },
                roundCorners: false,
                // rowBorders:false ,

                postRenderInterval: 100,
                detailModel: {
                    init: function (ui) {
                        var rowData = ui.rowData,
                            orderID = ui.rowData["Rank"],
                        //get markup of the detail template.
                            $tmpl = $("#tmpl"),
                            html = $tmpl.html();
                        for (var key in rowData) {
                            var cellData = (rowData[key] == null) ? "" : rowData[key];
                            html = html.replace("<#=" + key + "#>", cellData);
                        }
                        //create detail place holder
                        var $detail = $("<div></div>");
                        $detail.html(html);
                        $detail.find(".pq-tabs").tabs().on("tabsactivate", function (evt, ui) {
                            var $grid = ui.newPanel.find(".pq-grid");
                            $grid.pqGrid("refresh");
                        });

                        //make a deep copy of gridDetailModel
                        var objCopy = $.extend(true, {}, objDetail);

                        objCopy.dataModel.url = "@Url.Action("Acao1", "Grid")";
                        //objCopy.dataModel.url = "/pro/orderdetails.php?orderId=" + orderID;//for PHP

                        //append pqGrid in the 2nd tab.
                        $("<div></div>").appendTo($("#tabs-2", $detail)).pqGrid(objCopy);

                        return $detail;
                    }
                }
            };

[paramvir]

I see callback in your C# code which is used for cross domain JSONP requests.

Other than that, ensure the url is correct and lookout for errors and debug your code by putting a breakpoint in dataModel.getData callback.

Please share a jsfiddle if you are not able to figure it out yourself.

[Akaize]

Thank you for the advice.

I discover the issue = 'sortIndx: "Rank",' (I don't have a column with this data index) haha