Forum
10:21
02/10/2014
Hello,
Â
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.
14:20
Moderators
30/10/2007
Hello,
Â
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
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
11:57
02/10/2014
Hello,
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...
13:13
Moderators
30/10/2007
Hello,
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
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
09:01
02/10/2014
Hey Tony,
Â
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
09:54
02/10/2014
I dug through the JqGrid Code and found what is crashing - but I am not quite sure what it does:
(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
12:34
Moderators
30/10/2007
Hello,
Â
Ok. This is exactly your code. Check it here
It seems to me there is a problem with your data.
Enjoy
Â
Regards
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
15:49
02/10/2014
Ich checked it - and I also checked my Data.
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:
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...
15:25
02/10/2014
I resolved the issue - after experimenting a bit:
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
Most Users Ever Online: 715
Currently Online:
68 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66