Extracting fields from xml data stored in rawObject

Question

I am using jqGrid to create a web-site, and I'm trying to use the cellattr function to set the 'title' attribute of each cell in first column to a tag defined in an xml file. I have pasted below the javascript I'm using to try and accomplish this, and below that I have included an example of the xml file I'm using with a single record. At the moment, however, it's setting the title attribute to 'undefined'. I have tried various return statements in the cellattr function, including:

return 'title="' + onHoverText + '"';
return 'title="' + rawObject.onHoverText + '"';
return 'title="' + cm[onHoverText] + '"';

with no success. Here is the full javascript code:

Query(document).ready(function() {
        jQuery("#list").jqGrid({
                xmlreader: {
                root:"rows",
                row:"row",
                repeatitems: false,
                onHoverText:"onHoverText"
                },
                url: "data.xml",
                datatype: "xml",
                mtype: "GET",
                colNames: ["","Bisulfite seq","OxBisulfite seq","Genome seq","H3K27ac","H3K27me3","H3K36me3","H3K4me1","H3K4me3","H3K9ac","H3K9me3","Input DNA Control","mRNA seq","miRNA seq","MRE seq","MeDIP seq"],
                colModel: [ { name: "", width: 360, classes: 'ui-state-default', cellattr: function (rowId, val, rawObject, cm, rdata) {
    return 'title="' + onHoverText + '"';
}},
{ name: "bisulfite_seq", width: 25, align: "center", classes: "data_cell", sortable: false, cellattr: cellattr_func0 },
{ name: "oxbisulfite_seq", width: 25, align: "center", classes: "data_cell", sortable: false, cellattr: cellattr_func1 },
{ name: "genome_seq", width: 25, align: "center", classes: "data_cell", sortable: false, cellattr: cellattr_func2 },
{ name: "h3k27ac", width: 25, align: "center", classes: "data_cell", sortable: false, cellattr: cellattr_func3 },
{ name: "h3k27me3", width: 25, align: "center", classes: "data_cell", sortable: false, cellattr: cellattr_func4 },
{ name: "h3k36me3", width: 25, align: "center", classes: "data_cell", sortable: false, cellattr: cellattr_func5 },
{ name: "h3k4me1", width: 25, align: "center", classes: "data_cell", sortable: false, cellattr: cellattr_func6 },
{ name: "h3k4me3", width: 25, align: "center", classes: "data_cell", sortable: false, cellattr: cellattr_func7 },
{ name: "h3k9ac", width: 25, align: "center", classes: "data_cell", sortable: false, cellattr: cellattr_func8 },
{ name: "h3k9me3", width: 25, align: "center", classes: "data_cell", sortable: false, cellattr: cellattr_func9 },
{ name: "input_dna_control", width: 25, align: "center", classes: "data_cell", sortable: false, cellattr: cellattr_func10 },
{ name: "mrna_seq", width: 25, align: "center", classes: "data_cell", sortable: false, cellattr: cellattr_func11 },
{ name: "mirna_seq", width: 25, align: "center", classes: "data_cell", sortable: false, cellattr: cellattr_func12 },
{ name: "mre_seq", width: 25, align: "center", classes: "data_cell", sortable: false, cellattr: cellattr_func13 },
{ name: "medip_seq", width: 25, align: "center", classes: "data_cell", sortable: false, cellattr: cellattr_func14 },
 ],xmlreader: {
                root:"rows",
                row:"row",
                repeatitems: false,
                onHoverText:"onHoverText"
                },
            treeGrid: true,
            treeGridModel:'adjacency',
                pager: "",
                rowNum: 30,
                rowList: [30, 60, 90],
                sortname: "invid",
                sortorder: "desc",
                viewrecords: true,
                gridview: true,
                autoencode: true,
                caption: "Epigenomic Data Grid - hg19",
            height: "100%",
            cellEdit: true,
                        onCellSelect: function(rowid, iCol, cellcontent, e) {
                update_selection(cellcontent, e);
                        }
            });
});

And the XML file looks like this

<?xml version='1.0' encoding='utf-8'?>
<rows>
<page>"page"</page>
<total>TP</total>
<records>99</records>
<row id='0'>
<onHoverText> this is foo </onHoverText>
<cell>d<![CDATA[ Blood]]></cell>
<cell class="has_data in_progress"></cell>
<cell class="has_data in_progress"></cell>
<cell class="has_data CEMT level_0">4</cell>
<cell class="has_data CEMT level_0">11</cell>
<cell class="has_data CEMT level_0">11</cell>
<cell class="has_data CEMT level_0">12</cell>
<cell class="has_data CEMT level_0">12</cell>
<cell class="has_data CEMT level_0">12</cell>
<cell/>
<cell class="has_data CEMT level_0">11</cell>
<cell class="has_data CEMT level_0">11</cell>
<cell class="has_data CEMT level_0">4</cell>
<cell class="has_data CEMT level_0">4</cell>
<cell/>
<cell/>
<cell>0</cell>
<cell></cell>
<cell>false</cell>
<cell>true</cell>
<cell>true</cell>
</row>
</rows>

I was under the impression that there was a function to parse the xml once xmlreader had been defined, but I can't find it. I would appreciate any help.

Note: If anyone wants to see an example of the web-site you can see it at: http://www.bcgsc.ca/downloads/bdavis/tempsite/

Cheers, Brad Davis

score 1 · Accepted Answer · edited May 23 '17 at 11:57

1

It I correctly understand your problem you can use $("onHoverText", rawObject).text() inside of cellattr to access the data. The old answer provides an example of usage cellattr with datatype: "xml".

In general I recommend to use datatype: "json" instead of datatype: "json" whenever it's possible.

UPDATED: The demo uses $("onHoverText", rawObject).text() and produces correct tooltip on the cell from the first column which come from <onHoverText> this is foo </onHoverText>:

enter image description here

edited May 23 '17 at 11:57

Community

1
1

answered Sep 18 '14 at 17:49

Oleg

220,925
34
403
798

One other quick question: In the code example I provided above, I had 'xmlreader' instead of 'xmlReader'. Is that likely to cause a problem? I'm pretty sure it should because like almost all programming languages, everything is case sensitive. The person who originally wrote the javascript for this site used many of the examples you provided without understanding them, so now I' going through it and trying to understand it while I build in new functionality. They used the example cellattr you just linked to. Would that cause conflict w/ xmlReader? – Brad Davis Sep 18 '14 at 18:04
Oh, and I completely agree about the json object. I would rather do it that way, but that requires making some changes on the backend, and I don't want to get into that. I may be able to convince someone else to do it though, and then make the switch w/ this code to using jsons. – Brad Davis Sep 18 '14 at 18:05
@BradDavis: of cause all property names in JavaScript case sensitive. `xmlreader` will be just ignored, `xmlReader` will be used in case of `datatype: "xml"` (the default value of `datatype`). – Oleg Sep 18 '14 at 18:11
@BradDavis: I included the demo which uses your data. See **UPDATED** part of my answer. – Oleg Sep 18 '14 at 19:45
okay, I figured out the xmlReader problem. I didn't have a space after the variable name. – Brad Davis Sep 18 '14 at 19:54
I can't see the demo in the updated part of your answer. The only link that is contained there is the original "The old answer". Anyway, $("onHoverText", rawObject).text() definitely contains the text I want, but when I include it in the return section, it fails to set the title to anything (i.e the attribute isn't set)' cellattr: function (rowId, val, rawObject, cm, rdata) { monkey = $("onHoverText", rawObject).text() console.log(monkey); return 'title="' + $("onHoverText", rawObject).text() + '"'; – Brad Davis Sep 18 '14 at 19:59
@BradDavis: Just open [the demo](http://www.ok-soft-gmbh.com/jqGrid/BradDavis.htm) in web browser, open the context menu and choose "View page source" /"View source" (or other text depend on web browser which you use). You will see *full HTML/JavaScript code* which I used. The file [BradDavis.xml](http://www.ok-soft-gmbh.com/jqGrid/BradDavis.xml) used in the demo contains the data which you posted. All works. You need just compare the code/data of my demo with your original data/code to fine the problem in your code. – Oleg Sep 18 '14 at 20:04
That worked wonderfully. Now I have to figure out how to add 'onClick' function to each of the row names. Thanks – Brad Davis Sep 18 '14 at 21:06
@BradDavis: It was *another your question*. I posted you already references with [the answer](http://stackoverflow.com/a/16241558/315935) and [this one](http://stackoverflow.com/a/13765086/315935) which provides demos which use `beforeSelectRow`. You need just include `beforeSelectRow` in your project and use it in the same way like I shown it you. – Oleg Sep 18 '14 at 21:20

Extracting fields from xml data stored in rawObject

1 Answers1