Este exemplo mostra como mudar o estilo de visualização (CSS) de uma cela, fila ou coluna. Para mudar por programação o css de uma cela, deve executar o comando setCellStyle para a cela específica do objeto de rede de dados.
Sintaxe: myGrid.setCellStyle(rowNum, colNum, cssName);
Neste exemplo, sete estilos css se criam em rgbdemo.css. Cada estilo está disponível como elemento seleccionável na lista de distribuição.
.dax_datagrid .style1 {
background-color: #ffff00;
}
.dax_datagrid .style2 {
background-color: #ffc0cb;
}
.dax_datagrid .style3 {
background-color: #00ff00;
}
.dax_datagrid .style4 {
background-color: #ffa500;
}
.dax_datagrid .style5 {
background-color: #0000ff;
}
.dax_datagrid .style6 {
background-color: #a020f0;
}
.dax_datagrid .style7 {
background-color: #ff0000;
}
Nota: Este exemplo somente utiliza css que contem unicamente cor de fundo. Não há restrição sobre o que se pode acrescentar ao css sempre e quando o atributo css seja válido.
Quando se clica em um botão "Aplicar cela", chama-se à função setCSStoCell. Recupera o valor selecionado da lista (que é o nome do estilo css) e o aplica à cela selecionada atualmente determinada pelo número de fila e de coluna.
function setCSStoCell (aObj){
var cssname = aObj.options[aObj.selectedIndex].value;
myGrid.setCellStyle(parseInt(targetrow.value), parseInt(targetcol.value), cssname);
}
Quando se clica em um botão "Aplicar fila", chama-se a função setCSStoRow. Recupera-se o valor selecionado da lista (o nome de um estilo css) e aplica-se a todas as celas, na fila que o usuário tem selecionado.
function setCSStoRow (aObj) {
var cssname = aObj.options[aObj.selectedIndex].value;
for(var i=1;i<=7;i++){
myGrid.setCellStyle(parseInt(targetrow.value), i, cssname);
}
}
Quando se clica em um botão "Aplicar coluna", chama-se a função setCSStoCol. Recupera-se o valor selecionado da lista (o nome de um estilo css) e aplica-se a todas as celas na coluna que o usuário tem selecionado.
function setCSStoCol (aObj) {
var cssname = aObj.options[aObj.selectedIndex].value;
var rownum = myGrid.getParsedDataRecordCount();
for(var i=1;i<=rownum;i++){
myGrid.setCellStyle(i, parseInt(targetcol.value), cssname);
}
}