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.





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.

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?

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="";

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!

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="";
                }

This worked fine for me. Thanks for the fix.

Instead of modifying the original dhtmlxgrid.js, can i create a new js file and have only the function setSortImgPos(…) overridden there?

if yes, how? can you give me signature of the method?

[code]dhtmlXGridObject.prototype._init_point_bpatch=dhtmlXGridObject.prototype._init_point;
dhtmlXGridObject.prototype._init_point = function(){

//here, any customization of inner methods can be done
this.setSortImgPos = function(ind,mode,hRowInd,el){
… any custom code…
};

this._init_point=this._init_point_bpatch;
if (this._init_point) this._init_point();
};[/code]