Hi Thierry,
In bootstrap mode, could we substitute a fontawesome image for the current png for the grid checkboxes (classic-checkbox1.png) ?
You can implement the grid's onControlRefreshed
hook event:
procedure grid.wcHTMLgen
lparameters toHTMLgen, tlInnerHTML
local cJS
text to cJS textmerge noshow flag 1 pretext 5
var oGrid = document.getElementById("<<this.wcID>>").oGrid;
oGrid.onControlRefreshed = function(){;
jQuery("#<<this.wcID>> .aw-toggle-checkbox .aw-item-box .aw-item-marker").removeClass("aw-item-marker").addClass("fa fa-xxx"); // replace 'xxx' by the symbol you want
// you need to cover all 4 checkbox states: (un)checked, enabled and disabled
}
oGrid.refresh();
endtext
toHTMLgen.cScriptJSadd_(m.cJS)
Hopefully it'll cover all grid states across user events; requires testing though.
Thank you Thierry, I will test.
I had thought of simply changing the .png but didn't want to be overwritten during updates
This works, but it remains to manage the substitution for each row of the table.
Hence my suggestion to be able to modify the file or create one for the bootstrap version
Thanks Thierry, I just wanted to edit this file to have a look like Fontawsome. But that is of little interest ...
For example,
Here is a CSS markup we've done in the past to change the checked images for 3 columns in a grid:
.aw-column-6.aw-value-true .aw-item-marker[id] {
background: url("images/dispute.png") no-repeat scroll center center transparent;
height:24px;
width:24px;
}
.aw-column-6.aw-value-true.aw-disabled-control .aw-item-marker[id] {
background-image: url("images/dispute_disabled.png");
}
.aw-column-6.aw-value-true.aw-mouseover-toggle:not(.aw-disabled-control) .aw-item-marker[id] {
background: url("images/dispute_bright.png") no-repeat scroll center center transparent;
height:24px;
width:24px;
}
.aw-column-7.aw-value-true .aw-item-marker[id] {
background: url("images/approve.png") no-repeat scroll center center transparent;
height:22px;
width:24px;
}
.aw-column-7.aw-value-true.aw-disabled-control .aw-item-marker[id] {
background-image: url("images/approve_disabled.png");
}
.aw-column-7.aw-value-true.aw-mouseover-toggle:not(.aw-disabled-control) .aw-item-marker[id] {
background: url("images/approve_bright.png") no-repeat scroll center center transparent;
height:24px;
}
.aw-column-8.aw-value-true .aw-item-marker[id] {
background: url("images/pay.png") no-repeat scroll center center transparent;
height:24px;
}
.aw-column-8.aw-value-true.aw-disabled-control .aw-item-marker[id] {
background-image: url("images/pay_disabled.png");
}
.aw-column-8.aw-value-true.aw-mouseover-toggle:not(.aw-disabled-control) .aw-item-marker[id] {
background: url("images/pay_bright.png") no-repeat scroll center center transparent;
height:24px;
}
Here is the result:
to edit this file to have a look like Fontawsome
would be better and more flexible to replace the aw grid CSS markup by a FontAwesome markup.
Replacing the aw-*
classes using JavaScript like I first suggested is one way to go, changing the aw-*
classes definition through xxx.css
like in the example I just posted is another way.
But that is of little interest ...
Instead of just dropping the issue, posting the result you get from the solutions provided (which require some work and time spent) is always more helpful, both for us and the other FoxInCloud users.
Of course Thierry, but you must have time to make changes when they turn out to be longer than expected.
In addition, I was looking for a global solution for all my grids, which now look like this (which I had published).
I will exclude from the grid the column concerning the checkbox and add a Fontawesome image at the beginning of my caption (with or without a check mark)
Here the result (of a dblclick() on the selected row):
REPLACE MyField WITH " " + wcIconFA('check-square-o', "", "", "", "", "color: #337ab7; font-size: larger") + " " + MyField IN MyCursor
OK, why not…
I would have preferred finding a generic solution to replace the checkbox markup.