Instead of 'xmlstring' I now use datatype: function

datatype: function(postdata){
                 var list = jQuery("#list")[0];
                 list.addXmlData(productListData);
}

Works well - even though I still dont know why 'xmlstring' didnt work.

 

Either way, thanks for your help

But there is a difference between your code and mine.

The Code you made is uses a xml datatype- I use xmlstring.

I tried your example with the whole chunk of Data I need to retrieve - and found an error on my side (replacements on special Characters) - fixed that and tried your code again - it worked.

BUT

I tried the same thing with my code now - changed the datatype to xml - and referenced the same xml file with all the data. This worked as well

Now I changed the datatype to xmlstring, copy + pasted the xml-file into a hardcoded string, tried to run it again: I got the same exception (Cannot read property 'length' of null)

The reason I use xmlstring was just convienence, I call a Webservice with a specific SOAP Message and get the Products filtered that I need - the specific xml structure that returns can be found here:

xmldata.xml

This is the exact structure I give jqGrid, if I use the datatype:xml - it works

if I copy the exact same Message unedited as string hardcoded into the script and use datatype:xmlstring - it does not (but it shows everything when I configure groupind:false - and enable grouping afterwards - but only after triggering something else)

Now my question would be does datatype:xmlstring not support grouping? - I really couldnt find anything that says it doesnt...

 

Ok. This is exactly your code. Check it here

It seems to me there is a problem with your data.

Enjoy

 

Regards

(taken from jquery.jqgrid.src.js - Row 11.776)

var leaf = len-1 === n.idx; 
                if( leaf ) {
                    var gg = grp.groups[i+1], kk, ik, offset = 0, sgr = n.startRow,
                  //Line that gives the exception:
                    end = gg !== undefined ?  grp.groups[i+1].startRow : grdata.length; 
                    if(grp._locgr) {
                        offset = (page-1)*rn;
                        if(offset > n.startRow) {
                            sgr = offset;
                        }
                    }

I assume the grdata is the Griddata, so the lenght of the Griddata is undefined - not 0.

It seems to me I either configured something completely wrong - or my process of giving the Grid data is erronous:

function showProductList()
{    
    if(reloadProducts)
    {
    //HTML Web Service CalL
    var xmlhttp=false;
    var getCustomersUrl =  serviceTrigger; //Web Service URL from which I retrieve the XML
    xmlhttp = new XMLHttpRequest();
    
    xmlhttp.open("POST", getCustomersUrl, true); //B1if only allows POST requests!
    xmlhttp.setRequestHeader("Content-Type", "text/xml; charset=utf-8");
    
    var data = '<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:tem="http://tempuri.org/"><soapenv:Header/><soapenv:Body><tem:GetProductList><tem:Group>'+selectedGroup+'</tem:Group></tem:GetProductList></soapenv:Body></soapenv:Envelope>'
    console.log(data);
    xmlhttp.onreadystatechange=function () {
        
        if(xmlhttp.readyState==4)
        {
            productListData = xmlhttp.responseText;
            buildProductGrid(); // ---> Method that builds my grid
            reloadProducts = false;
        }
        console.log("Loading of Service not done yet");
        
    }; //END of READY STATE FUNCTION
    
    //Sending the Request
    xmlhttp.send(data);
    }else 
    {
        buildProductGrid(); // ---> Method that builds my grid

 

function buildProductGrid()
{
    jQuery(document).ready(function () {
    
            //Last Selected Row - used for Selection Handling
            lastsel = null;
            var monthHeaders = getMonthHeader();
            //Definition of Grid
        $("#list").jqGrid({
            datatype: 'xmlstring', //Datatype of information represented, will be XML due to HTTP call I guess?
            datastr: productListData, // --> this is what is created in the previous function
        colNames: ['Hersteller','Artikel Nr', 'PZN', 'Beschreibung', 'Menge', 'NR', 'P', 'K', 'A','VJ','VVJ',monthHeaders[0],monthHeaders[1],monthHeaders[2],monthHeaders[3],monthHeaders[4],monthHeaders[5],monthHeaders[6],monthHeaders[7],monthHeaders[8],monthHeaders[9],monthHeaders[10],monthHeaders[11]],//'Check','Notes'], //Header Layer Definition
        colModel:[
            //GroupColumn
            {name:'xxx', index:'xxx',width:1,editable:false,search: false},
            {name:'itmc',index:'itmc', width:80, align:"left",search:true, key:true},
            {name:'pzn',index:'pzn', width:65, align:"left",search:true},
            {name:'itemnm',index:'itemnm', width:200, align:"left",sorttype:"text",search:true},
            //EditableParts
            {name:'amount', index:'amount', width:40,align:"center",sorttype:"number", editoptions:{size:4, maxlenght:4, height:40},editrules:{number:true},editable:true,search:false},
            {name:'nr',index:'nr',width:40,align:"center",sorttype:"number",editoptions:{size:4, maxlenght:4},editrules:{number:true},editable:true,search:false},
            {name:'p', index:'p',width:30,align:"center",sortable:false, edittype:'checkbox',editoptions:{value:"Ja:Nein"},editable:true,search:false},
            {name:'k', index:'k',width:30,align:"center",sortable:false, edittype:'checkbox',editoptions:{value:"Ja:Nein"},editable:true,search:false},
            {name:'a', index:'a',width:30,align:"center",sortable:false, edittype:'checkbox',editoptions:{value:"Ja:Nein"},editable:true,search:false},
            //END EditableParts
            {name:'year12',index:'year12', width:40, formatter:'text', align:"center",sorttype:"number",search:false},
            {name:'year13',index:'year13', width:40, formatter:'text', align:"center",sorttype:"number",search:false},
            {name:'mon1',index:'mon1', width:35, formatter:'text', align:"center",sorttype:"number",search:false},
            {name:'mon2',index:'mon2', width:35, formatter:'text', align:"center",sorttype:"number",search:false},
            {name:'mon3',index:'mon3', width:35, formatter:'text', align:"center",sorttype:"number",search:false},
            {name:'mon4',index:'mon4', width:35, formatter:'text', align:"center",sorttype:"number",search:false},
            {name:'mon5',index:'mon5', width:35, formatter:'text', align:"center",sorttype:"number",search:false},
            {name:'mon6',index:'mon6', width:35, formatter:'text', align:"center",sorttype:"number",search:false},
            {name:'mon7',index:'mon7', width:35, formatter:'text', align:"center",sorttype:"number",search:false},
            {name:'mon8',index:'mon8', width:35, formatter:'text', align:"center",sorttype:"number",search:false},
            {name:'mon9',index:'mon9', width:35, formatter:'text', align:"center",sorttype:"number",search:false},
            {name:'mon10',index:'mon10', width:35, formatter:'text', align:"center",sorttype:"number",search:false},
            {name:'mon11',index:'mon11', width:35, formatter:'text', align:"center",sorttype:"number",search:false},
            {name:'mon12',index:'mon12', width:35, formatter:'text', align:"center",sorttype:"number",search:false},
            //{name:'check',index:'check', width:40,editRow:true, editable:true, align:"center", edittype:'checkbox',editoptions:{value:"Yes:No"}},
            //{name:'note',index:'note', width:100,editRow:true, sortable:false, editable:true, editoptions:{maxLenght:'40'}}
        ],
        //pager: '#pager', //Pager Setup - to go back and forth between entrys #Might solve our display problem!
        rowNum: 9999,         //Number of Rows to display, the pager switches back and forth
        //rowList: [10, 15, 20], //Defines a drop down  Menu to change rowNum (probably not usable in Ipad dev)
        sortname: 'xxx',    //Initial sorting column pretty straight forward
        sortorder: 'asc',    //Sortorder self explanatory
        viewrecords: true, //Number of total records available
        gridview: true,    
        autoencode: true,
        caption: selectedCustomerName,
        height: 500,
        ignoreCase: true,
        grouping : true,
        groupingView: {
            groupField: ['xxx'],
            groupColumnShow: [false],
            groupText: ['{0} - {1} Item(s)'],
            groupCollapse:false,
            //groupDataSorted: true,
            //groupOrder: ['asc']
        },
        onSelectRow: function(id){
            if(id!=lastsel){
                jQuery('#list').jqGrid('saveRow',lastsel);
                //Adding Value for Submission Counter
                makeAmountOutput();
                
                //Set Null, select new Row
                lastsel = null;
                //jQuery('#list').jqGrid('editRow',id, { keys:true, oneditfunc : function( rowid) {$("#"+rowid+"_NR").focus();}};
                jQuery('#list').jqGrid('editRow',id, {   keys: true,   oneditfunc : function( rowid) {     $("#"+rowid+"_NR").focus();   } });
                lastsel=id;
                
            }else
            {
                makeAmountOutput();
                jQuery('#list').jqGrid('editRow',id, {   keys: true,   oneditfunc : function( rowid) {     $("#"+rowid+"_NR").focus();   } });
            }
        },
        scrollOffset: 0,
        editurl: "default.html",
        hidegrid:false,
        
    }); //JqGird Definition END

    //Definition of Filter Search
    $("#list").jqGrid('filterToolbar',{
        searchOnEnter: false
        
    });
    
    });    
};

 I dont see any mistakes - but I would assume I use Jgrid in a way it is not intended. Would anybody have any idea where my mistake is? - I really dont think it is Jqgrid that bugs out on me

 

Thanks a lot unfortunately - I tried using the group: true option, but the grid then doesnt display anything and the console presents me with an exception:

Thats the reason I started using the loadComplete, and enabling the Grouping afterwards - apparently something isnt loaded or correctly initiated hence the TypeError...or do I missinterpret something horribly?

 

EDIT: I added the style in the head - works wonders on performance - thank you very much

Using the latest jqGrid version your example works perfectly.

Below are the changes that I have made in order to make this work.

 

1. In grid options set grouping to true

grouping : true,

2. Disable the loadComplete. Please do not use this with trigger "reloadGrid" - this is selfkilling code.

3. I have added in head section this:

<style type="text/css">
  #list .jqgrow { height: 40px !important}
 </style>

If you have problems with running this I can put your code online.

 

Kind Regards

Tony

Sorry for my very late reply - but the company gave me a more pressing issue, and then I got sick.

Here is one oft he XML-Strings I would use:

 

<GetProductListResults>
            <rows>
               <page>1</page>
               <total>1</total>
               <records>2</records>
               <row>
                  <cell>Dr. Liebe</cell>
                  <cell>35931</cell>
                  <cell/>
                  <cell>Daylong 50+ extreme Stick 8 ml</cell>
                  <cell/>
                  <cell/>
                  <cell>Nein</cell>
                  <cell>Nein</cell>
                  <cell>Nein</cell>
                  <cell>999</cell>
                  <cell>999</cell>
                  <cell>1</cell>
                  <cell>2</cell>
                  <cell>3</cell>
                  <cell>4</cell>
                  <cell>5</cell>
                  <cell>6</cell>
                  <cell>7</cell>
                  <cell>8</cell>
                  <cell>9</cell>
                  <cell>10</cell>
                  <cell>11</cell>
                  <cell>12</cell>
               </row>
               <row>
                  <cell>Dr. Liebe</cell>
                  <cell>8001</cell>
                  <cell>1751116</cell>
                  <cell>Excipial Lipocreme 300 g</cell>
                  <cell/>
                  <cell/>
                  <cell>Nein</cell>
                  <cell>Nein</cell>
                  <cell>Nein</cell>
                  <cell>999</cell>
                  <cell>999</cell>
                  <cell>1</cell>
                  <cell>2</cell>
                  <cell>3</cell>
                  <cell>4</cell>
                  <cell>5</cell>
                  <cell>6</cell>
                  <cell>7</cell>
                  <cell>8</cell>
                  <cell>9</cell>
                  <cell>10</cell>
                  <cell>11</cell>
                  <cell>12</cell>
               </row> </rows>

</GetProductListResults>

Ideally what I would want is the products to be Grouped under the Name Dr. Liebe (which would be the producer of the products) - again it does work - but only after Sorting via the Header or using search - or even triggering an edit.

The Key:true would be the colum ItemCode (itmc) - is it still possible to use Grouping after that?
I just dont know what I am doing wrong...

 

Can you post a simple xml string, so that we investigate what is happen?

Since you use local data it is recommended to have a key:true for one column in colModel.

 

Kind Regards

 

I stumbled upon another problem, that I cant quite explain/understand.

What I am trying to do:

I load data via xmlstring and want it grouped by one column - but just configuring the grouping via grouping:true and groupingView:{...} just throws a "TypeError: b is null"

So I rummaged through some sources and came to the conclussion - that I should only group after the grid loaded the xmlstring.

loadComplete: function() {
            if(!loadedGrouping)
            {
                //We need to enable Grouping via Xml AFTER loadComplete - or we get a huge null pointer
                $('#list').jqGrid('setGridParam', { grouping:true });
                //$('#list').jqGrid('setGridParam', { sortorder:'asc' });
                //Grouping END
                //Reload Grid once so Grouping takes effect
                $('#list').trigger("reloadGrid");    
                
                loadedGrouping = true;
            }

 

This seems to work - but only after I trigger a sorting change by clicking on a column header - after that the grouping works perfectly.

Here is the rest of my code:

$("#list").jqGrid({
        datatype: 'xmlstring', //Datatype of information represented, will be XML due to HTTP call I guess?
        datastr: mydata,
        colNames: ['Producer','Article Nr', 'PZN', 'Description', 'Amount', 'NR', 'P', 'K', 'A','12','13','1','2','3','4','5','6','7','8','9','10','11','12'],
        colModel:[
            //GroupColumn
            {name:'xxx', index:'xxx',width:10,editable:true},
            {name:'itmc',index:'itmc', width:85, align:"left"},
            {name:'pzn',index:'pzn', width:65, align:"left"},
            {name:'itemnm',index:'itemnm', width:220, align:"left",sorttype:"text"},
            //EditableParts
            {name:'amount', index:'amount', width:45,align:"center",sorttype:"number", editoptions:{size:5, maxlenght:4, height:40},editrules:{number:true},editable:true},
            {name:'nr',index:'nr',width:45,align:"center",sorttype:"number",editoptions:{size:5, maxlenght:4},editrules:{number:true},editable:true},
            {name:'p', index:'p',width:30,align:"center",sortable:false, edittype:'checkbox',editoptions:{value:"Ja:Nein"},editable:true},
            {name:'k', index:'k',width:30,align:"center",sortable:false, edittype:'checkbox',editoptions:{value:"Ja:Nein"},editable:true},
            {name:'a', index:'a',width:30,align:"center",sortable:false, edittype:'checkbox',editoptions:{value:"Ja:Nein"},editable:true},
            //END EditableParts
            {name:'year12',index:'year12', width:22, formatter:'text', align:"right",sorttype:"number"},
            {name:'year13',index:'year13', width:22, formatter:'text', align:"right",sorttype:"number"},
            {name:'mon1',index:'mon1', width:22, formatter:'text', align:"right",sorttype:"number"},
            {name:'mon2',index:'mon2', width:22, formatter:'text', align:"right",sorttype:"number"},
            {name:'mon3',index:'mon3', width:22, formatter:'text', align:"right",sorttype:"number"},
            {name:'mon4',index:'mon4', width:22, formatter:'text', align:"right",sorttype:"number"},
            {name:'mon5',index:'mon5', width:22, formatter:'text', align:"right",sorttype:"number"},
            {name:'mon6',index:'mon6', width:22, formatter:'text', align:"right",sorttype:"number"},
            {name:'mon7',index:'mon7', width:22, formatter:'text', align:"right",sorttype:"number"},
            {name:'mon8',index:'mon8', width:22, formatter:'text', align:"right",sorttype:"number"},
            {name:'mon9',index:'mon9', width:22, formatter:'text', align:"right",sorttype:"number"},
            {name:'mon10',index:'mon10', width:22, formatter:'text', align:"right",sorttype:"number"},
            {name:'mon11',index:'mon11', width:22, formatter:'text', align:"right",sorttype:"number"},
            {name:'mon12',index:'mon12', width:22, formatter:'text', align:"right",sorttype:"number"},
        ],
        pager: '#pager',
        rowNum: 10,      
        //rowList: [10, 15, 20],
        sortname: 'xxx',  
        sortorder: 'asc', 
        viewrecords: true,
        gridview: true,    
        autoencode: true,
        caption: "Producer Name (Placeholder)",
        height: 520,
        grouping:false,
        groupingView: {
            groupField:['xxx'],
            groupColumnShow: [false],
            groupText: ['{0} - {1} Item(s)'],
            groupCollapse:false,
            //groupDataSorted: true,
            //groupOrder: ['asc']
        },
        onSelectRow: function(id){
            if(id!=lastsel){
                jQuery('#list').jqGrid('saveRow',lastsel);
                lastsel = null;
            
                jQuery('#list').jqGrid('editRow',id,true);
                lastsel=id;
                var focusElement = id+'_NR';
                //alert(focusElement);
                $(focusElement).focus();
                //$(document).bind("mouseup",function(event) {
                //    jQuery('#list').jqGrid('getCell',id,'NR').focus(); //selects specific row and underlying cell and sets the focus
                //});
            }
        },
        scrollOffset: 0,
        editurl: "default.html",
        hidegrid:false,
        loadComplete: function() { //function that manipulates ALL rows after the loading is done
            if(!loadedGrouping)
            {
                //We need to enable Grouping via Xml AFTER loadComplete - or we get a huge null pointer
                $('#list').jqGrid('setGridParam', { grouping:true });
                //$('#list').jqGrid('setGridParam', { sortorder:'asc' });
                //Grouping END
                //Reload Grid once so Grouping takes effect
                $('#list').trigger("reloadGrid");    
                
                loadedGrouping = true;
            }
            var grid = $("#list");
            var ids = grid.getDataIDs();
            for (var i = 0; i < ids.length; i++) {
                grid.setRowData ( ids[i], false, {height: 40} ); //change this number to manipulate Row-Height
            }
            
        }
    }).jqGrid('navGrid','#pager',{add:false,edit:false,del:false});

 

I admit I am very new to JqGrid and even Jquery and Jscript in generall - so I might missinterpreted the intent behind the events.