free-jqgrid / jqGrid

jQuery grid plugin
https://github.com/free-jqgrid/jqGrid
Other
480 stars 195 forks source link

Subgrid inserted in wrong line #414

Closed marcelo-maciel closed 6 years ago

marcelo-maciel commented 6 years ago

Hi guys!

I created a new grid, with subgrid, its ok, but .... when i clicked on plus icon, the first time works fine, but when i click on another row plus icon, the subgrid is added again to old row, like image bellow.

image

JQGrid version: 4.15.2

My code: `$(function () { "use strict"; var $grid = $("#grid");

        $grid.jqGrid({
            colModel: [
                { name: "id", label: "Pedido", width: 90 },
                { name: "DataEmissao", label: "Emissão", align: "center", sorttype: "date", width: 90, formatter: "date", formatoptions: { newformat: "d/m/Y" } },
                { name: "PrevisaoFaturamento", label: "Previsão Fat.", align: "center", sorttype: "date", width: 90, formatter: "date", formatoptions: { newformat: "d/m/Y" } },
                { name: "DataCota", label: "Data Cota", align: "center", sorttype: "date", width: 90, formatter: "date", formatoptions: { newformat: "d/m/Y" } },
                { name: "QtdeTotal", label: "Qtde. Total", template: "integer", width: 90 },
                { name: "QtdeTotalCancelado", label: "Qtde. Cancel.", template: "integer", width: 90 },
                { name: "Valor", label: "Valor Pedido", template: "number" },
                { name: "PrazoMedio", label: "Prazo Médio" },
                { name: "Parcelamento", label: "Parcelamento" },
                { name: "Status", label: "Status Pedido" },
                { name: "EspelhoPedido", label: "Espelho Pedido", width: 120, template: "actions", key: true },
            ],
            emptyrecords: 'Nenhum Pedido encontrado.',
            autowidth: true,
            viewrecords: true,
            rowNum: 10,
            rowList: [10, 20, 30],
            altRows: true,
            footerrow: true,
            userDataOnFooter: true,
            guiStyle: "bootstrap",
            iconSet: "fontAwesome",
            headertitles: true,
            autoencode: true,
            toppager: false,
            pager: true,
            sortname: "id",
            sortorder: "desc",
            subGrid: true,
            subgridtype: "json",
            subGridUrl: "/Pedidos/ListaItensPedido",
            subGridModel: [{
                name: ['No', 'Item', 'Qty', 'Unit', 'Line Total'],
                width: [55, 200, 80, 80, 80]
            }
            ],
            actionsNavOptions: {
                editbutton: false,
                delbutton: false,

                espelhoicon: "fa-print",
                espelhotitle: "Abrir espelho da nota",

                isDisplayButtons: function (options, rowData) {
                    if (options.rowData.closed) { // or rowData.closed
                        return { open: { data: rowData }, del: { display: false } };
                    }
                },
                custom: [
                    {
                        action: "espelho", position: "first",
                        onClick: function (options) {
                            swal({
                                title: "Espelho Nota " + options.rowid,
                                text: "Abre Espelho da nota: " + options.rowid,
                            })
                        }
                    }
                ]
            },
            url: urlContent + "Pedidos/ListaPedidos",
            datatype: "json",
            gridview: true, 
            loadonce: true,
            forceClientSorting: true,
            fromServer: true,
            navOptions: { reloadGridOptions: { fromServer: true } },
            loadError: function (xhr, st, err) {
                $("#rsperror").html("Type: " + st + "; Response: " + xhr.status + " " + xhr.statusText);
            }
        });`
OlegKi commented 6 years ago

Could you provide the demo (in jqfiddle, for example), which reproduce the problem, or at least provide test data, returned from url: urlContent + "Pedidos/ListaPedidos" and subGridUrl: "/Pedidos/ListaItensPedido", so that I could reproduce the problem, which you report?

marcelo-maciel commented 6 years ago

@OlegKi, congratulations for the excelent work on jqgrid.

I found the problem.

On my column "EspelhoPedido" key: true, i send sample value "99" in line 3 and the same value "99" in line 5. If I click in line 3 plus sign, the subgrid opens correcttly, but if then i click on line 5, the subgrid will be added on line 3 too.

I think that independently of the value of the line key, if I click on line X plus sign to add an subgrid, my intention is add subgrid on line X. I tested my approach with jqgrid version 4.7 and bellow and works weel. What do you think?

Thanks for the quick answer.

sample data:

{ page: 0, total: 0, userdata: { id: "Totalizadores", QtdeTotal: 12, QtdeTotalCancelado: 12, Valor: 999999999.99 }, rows: [ { id: 10, cell: { id: 10, DataEmissao: "2015-10-01", PrevisaoFaturamento: "2015-10-01", DataCota: "2015-10-01", QtdeTotal: 1, QtdeTotalCancelado: 1, Valor: 0.1, PrazoMedio: "Á Vista", Parcelamento: "Á Vista", Status: "Faturado", EspelhoPedido: "99" } }, { id: 11, cell: { id: 11, DataEmissao: "2015-10-01", PrevisaoFaturamento: "2015-10-01", DataCota: "2015-10-01", QtdeTotal: 1, QtdeTotalCancelado: 1, Valor: 587.24, PrazoMedio: "Á Vista", Parcelamento: "Á Vista", Status: "Faturado", EspelhoPedido: "99" } }, { id: 12, cell: { id: 12, DataEmissao: "2015-10-01", PrevisaoFaturamento: "2015-10-01", DataCota: "2015-10-01", QtdeTotal: 1, QtdeTotalCancelado: 1, Valor: 187.24, PrazoMedio: "Á Vista", Parcelamento: "Á Vista", Status: "Faturado", EspelhoPedido: "99" } }, { id: 13, cell: { id: 13, DataEmissao: "2015-10-01", PrevisaoFaturamento: "2015-10-01", DataCota: "2015-10-01", QtdeTotal: 1, QtdeTotalCancelado: 1, Valor: 7867887.24, PrazoMedio: "Á Vista", Parcelamento: "Á Vista", Status: "Faturado", EspelhoPedido: "99" } }, { id: 14, cell: { id: 14, DataEmissao: "2015-10-01", PrevisaoFaturamento: "2015-10-01", DataCota: "2015-10-01", QtdeTotal: 1, QtdeTotalCancelado: 1, Valor: 66887.24, PrazoMedio: "Á Vista", Parcelamento: "Á Vista", Status: "Faturado", EspelhoPedido: "99" } }, { id: 15, cell: { id: 15, DataEmissao: "2015-10-01", PrevisaoFaturamento: "2015-10-01", DataCota: "2015-10-01", QtdeTotal: 1, QtdeTotalCancelado: 1, Valor: 1287.24, PrazoMedio: "Á Vista", Parcelamento: "Á Vista", Status: "Faturado", EspelhoPedido: "99" } }, { id: 16, cell: { id: 16, DataEmissao: "2015-10-01", PrevisaoFaturamento: "2015-10-01", DataCota: "2015-10-01", QtdeTotal: 1, QtdeTotalCancelado: 1, Valor: 999999.99, PrazoMedio: "Á Vista", Parcelamento: "Á Vista", Status: "Faturado", EspelhoPedido: "99" } }, { id: 17, cell: { id: 17, DataEmissao: "2015-10-01", PrevisaoFaturamento: "2015-10-01", DataCota: "2015-10-01", QtdeTotal: 1, QtdeTotalCancelado: 1, Valor: 10000.99, PrazoMedio: "Á Vista", Parcelamento: "Á Vista", Status: "Faturado", EspelhoPedido: "99" } }, { id: 18, cell: { id: 18, DataEmissao: "2015-10-01", PrevisaoFaturamento: "2015-10-01", DataCota: "2015-10-01", QtdeTotal: 1, QtdeTotalCancelado: 1, Valor: 76.88, PrazoMedio: "Á Vista", Parcelamento: "Á Vista", Status: "Faturado", EspelhoPedido: "99" } }, { id: 19, cell: { id: 19, DataEmissao: "2015-10-01", PrevisaoFaturamento: "2015-10-01", DataCota: "2015-10-01", QtdeTotal: 1, QtdeTotalCancelado: 1, Valor: 46, PrazoMedio: "Á Vista", Parcelamento: "Á Vista", Status: "Faturado", EspelhoPedido: "99" } }, { id: 20, cell: { id: 20, DataEmissao: "2015-10-01", PrevisaoFaturamento: "2015-10-01", DataCota: "2015-10-01", QtdeTotal: 1, QtdeTotalCancelado: 1, Valor: 21.22, PrazoMedio: "Á Vista", Parcelamento: "Á Vista", Status: "Faturado", EspelhoPedido: "99" } }, { id: 21, cell: { id: 21, DataEmissao: "2015-10-01", PrevisaoFaturamento: "2015-10-01", DataCota: "2015-10-01", QtdeTotal: 1, QtdeTotalCancelado: 1, Valor: 37.44, PrazoMedio: "Á Vista", Parcelamento: "Á Vista", Status: "Faturado", EspelhoPedido: "99" } }, { id: 22, cell: { id: 22, DataEmissao: "2015-10-01", PrevisaoFaturamento: "2015-10-01", DataCota: "2015-10-01", QtdeTotal: 1, QtdeTotalCancelado: 1, Valor: 82.21, PrazoMedio: "Á Vista", Parcelamento: "Á Vista", Status: "Faturado", EspelhoPedido: "99" } } ] }

OlegKi commented 6 years ago

One should be very careful with the usage of key: true. It informs jqGrid to use the value from the column as the rowid. The rowid have to be unique because the values of id attributes have to unique. The usage of non-unique ids can result un-predictable results. In case of jqGrid typically it looks as following: an action (selection of row etc) with one row could be done with another row.

Additional restriction of key property: it should be maximal one column in the grid, which has key: true property.

In any way, you have to remove key: true property from EspelhoPedido column. By the way, it's recommended to use template: "actions" or formatter: "actions" together with name property, which has no input data. The input data will be not used by formatter: "actions". The usage ofkey: trueproperty fortemplate: "actions"orformatter: "actions"` has no sense in general.

It seems that the problem is cleared. You found the error yourself. I'm closing the issue.