Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Pong on Nov 05, 2007 03:15
open dhtmlx forum
dhtmlxgrid with ajax

excuse me sir,
I want to combine your dhtmlxgrid(v.1.4) and prototype.js
are tehre any ways to replace mygrid.loadXML("data.xml");
by protoype.js Ajax.request?

ajaxObj = new Ajax.Request(
url,
{
    method: 'post',
    postBody: pars,
    asynchronous: true,
onSuccess:function(result){
gridResult(result);
}}
);
Answer posted on Nov 05, 2007 08:39
You can use xmlHttpRequest directly as data source
   
    grid.parseXML(xml_object);

so you can use Ajax model from prototype.js and init grid by xmlHttpRequest object from AJAX object of prototype.js
Answer posted by Pong on Nov 12, 2007 21:59

when I am using v1.2 (free version), it works (v12.gif)
but when I change to v1.4(free version), it works too, but the column width has some problem(v14.gif)
although I have set the column width(I have try % and px), but the width always not match with content after the grid was build.
If I resize the column width, then the content will adjust automatically again

one more question, if I use grid.parseXML(xml_object), all of the profesional function like footer,page function will not work anymore, right??
other than this method, are there any methods may keep these function works too???

Attachments (2)
v12.gif24.03 Kb
v14.gif24.43 Kb
Answer posted on Nov 13, 2007 03:56
As far as I can see problem not directly related to parseXML, but related to moment of initialization, it seems that in moment of initialization grid can't detect its width correctly and set correct column sizes, please try to init grid in moment when page already loaded ( at least HTML surrounding container inside which grid placed ).

Also you can force grid by set correct width of columns by
    grid.setSizes();
this function called automatically after parseXML command , but somehow it doesn't work in your case.

If problem still occurs for you - please provide any kind of sample where problem can be reconstructed. ( I not need fully functional code, just HTML snippet and XML from object used for parseXML command )

>>if I use grid.parseXML(xml_object), all of the profesional function like footer,page function will not work anymore, right??
only functions which will not work - smart rendering, paging, dynamical loading, all other functionality will work correctly.
Answer posted by Pong on Nov 13, 2007 21:27

After my serveral hours testing...I found that when this case will happened.
it is totally works if I

mygrid.loadXML('data.xml');
mygrid.clearall();
mygrid.loadXML('data.xml');

but if I change to

mygrid.loadXML('data.xml');
$('gridDIV').style.display='none';
mygrid.clearall();
mygrid.loadXML('data.xml');
$('gridDIV').style.display='block';

then the width of the grid will be lost....so what can I do now? Your guys will make a patch or I better not chanage the display style?

"if I use grid.parseXML(xml_object), all of the profesional function like footer,page function will not work anymore, right??
only functions which will not work - smart rendering, paging, dynamical loading, all other functionality will work correctly."
but paging is the function that our company looking for, so other than using parseXML, any more solution can let me handle the ajax object by myself but still keep the functionality that loadXML can do?

 

1 more question, I would like to dynamic add a new row and show "no records" when there are no records in a 4 column grids, but it is not works. the text cannot align center and it seems that if column type is different like ("price,ro,price,ro"), then it is also not works.

        mygrid.setColTypes("ro");
        mygrid.addRow(0,"no records",1);
        mygrid.setColAlign("center");
        mygrid.setColspan(0,0,4);

Answer posted on Nov 14, 2007 05:10
>>then the width of the grid will be lost....so what can I do now? Your guys will make a patch or I better not chanage the display style?

In hidden state all inner size not detectable ( display:none nulify all sizes ) so grid can't do it correct on its own, just add next line of code

    mygrid.clearall();
    mygrid.loadXML('data.xml');
    $('gridDIV').style.display='block';
    mygrid.getSizes(); //will fix sizes of columns, need be called after switching back to visible state

>>but paging is the function that our company looking for, so other than using parseXM
The limitation with paging not so strict, there is two problems when using parseXML in paging mode

a) always, after parseXML you need to call
    grid.createPagingBlock(); // this made automatically in case of loadXML

b) If you are using mode with autoloading, grid will executed calls to loadXML to fetch additional data, so you will need something similar to next

    grid.loadXML=function(url){
       // here you need to place your custom code for additional data fetching
       // start index - this.getRowsNum()
    };

>>1 more question, I would like to dynamic add a new row and show "no records" when there are no records in a 4 column grids,
>>but it is not works. the text cannot align center and it seems that if column type is different like ("price,ro,price,ro"), then it is also not works.

Both setColTypes and setColAlign command can be used while initialization, using them may cause unpredictable results, correct code for same task is the next
    mygrid.addRow(0,"no records",1);
    mygrid.setColspan(0,0,4);
    mygrid.setCellExcellType(0,0,"ro");
    mygrid.setCellTextStyle(0,0,"text-align:center");

   
   
Answer posted by Pong on Nov 16, 2007 19:30

when I try to sum the content and display in footer like
193015.66 + 1666.67
or
22370.68 + 5333.33

the result is really strange, here are the function that iget from user manual

function sumColumn(ind){
 var out = 0;
 for(var i=0;i<mygrid.getRowsNum();i++){
     out+= parseFloat(mygrid.cells2(i,ind).getValue())
    }
 return out;
}

 

Answer posted on Nov 19, 2007 02:42
The function is correct ( the only limitation - it may not iterrate correctly in case of paging or smartRendering mode )
Can you please provide more details about problem, what exactly is incorrect?

Also, your can use another itterator, ( which more usefull for treeGrid, but works for plain grids as well )

var sum=0;
grid.forEachRow(function(id){
    sum+=parseFloat(grid.cells(id,ind).getValue());
});
Answer posted by Pong on Nov 20, 2007 03:08
after my searching the google, someone said that javascript is poor in calculate float value, even alert(4.10*100); will produce a wrong ans.

but now I have 2 new question again
1.
I use one grid to load a.xml
onclick a button will load b.xml
the column of a.xml and b.xml is different,
if I set "<afterInit><call command="attachFooter"><param>1279709.01,480.00,1269173.32,2549362.33</param></call></afterInit>"
will produce a err "this.ftr.rows[0].cells[i] has no properties" in dhtmlXgrid.js

the err should be in here
this.ftr.rows[0].cells[i].style.width = this.cellWidthPX[i] + "px";

2.
I try to attach footer in the grid , IE is correct but ff is strange, the column width was lost(ref. to attach new.gif)
I use "    mygrid.parseXML(result.responseXML);" any more things should set??????
Attachments (3)
a.xml539.00 B
b.xml942.00 B
new.gif3.01 Kb
Answer posted by Pong on Nov 20, 2007 03:14
the previous attachment is wrong..here are the correct one
Attachments (1)
new.gif24.07 Kb
Answer posted by Stanislav on Nov 20, 2007 06:54
>>is poor in calculate float value, even alert(4.10*100); will produce a wrong ans
Its not math itself, but storing of fractional values; javascript may be good to operate with whole numbers, but accuracy for fractions is to low



Answer posted on Nov 20, 2007 06:57
>>will produce a err "this.ftr.rows[0].cells[i] has no properties" in dhtmlXgrid.js
Problem caused by different count of columns in grid and in footer - please be sure that attachFooter has the same number of parameters as setHeader

I try to attach footer in the grid , IE is correct but ff is strange, the column width was lost(ref. to attach new.gif)
Not sure what is exact reason, but adding grid.setSizes(); after attachFooter command must resolve issue.
Answer posted by Pong on Nov 20, 2007 18:17
but I'm sure the column of footer and header is the same
a.xml has 9 colum and b.xml has 4 column, "," is the seperator
Answer posted by Pong on Nov 20, 2007 20:05
the third question is ...I try to attach a footer via XML, but the style parameter is not work, here are my program

<call command="attachFooter">
<param>1,2,3,4</param>
<param>"color:red;textalign-left","color:blue","color:blue","color:blue"</param>
</call>
</afterInit>

<call command="attachFooter">
<param>1,2,3,4</param>
<param>["color:red;textalign-left","color:blue","color:blue","color:blue"]</param>
</call>
</afterInit>

both of them is not work....

Answer posted by Pong on Nov 20, 2007 20:46
will produce a err "this.ftr.rows[0].cells[i] has no properties" in dhtmlXgrid.js

I'm quite sure this case is not relate to the size of grid,footer or header column.
because I found that this case will only happened on
for example :
a.xml(4 column) change to b.xml (9 column)
then the err will occurs.
when a fewer column chagne to a large column , the err will occurs

I change the code to
            if (this.ftr) {
         alert(i + " " + typeof(this.ftr.rows[0].cells[i]));
         this.ftr.rows[0].cells[i].style.width = this.cellWidthPX[i] + "px";
     }

that means when i=0,1,2,3 everythings is ok
but when i=4,5,6,7,8 then typeof(this.ftr.rows[0].cells[i]) will become undefined, the errs occurs
Answer posted by Pong on Nov 20, 2007 21:02
I try to attach footer in the grid , IE is correct but ff is strange, the column width was lost(ref. to attach new.gif)
setSize() is not useful in this case, I find the problem is in here
        if (!_isIE) {
            t.width = "100%";
            t.style.paddingRight = "20px";
        }

after I remark this
        //t.width = "100%";

FF is normal now.

Answer posted by Pong on Nov 21, 2007 00:47
4. changePage is not allow via <afterinit>

<call command="changePage">
<param>1</param>
</call>
</afterInit>

firstly I'm sure page 1 is exist(totally I have 5 pages), if I trigger it by xml, the grid will show nothing
Answer posted by Stanislav on Nov 21, 2007 03:13
>>but I'm sure the column of footer and header is the same
>>a.xml has 9 colum and b.xml has 4 column, "," is the seperator

On your screenshot grid has 7 columns, but command which you write has only 4 values for footer.
If you need to reset full grid structure please be sure to call grid.clearAll(true) to remove all existing configuration.

>>but the style parameter is not work, here are my program
You need not quotes
<param>color:red;textalign-left,color:blue,color:blue,color:blue</param>

>>because I found that this case will only happened on  for example : a.xml(4 column) change to b.xml (9 column) then the err will occurs.
please try to use grid.clearAll(true); before reloading data to delete all existing footers for sure
In older versions ( grid 1.3, or initial version of 1.4) you may need to delete the footers manually by
                        if (grid.ftr){
                            grid.ftr.parentNode.removeChild(grid.ftr);
                            grid.ftr=null;
                        }  


>>setSize() is not useful in this case, I find the problem is in here
can you please provide info about used doctype, because this code was never show problem during local tests.

>>4. changePage is not allow via <afterinit>
changePage can be called here, but problem is that afterInit commands called after structure initialized, but before data loaded, so in moment of command execution grid have not necessary page yet, and it ignore switch to not existing page


Answer posted by Pong on Nov 21, 2007 20:11
>>but I'm sure the column of footer and header is the same
>>a.xml has 9 colum and b.xml has 4 column, "," is the seperator
>>because I found that this case will only happened on  for example : a.xml(4 column) change to b.xml (9 column) then the err will occurs.

after I use this function then it resume normal,  thanks you so much, I think I am using  grid 1.3, or initial version of 1.4

>>but the style parameter is not work, here are my program
<param>color:red;textalign-left,color:blue,color:blue,color:blue</param>
this solution is not work for me, it has nothing changed, is it relate to the version problem again???
other than change the style, are there any standard ways to change the style to cells in price type? (ref. to the attachment)

>>setSize() is not useful in this case, I find the problem is in here
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-TW" lang="zh-TW">

using Firefox 2.0.0.9

I'm agree with you that I better not remark t.width = "100%";
since I got problem when I remark it, so pls help, why this case aleays happened on my FF, is it version problem again?

>>4. changePage is not allow via <afterinit>
I got your meaning so  give it up,


I have a new question, I would like to show a "loading " <DIV> when I changing the page,
function showDIV(){
    alert('show');
    $('loading').show();
}         

function hideDIV(){
    alert('hide');
    $('loading').hide();
}         

    mygrid.setOnPaging(showDIV);
    mygrid.setOnPageChanged(hideDIV);

actually the code is works, I use alert to make sure it is really works, but if I remark the alert, the show and hide of DIV  is too fast, I can't see any effects on it
maybe you will think I have too fews data so the PC take too few time to create the page.
but actually I have 10000 record, 500 per page, when I changing the page, IE seems hang for several second, that mean it is creating the page.
so why I can't see the "loading" DIV? can I change your source code to make the DIV show earlier (before creating the pages)??how???




thank you for your kindly help, I'm sorry that I disturb you again and again

Attachments (1)
footer.gif8.78 Kb
Answer posted by Pong on Nov 21, 2007 20:56
I have a new question on paging

function setGrid(){
    mygrid.enablePaging(true,50,5,'resultPaging',true);
    mygrid.setOnPaging(showDiv);
    mygrid.setOnPageChanged(hideDiv);
    mygrid.loadXML('a.xml');  
}

suppose a.xml has 150 record, although I set 5 pages per group , there are only 3 pages now.
if I onlick something to change the xml file to b.xml

function reloadGrid(){
    mygrid.detachHeader(0);
    mygrid.detachFooter(0);
    mygrid.xmlLoader.destructor();
    if (mygrid.ftr){
        mygrid.ftr.parentNode.removeChild(mygrid.ftr);
        mygrid.ftr=null;
    }
    mygrid.clearAll(true);
    mygrid.loadXML('b.xml');  
}

suppose b.xml has 1500 records, there should be has 30 page, divided into 6 group, each groups has 5 pages right???
but actually if show 3 pages per group with 10 group only.

are there anything I missed?

Answer posted on Nov 23, 2007 06:48
>>suppose b.xml has 1500 records, there should be has 30 page, divided into 6 group, each groups has 5 pages right???
>>but actually if show 3 pages per group with 10 group only.

Problem confirmed and fixed, fix will be released as part of next build.
If you need fix ASAP - please contact directly at support@dhtmlx.com , and provide your ref. number - we will send you updated code.

In common case you can access and update the count or pages in group as
    grid.pagesInGroup=10;
    grid.changePage();

   


Answer posted on Nov 23, 2007 06:53
>>but actually I have 10000 record, 500 per page, when I changing the page, IE seems hang for several second, that mean it is creating the page.
>>so why I can't see the "loading" DIV? can I change your source code to make the DIV show earlier (before creating the pages)??how???

Issue caused by javascript nature, while current javascript thread not fineshed no any change in DOM will be rendered , so in result you have

- javascript started
- first event called
- modification in DOM
- second event aplied
- modification reverted
- new rows added to grid
- javascript ended
- changes to DOM rendered in browser

the only way to made you message visible is to break single thread on few, by using setTimeout functionality.
Answer posted on Nov 23, 2007 06:59
>>but the style parameter is not work, here are my program
><param>color:red;textalign-left,color:blue,color:blue,color:blue</param>
>this solution is not work for me, it has nothing changed, is it relate to the version problem again???
>other than change the style, are there any standard ways to change the style to cells in price type? (ref. to the attachment)

You can access cell through DOM as
    grid.ftr.rows[row_index].cells[cell_index].style.color="some";
where row_index - index of row inside footer.
( the styles works correctly for me, if necessary I can provide working sample )

>>setSize() is not useful in this case, I find the problem is in here
><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-TW" lang="zh-TW">

Unfortunately problem can't be reconstructed with local samples.
If problem still occurs for you - please provide any kind of sample where problem can be reconstructed. ( you can contact directly at support@dhtmlx.com )


Answer posted by Pong on Dec 06, 2007 02:48

sorry sir I have a new question again

I try to use

loadXML('a.xml');

in safari, and it works. But it has no response if I use grid.parseXML(xml_object); directly. I'm sure my program has no problem since it works in IE and FF too

 

Answer posted by Support on Dec 06, 2007 03:43
Actually there must not be any difference for safari 2.x or safari 3.x - they both use standard XMLHttpRequest object, so code must work for them same as for FireFox
In case of safari 1.x problem can really occur, because it use different loading scheme.

Which value you are use as incoming param of parseXML ? ( please be sure that it is valid XML object )
Answer posted by Pong on Dec 07, 2007 00:28

my safari is 2.x

I'm sure I pass a valid xml object beacause it work in all browser except safari.
will it be possible that safari support loadXML() but not parseXML() since it works in loadXML.

Answer posted by Support on Dec 07, 2007 06:54
We still not able to reconstruct such problem - if it possible to isolate is as separate sample - please send it to support@dhtmlx.com, becuase we can't suggest anything without ability to reconstruct issue
Answer posted by Pong on Dec 14, 2007 02:12

1 more bug seems closed with the last bug I report

function setGrid(){
    mygrid.enablePaging(true,50,5,'resultPaging',true);
    mygrid.setOnPaging(showDiv);
    mygrid.setOnPageChanged(hideDiv);
    mygrid.loadXML('a.xml');  
}

function reloadGrid(){
    mygrid.detachHeader(0);
    mygrid.detachFooter(0);
    mygrid.xmlLoader.destructor();
    if (mygrid.ftr){
        mygrid.ftr.parentNode.removeChild(mygrid.ftr);
        mygrid.ftr=null;
    }
    mygrid.clearAll(true);
    mygrid.loadXML('b.xml');  
}

a.xml has zero record, so the counter will show "no records"
then I load b.xml, b has 49 record, but counter still show "no records"
I found that the counter will only show correct result when the num of xml records is larger than
"mygrid.enablePaging(true,50,5,'resultPaging',true);"
 num of rec per page, otherwise it won't updated