Start Building Professional
Web Apps Today

Change default sort image

Is it possible to change the default sort image ? (have a different image for up / down sort events instead of (sort_asc.gif)).
If yes, how could this be set programatically?

Balaji

There is no way to change the image through API, but you can just replace sort_asc.gif  and sort_desc.gif with you custom images. 

I did a save as of sort image(png) as gif. But this time the image gets rendered in next column for few headers.
Is there a way to make it appear closer to header text.

Refer attachment. (The image gets rendered in description column whereas it should appear in the target column).

mygrid = new dhtmlXGridObject("gridbox");
        mygrid.setImagePath("/bca-networks/images/");
       
        var sessionFilter = '<input id="sessionFilter" type="text" name="sessionFilter" onclick="disableSorting(event)" onkeydown="doSearch(arguments[0]||event)"/>';
        var sourceFilter = '<input id="sourceFilter" type="text" name="sourceFilter" onclick="disableSorting(event)" onkeydown="doSearch(arguments[0]||event)"/>';
        var descrFilter = '<input id="descrFilter" type="text" name="descrFilter" onclick="disableSorting(event)" onkeydown="doSearch(arguments[0]||event)"/>';
       
        var filters = new Array(sessionFilter,'&nbsp;','&nbsp;','&nbsp;',sourceFilter, '&nbsp;', '&nbsp;',descrFilter);
        mygrid.setHeader("Thread ID,Severity,Date/Time,Category,Source,Event,Target,Description");
       
        mygrid.attachHeader(filters);
       
       
        mygrid.setInitWidthsP("10,10, 10, 10, 10, 15, 15, 20")
        mygrid.setColAlign("center,center,center,center,center,center,center,center");
        mygrid.setColTypes("ro,img,ro,ro,ro,ro,ro,ro");
        mygrid.setColSorting("server,na,server,na,server,na,server,server");
       
       
        mygrid.attachEvent("onXLS",function(id,m){
            showLoading(true);
           
         });
        mygrid.attachEvent("onXLE",function(id,m){
            showLoading(false); 
        });
       
       
        mygrid.attachEvent("onBeforeSorting",customColumnSort);

        
        mygrid.setSkin("light");
        mygrid.enableRowsHover(true, "dhtmlxtableHoverClass");
        mygrid.enableAutoHeight(true, 700, false);
        mygrid.enableMultiline(true);
        mygrid.enablePaging(true,25,null,"pagingArea",true,"recinfoArea");
        mygrid.setPagingSkin("bricks");
        mygrid.setXMLAutoLoading("/bca-networks/home/displayEventList.do?streamEvents=true", 25);
        
        mygrid.init();

       mygrid.hdr.rows[1].cells[0].onmouseover=function(event){
        mygrid.hdr.rows[1].cells[0].style.textDecoration = "underline";
        mygrid.hdr.rows[1].cells[0].firstChild.style.cursor = "pointer";
        }
       
        mygrid.hdr.rows[1].cells[2].onmouseover=function(event){
        mygrid.hdr.rows[1].cells[2].style.textDecoration = "underline";
        mygrid.hdr.rows[1].cells[2].firstChild.style.cursor = "pointer";
        }  
       
        mygrid.hdr.rows[1].cells[4].onmouseover=function(event){
        mygrid.hdr.rows[1].cells[4].style.textDecoration = "underline";
        mygrid.hdr.rows[1].cells[4].firstChild.style.cursor = "pointer";
        }
       
        mygrid.hdr.rows[1].cells[6].onmouseover=function(event){
        mygrid.hdr.rows[1].cells[6].style.textDecoration = "underline";
        mygrid.hdr.rows[1].cells[6].firstChild.style.cursor = "pointer";
        }  
       
        mygrid.hdr.rows[1].cells[7].onmouseover=function(event){
        mygrid.hdr.rows[1].cells[7].style.textDecoration = "underline";
        mygrid.hdr.rows[1].cells[7].firstChild.style.cursor = "pointer";
        }
       
        mygrid.hdr.rows[1].cells[0].onmouseout=function(event){
        mygrid.hdr.rows[1].cells[0].style.textDecoration = "none";
       
        }
       
        mygrid.hdr.rows[1].cells[2].onmouseout=function(event){
        mygrid.hdr.rows[1].cells[2].style.textDecoration = "none";
       
        }  
       
        mygrid.hdr.rows[1].cells[4].onmouseout=function(event){
        mygrid.hdr.rows[1].cells[4].style.textDecoration = "none";
       
        }
       
        mygrid.hdr.rows[1].cells[6].onmouseout=function(event){
        mygrid.hdr.rows[1].cells[6].style.textDecoration = "none";
       
        }  
       
        mygrid.hdr.rows[1].cells[7].onmouseout=function(event){
        mygrid.hdr.rows[1].cells[7].style.textDecoration = "none";
       
        }

        var xmlString = '<%=EventsXMLFormatter.format((Collection)request.getAttribute("eventList"), Integer.parseInt((String)request.getAttribute("totalCount")), 0)%>';  
   
        mygrid.parse(xmlString);

The position of image calculated for default image size and may be not good, if you have changed image to one with different size.
The position calculations are hardcoded , so you can change relative part of code

dhtmlxgrid.js line 1067
            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";


or use onAfterSorting event to catch moment when sorting finished and set necessary position of grid.sortImg , which points to the sorting image HTML object.

The code we have received is garbled up without formatting.

Can you send us formatted version of codebase (grid component all js).

-Balaji

The package contains uncompressed version of all js files, check 
   dhtmlxGrid/sources/...

Overriden setSortImgPos to do an appendChild.

if(el) {
                  mygrid.sortImg.style.visibility='visible';
                  if(window.a_direction) {
                    if(window.a_direction == 'asc') {
                        mygrid.sortImg.src = "/bca-networks/images/arrow_down.png";
                    } else {
                        mygrid.sortImg.src = "/bca-networks/images/arrow_up.png";
                    }
                  }
                  mygrid.sortImg.style.display='inline';
                  mygrid.sortImg.style.padding='0px 0px 0px 6px';
                  el.firstChild.appendChild(mygrid.sortImg);
                  mygrid.sortImg.style.position="";
              }