Passing data stored in an XML to onCellSelect

Question

I am trying to pass data (a URL) stored in an XML file to the onCellSelect so that I can open up a new page with it. The web-site can be seen at www.bcgsc.ca/downloads/bdavis/tempsite3/.

Since I haven't been able to figure out a way to transfer this data directly (i.e I don't have access to rawObject as with cellattr functions, do I?), my approach has been to extract this data in my cellattr function and use it to define a data-* attribute (specifically data-rowSpecificURL, fwiw), and then extract that within cellSelect, but when I try to extract that data using either getRowData or getLocalRow or getCell, it shows me the attributes to the contained within the which is immediately below the tag.

Does anyone have any suggestions? If I knew how to, I could set the data-* attribute in the div tag instead of the td tag, but I don't know how to do that. Or if anyone has any suggestion on how to extract this attribute from the td tag. Or how to access the rawObject directly.

Thanks, Brad

score 1 · Accepted Answer · edited May 23 '17 at 12:30

The usage of data_* attribute on cell or row is one way to save cell-specific or row-specific information. See the answer for the corresponding code example.

It seems to me that another way would be more suitable for you: the usage of beforeProcessing to parse raw server response. Inside of beforeProcessing you have full access to all data returned from the server. One can prepare an object with additional information as a map by rowid. So one can easy get the row-specific information by rowid later. The object with additional information one can save expanding the list of standard jqGrid parameters with new one.

For example let us the input information data about the row are extended as the following

<row id='123'>
    <onHoverText>this is my foo</onHoverText>
    <rowSpecificURL>http://www.google.com</rowSpecificURL>
    <cell><![CDATA[Blood]]></cell>
    <cell class="has_data in_progress"></cell>
    ...
</row>

In the case the <onHoverText> and <rowSpecificURL> elements contains custom row-specific information. I suggest to build the object (the map) like

{
    123: {tooltip: "this is my foo", url: "http://www.google.com" }
}

which saves the custom information by rowid. One can save such map myData as your custom jqGrid parameter myParam using

$(this).jqGrid("setGridParam", { myParam: myData });

Later you can get the information from myParam parameter by

var rowSpecificInformation = $(this).jqGrid("getGridParam", "myParam")[rowid];
// rowSpecificInformation.tooltip and rowSpecificInformation.url

For example the code from the demo of your previous question can be rewritten as following

$("#list").jqGrid({
    url: "BradDavis2.xml",
    colModel: [
        { name: "c1", width: 360, classes: 'ui-state-default',
            cellattr: function (rowId, val, rawObject, cm, rdata) {
                // get custom row information from custom parameter
                var p = $(this).jqGrid("getGridParam", "myParam"); // this.p.myParam
                // get object with additional row specific information from p[rowId] 
                return p != null && p[rowId] != null && p[rowId].tooltip != null ?
                    ' title="' + p[rowId].tooltip + '"' : '';
        }},
        ...
    ],
    ...
    beforeProcessing: function (data) {
        var rows = $(">rows>row", data), l = rows.length, i, item, myData = {}, $p, id, myInfo;
        for (i = 0; i < l; i++) {
            item = rows[i];
            id = $(item).attr("id"); // get rowid

            // fill custom information from every row to object
            myInfo = {};
            $p = $("onHoverText", item);
            if ($p.length > 0) {
                myInfo.tooltip = $p.text();
            }
            $p = $("rowSpecificURL", item);
            if ($p.length > 0) {
                myInfo.url = $p.text();
            }

            // save the object with custom information in a map by id
            myData[id] = myInfo;
        }
        // save custom information in custom jqGrid parameter
        $(this).jqGrid("setGridParam", { myParam: myData });
    },
    onCellSelect: function(rowid, iCol, cellcontent, e, rawObject) {
        var $self = $(this),
            colModel = $self.jqGrid("getGridParam", "colModel"),
            myData = $self.jqGrid("getGridParam", "myParam"); // this.p.myParam

        if (colModel[iCol].name === "c1" && myData != null && myData[rowid] != null && myData[rowid].url != null) {
            window.open(myData[rowid].url, "_blank");
        }
    }

The corresponding demo you will find here. If one clicks in the cell from the first column then new browser windows with www.google.com will be opened.

Passing data stored in an XML to onCellSelect

1 Answers1