Rede de dados - Estilos de celas independentes

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.

Exemplo: Aplicar a cela

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);
    }

Exemplo: Aplicar a fila

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);
        }
    }

Exemplo: Aplicar a coluna

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);
        }
    }