Issues loading the pq.grid using data returned from an ASP.NET MVC application.

[[email protected]]

API returns data using Newtonsoft JsonConvert.SerializeObject(listObj)

 

Following code appears to go into a recursive loop and populates approx. 900+  blank rows in the grid.

   var approverList = this.GetWFApproverRoles(plantID);  // API call
  rolesGrid = pq.grid("#AvailableRoles", rolesGridProps);
  approverGrid.option("dataModel.data", approverList);
  approverGrid.refresh();

When initially loading the page, the following Razor code does create the proper
format of the data

var rolesData = @Html.Raw(Json.Encode(Model.WorkflowApproverRoles));

var rolesGridProps = {
                height: "flex",
                width: "100%",
                title: "Available Roles with users for the selected facility",
                collapsible: false,
                //postRenderInterval: -1,
                complete: function () { this.flex(); },
                refresh: function (evt, ui) {
                    if (ui.source != "flex") {
                        this.flex();
                    }
                },
                colModel: $.extend(true, [], rolesColModel),
                dataModel: $.extend(true, [], rolesDataModel   <<- what’s difference [] vs {}
               //  dataModel: $.extend(true, {}, rolesDataModel),
                dragModel: {
                    on: true,
                    clsDnD: "dnd1",
                    diHelper: ["ID"]
                },
                dropModel: {
                    on: true,
                    accept: ".dnd2"
                }
            }





 

[paramvir]

Thanks for the screenshots.

Please try to share complete relevant code (within code tags to preserve code), especially definition of rolesDataModel and rolesColModel.

What's the reason of deep cloning rolesDataModel and rolesColModel with $.extend()

What's the number of rows in rolesDataModel.data

Reason of blank rows in grid is when your cells are not bind to the data field values. Please try to match dataIndx in column definitions in colModel to field names in JSON data.