btn2state star in grid

Suite and Optimus Suite 5
#1

I’d like to use the form btn2state star in a grid. Is that possible?

#2

See we are clear I’m talking about the stars you see here on this page…
dhtmlx.com/docs/products/dht … state.html
I’d like to use those stars in a grid.

#3

This is how I solved it for whoever is interested. If anyone has a simpler or more elegant way I’d love to see.

All I did was place the star image in the grid then when the user clicks in the column I check the contents of the cell, if the value is “star_on.png” then I do an ajax call to remove from favorites. The ajax success callback function changes the cells value to “star_off.png”. And vice versa to add to favorites.

Main pieces…

Set col type to “img”

mygrid.setColTypes("img,edtxt,ro");

Grid XML (I build my grids in Oracle stored procedures)

cursor cursor1 is
select decode(f.id,null,'off','on') fav, g.id, g.grpname, (select count(*) cnt from grpmember m where m.grp_id = g.id) membercnt
from grp g, grpfav f
where g.id = f.grp_id (+)
and grptype_id = pin('id')
order by g.grpname;

begin
    r := '<rows>';
    for c1 in cursor1 loop
        r := r||'<row id="'||c1.id||'">';
        r := r||'<cell>images/dhtmlx/star_'||c1.fav||'.png^Fav</cell>';
        r := r||'<cell>'||xmlSafe(c1.grpname)||'</cell>';
        r := r||'<cell>'||xmlsafe(c1.membercnt)||'</cell>';
        r := r||'</row>';
    end loop;
    r := r||'</rows>';

Check cell content and based on that do the appropriate ajax call and change the image.

mygrid.attachEvent("onRowSelect", function(id,ind){
    if (ind===0){
        val = mygrid.cellById(id, 0).getValue();
        if(val.substr(val.length-6,2)==='on')
            ...do ajax call to remove from favorites with a success callback function that changes the image...
            mygrid.cellById(id, 0).setValue('images/dhtmlx/star_off.png');
        else
            ...do ajax call to add to favorites with a success callback function that changes the image...
            mygrid.cellById(id, 0).setValue('images/dhtmlx/star_on.png');
    }
    ...
});

11-29-2013 3-15-05 PM.jpg764×339 86.9 KB

#4

The code is a good way to do it. The only thing I might change is to use indexOf() instead of substr() so that if image path is ever changed, the code still works.

I like using grid.enableLightMouseNavigation() as it makes large grids easy to read. When doing so, the “onselect” method cannot be used.

Here’s how to do the same sort of logic with enableLightMouseNavigation enabled:

dhtmlxEvent(grid.obj,"click",function(e){
	var el	= grid.getFirstParentOfType(_isIE?event.srcElement:e.target,"TD");
	var col	= el._cellIndex;
	var row	= el.parentNode.idd;
	var v		= grid.cells(row, 1).getValue()

	if (v.indexOf('block.png') > 0) return

	if (v.indexOf('checkbox_unchecked.png') > 0)
		grid.cells(row, 1).setValue(app.img16('checkbox'))
	else
		grid.cells(row, 1).setValue(app.img16('checkbox_unchecked'))
});
#5

Also, you can find the tutorial here:http://www.dhtmlx.com/blog/?p=2085 describing a creating of a new custom exCell with a rating bar in the dhtmlxgrid.

#6

bmcgin: The substr looks at the end backwards, so the path in front doesn’t matter. And there are issues with indexOf in some browsers so I try to avoid it (issues may be limited to just arrays tho, this is a string so in this case it may be alright to use).

stackoverflow.com/questions/5937 … javascript

Thanks for the enableLightMouseNavigation suggestion!

#7

Oh yeah… I’ve had the indexOf fix in place for so long I’ve forgotten that ie<=8 do not support it:

stackoverflow.com/questions/1154 … javascript

As MS is no longer pushing patch to XP, we’re getting ready to officially no longer support IE8. Looking forward to that!!!