[arikbdParticipant]

Hi Dimitar,

Thanks.

I have a follow up on that:

I create an expander and then I dynamiclly create its content according to some settings I read from the DB. then I set the content of the Expander.
It seems to work fine until this grid issue (It was working and I cannot say exactly when it stopped working, I upgrade to the new version and I saw it is not working, but downgrading does not solve the problem).

This is example of what I do (This demo works, I get this error:

Uncaught TypeError: Cannot read property 'length' of undefined jquery-1.10.2.js:631
jQuery.extend.each jquery-1.10.2.js:631
b.extend._updatehiddenrows jqxgrid.js:7
b.extend._updaterowsproperties jqxgrid.js:7
a.extend.sortby jqxgrid.sort.js:7
b.extend.databind.dataview.update jqxgrid.js:7
b.jqx.dataview.databind.z jqxgrid.js:7
b.jqx.dataview.databind.k jqxgrid.js:7
i.jqx.dataAdapter.callDownloadComplete jqxdata.js:7
i.jqx.dataAdapter.dataBind.xhr.i.jqx.data.ajax.success jqxdata.js:7
jQuery.Callbacks.fire jquery-1.10.2.js:3048
jQuery.Callbacks.self.fireWith jquery-1.10.2.js:3160
S jqxdata.js:7
i.jqx.data.ajaxTransport.send.H

<div id='jqxExpander'>
    <div>Header</div>
    <div>

    </div>
</div>

$("#jqxExpander").jqxExpander({
       width: 600,
       height: 600,
       theme: 'energyblue',
       expanded: false,
         initContent: function () {

       }
   });

   var strHTML = "<input type='button' id='jqxButton' value='Button' /><div id='mygrid'></div>";
   $("#jqxExpander").jqxExpander('setContent', strHTML);
   
   var data = new Array();
   var firstNames = [
       "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", 
        "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
   ];
   var lastNames = [
       "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", 
       "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
   ];
   var productNames =
   [
      "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", 
      "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
   ];
   var priceValues = [
       "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
   ];
   for (var i = 0; i < 50; i++) {
       var row = {};
       var productindex = Math.floor(Math.random() * productNames.length);
       var price = parseFloat(priceValues[productindex]);
       var quantity = 1 + Math.round(Math.random() * 10);
       row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
       row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
       row["productname"] = productNames[productindex];
       row["price"] = price;
       row["quantity"] = quantity;
       row["total"] = price * quantity;
       data[i] = row;
    }
    var source = {
       localdata: data,
       datatype: "array"
    };
    var dataAdapter = new $.jqx.dataAdapter(source, {
        downloadComplete: function (data, status, xhr) { },
        loadComplete: function (data) { },
           loadError: function (xhr, status, error) { }
    });

    $("#jqxButton").jqxButton({ width: 100, height: 50,  theme: 'energyblue' });
    $("#mygrid").jqxGrid({ width: 800, height: 450, source: dataAdapter,
           columns: [
                  { text: 'First Name', datafield: 'firstname', width: 100 },
                  { text: 'Last Name', datafield: 'lastname', width: 100 },
                  { text: 'Product', datafield: 'productname', width: 180 },
                  { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
           ], altrows: true, sortable: true, pageable: true, filterable: true,  autoheight: true
    });

    $("#jqxButton").jqxButton({ height: 30 });

[arikbdParticipant]

Sorry I had problem with the images

[arikbdParticipant]

Hi Dimitar,

Thanks. I have downloaded new version and I get the same result

This is after load

</iframe>” alt=”after load” />

This after re-size (wider)

</iframe>” alt=”resize (wider)” />

Still Ok. Now resize (nerrow)

</iframe>” alt=”nerrow” />

The window inside (win1) is not resized

I’m using the same code as above, I just downloaded version 3.2.2 and jquery version 1.11.1

Thanks.

Arikbd.

[arikbdParticipant]

This is still a problem.
Anyone know what the problem is?

10x

Arikbd

[arikbdParticipant]

Peter,

Thanks for your fast replay.
I understand this is the purpose and it is OK, but what can I do if I delete characters from the search text and now I have no event to reflect that change and refresh the list.
Is there event that is fired when the search text is changed?

Thanks,

Arik

[arikbdParticipant]

Just an update:

This is Fusion Charts problem with integration with jQuery 1.10 they should release a fix in the near future.

Thanks,

Arik

[arikbdParticipant]

Peter,

This is not an integration issue, it is a conflict issue.

Each of the controls works fine when placed alone on a page, but when I put them both I have a problem, it is probably Fusion Charts problem. I posted the question to check if this is a known problem. I also posted this issue at fusion charts.

I get TypeError: Cannot call method ‘call’ of undefined when I try to select a row in the grid, but the error is in Fusion Chart JavaScript.

Thanks,

Arik

[arikbdParticipant]

Thanks, I missed that 🙂

Sorry

Arik

[arikbdParticipant]

Hi Dimitar,

So I cannot create a checkboxes tree from source structure? I need to create the tree structure from UL and LI tags?

I created the tree from object structure in source attibute.

Thanks,

Arik

[arikbdParticipant]

This is the code

<ul class="jqx-tree-dropdown-root" style="width: 217px; min-width: 230px;">
   <li id="home" role="treeitem" class="jqx-tree-item-li" style="margin-left: 16px;">
      <div style="position: absolute; width: 13px; height: 13px; cursor: pointer; margin-top: 4.5px; margin-left: 0px;" tabindex="0" class="chkbox jqx-widget jqx-checkbox" id="jqxWidgetd6c293a4cfce">
         <div class="jqx-checkbox-default jqx-fill-state-normal jqx-rc-all">
            <div style="width: 13px; height: 13px;">
               <span style="width: 13px; height: 13px;"></span>
            </div>
         </div>
         <div style="clear: both;"></div>
      </div>
      <div style="display: inline-block; margin-left: 19px;" class="draggable jqx-rc-all jqx-tree-item jqx-item">Home</div>
      <ul class="jqx-tree-dropdown" style="overflow: hidden; display: none;"></ul>
   </li>
   <li id="root" role="treeitem" class="jqx-tree-item-li jqx-disableselect" style="margin-left: 0px; float: none;">
      <span style="height: 17px; border: none; background-color: transparent; float: left; clear: both; width: 16px; margin-top: 3px;" id="arrowroot" class="jqx-tree-item-arrow-expand"></span>
      <div style="position: absolute; width: 13px; height: 13px; cursor: pointer; margin-top: 4.5px; margin-left: 16px;" tabindex="0" class="chkbox jqx-widget jqx-checkbox" id="jqxWidget4e6769d7a958">
         <div class="jqx-checkbox-default jqx-fill-state-normal jqx-rc-all">
            <div style="width: 13px; height: 13px;">
               <span style="width: 13px; height: 13px;"></span>
            </div>
         </div>
         <div style="clear: both;"></div>
      </div>
      <div style="display: inline-block; margin-left: 19px;" class="draggable jqx-rc-all jqx-tree-item jqx-item">node</div>
      <ul class="jqx-tree-dropdown" style="overflow: hidden;">
         <li id="3" role="treeitem" class="jqx-tree-item-li" style="margin-left: 16px;">
            <div style="position: absolute; width: 13px; height: 13px; cursor: pointer; margin-top: 4.5px; margin-left: 0px; opacity: 1;" tabindex="0" class="chkbox jqx-widget jqx-checkbox" id="jqxWidgete87ade8a3121">
               <div class="jqx-checkbox-default jqx-fill-state-normal jqx-rc-all">
                  <div style="width: 13px; height: 13px;">
                     <span style="width: 13px; height: 13px;"></span>
                  </div>
               </div>
               <div style="clear: both;"></div>
            </div>
            <div style="display: inline-block; margin-left: 19px;" class="draggable jqx-rc-all jqx-tree-item jqx-item"> (10.0.0.51)</div>
         </li>
         <li id="2" role="treeitem" class="jqx-tree-item-li" style="margin-left: 16px;">
            <div style="position: absolute; width: 13px; height: 13px; cursor: pointer; margin-top: -3.5px; margin-left: 0px; opacity: 1;" tabindex="0" class="chkbox jqx-widget jqx-checkbox" id="jqxWidget977d22266f1d">
               <div class="jqx-checkbox-default jqx-fill-state-normal jqx-rc-all">
                  <div style="width: 13px; height: 13px;">
                     <span style="width: 13px; height: 13px;"></span>
                  </div>
               </div>
               <div style="clear: both;"></div>
            </div>
            <div style="display: inline-block; margin-left: 19px;" class="draggable jqx-rc-all jqx-tree-item jqx-item">develop3 (10.0.0.34)</div>
         </li>
         <li id="1" role="treeitem" class="jqx-tree-item-li" style="margin-left: 16px;">
            <div style="position: absolute; width: 13px; height: 13px; cursor: pointer; margin-top: -3.5px; margin-left: 0px; opacity: 1;" tabindex="0" class="chkbox jqx-widget jqx-checkbox" id="jqxWidget0688f74a337d">
               <div class="jqx-checkbox-default jqx-fill-state-normal jqx-rc-all">
                  <div style="width: 13px; height: 13px;">
                     <span style="width: 13px; height: 13px;"></span>
                  </div>
               </div>
               <div style="clear: both;"></div>
            </div>
            <div style="display: inline-block; margin-left: 19px;" class="draggable jqx-rc-all jqx-tree-item jqx-item">mailsrv (10.0.0.3)</div>
         </li>
         <li id="5" role="treeitem" class="jqx-tree-item-li" style="margin-left: 16px;">
            :
            :
         </li>
      </ul>
   </li>
</ul>

[arikbdParticipant]

Peter,

can I use something like 50%-75px for the height?

Arik

[arikbdParticipant]

Peter,

Thanks but I do not understand how to do it.

If I remove the height attribute from the jqxTree method I still get the same problem, it seems that the size of the tree control is the size of the entire frame, if I remove the height attribute then the tree does not re-size when I re-size the window.

I want the control to re-size to the full height left in the frame.

B.T.W I tried it on both Chrome and IE 10
Thanks,

Arik

[Author]

Posts