Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Nagh on Jan 16, 2008 10:34
open dhtmlx forum
Way to move sorting arrow closer to header element's text

xgrid control

Is it possible to move arrow that shows sorting direction in the header from top-right column, to custom place or on the right side of text(or textalike) element of a header column. So it'll look same like in standart windows controls.

Right now its pretty tricky to notice this arrow on the right side of the really wide column, when doing sorting if your header text relatively small and aligned to left side of the header.


Answer posted by Support on Jan 17, 2008 02:40
In current model - sorting image set as absolutly positioned ellement, so while it possible to adjust it position ( for example chage to left corner instead of rights ) it pretty hard to place it relative to header text.
You can check of
    dhtmlxgrid.js , this.setSortImgPos = function(ind,mode,hRowInd,el){
code of this method place sorting image in necessary position.
Answer posted by Nagh on Jan 17, 2008 04:13
Is there a reason to make this element absolutly positioned and not just added as image after or before user specified header, therefore its position can be adjusted by user added html or even setting it to macro style element?
Answer posted by Support on Jan 17, 2008 06:44
Grid supports few modes in which such solution was the only possible ( graphic headers for example )
Actually it pretty easy to modify it for "injecting" behavior, but I'm not sure that it will work correctly in all possible modes in such case

dhtmlxgrid.js

      this.setSortImgPos = function(ind,mode,hRowInd,el){
            ...
                              /* existing code commented
                              this.sortImg.style.left = Number(pos[0]+wdth-13)+"px";//Number(pos[0]+5)+"px";
                              this.sortImg.defLeft = parseInt(this.sortImg.style.left)
                              this.sortImg.style.top = Number(pos[1]+5)+"px";
                              */
                               //next lines added
                              el.firstChild.appendChild(this.sortImg)
                              this.sortImg.style.position="";
Answer posted by Nagh on Jan 17, 2008 08:52
Thanks, that is exactly what I need.
I have modified your code in this way:

               //Old code
               //this.sortImg.style.left = Number(pos[0]+wdth-13)+"px";//Number(pos[0]+5)+"px";
               //this.sortImg.defLeft = parseInt(this.sortImg.style.left)
               //this.sortImg.style.top = Number(pos[1]+5)+"px";
               //New code
               if (this.alignSortArrow == "header-left") {
                                el.firstChild.appendChild(this.sortImg)
                                this.sortImg.style.position="";
               } else {
                                this.sortImg.style.left = Number(pos[0]+wdth-13)+"px";//Number(pos[0]+5)+"px";
                                this.sortImg.defLeft = parseInt(this.sortImg.style.left)
                                this.sortImg.style.top = Number(pos[1]+5)+"px";
               }


     this.setAlignSortArrow = function(str){
       this.alignSortArrow = str;
     }    

This way I can turn this functionality on/off and its disabled by default, also I can add more option for future use )

Thanks again for your help!
Answer posted by Nagh on Jan 18, 2008 05:36
Posted code about requires additional changes, to avoid potential problem (for ex: with column moving routine):
                //code to replace
                el.firstChild.appendChild(this.sortImg)

                this.sortImg.style.position="";
                                           // new code
                if (el.firstChild!=null) {
                                  el.firstChild.appendChild(this.sortImg)
                                  this.sortImg.style.position="";
                }