Author Topic: pq-row-indx missing  (Read 1451 times)

ralph1996

  • Pro Ultimate
  • Jr. Member
  • *
  • Posts: 80
    • View Profile
pq-row-indx missing
« on: September 02, 2020, 11:21:35 pm »
In previous versions (Prior to V 5.0) each row element would have the pq-row-indx attribute to allow you to determine the row index in the grid.  From 4.03 generateRow function:
Code: [Select]
            buffer.push("<tr pq-row-indx='", rip, "' class='", row_cls.join(" "), "' ", attr, " ", style, " >");
However in the latest version that same function now uses:
Code: [Select]
        generateRow: function(rip, region) {
            var cls = "pq-grid-row",
                style = "top:" + this.getTop(rip) + "px;height:" + this.getHeightR(rip) + "px;width:100%;",
                row_id = this.getRowId(rip, region),
                attr = "role='row' id='" + row_id + "'",
                arr = this.getRowClsStyleAttr(rip);
            cls += " " + arr[0];
            style += arr[1];
            attr += " " + arr[2];
            return "<div class='" + cls + "' " + attr + " style='" + style + "'>"
        },

createHeaderCell does include the attribute:
Code: [Select]
            attr.push("pq-row-indx=" + objP.rowIndx + " pq-col-indx=" + objP.colIndx);
            column.pq_title = title;
            return ["<div ", attr.join(" "), " ", " class='", cls.join(" "), "' style='", style.join(""), "' >", "<div class='pq-td-div'>", collapsedStr, "<span class='pq-title-span'>", title, "</span>", SSS, "</div>", hasMenuH ? "<span class='pq-menu-icon'></span>" : "", "</div>"].join("")

In theory you could extract the row index from the row id, but I think that is very error prone.  On top of that we use the existence of the pq-row-indx attribute to walk up the DOM to find the actual row that contains an element. Example:
Code: [Select]
var row = $(el).closest("div:has([pq-row-indx])");
Searching for pq-row-indx in pqgrid.dev.js shows that there is other code potentially dependent on this:
Code: [Select]
        onDrop: function() {
            var self = this,
                that = self.that;
            return function(evt, ui) {
                var colIndxDrag = ui.draggable.attr("pq-col-indx") * 1,
                    rowIndxDrag = ui.draggable.attr("pq-row-indx") * 1,
                    $this = $(this),
                    colIndxDrop = $this.attr("pq-col-indx") * 1,
                    rowIndxDrop = $this.attr("pq-row-indx") * 1,
                    left = self.leftDrop,
                    column;
                if (self.rtl) left = !left;

So I would think this may cause issues in drag/drop behavior as well.