Rejilla de datos - Estilos de celdas independientes

Este ejemplo muestra cómo cambiar el estilo de visualización (CSS) de una celda, fila o columna. Para cambiar por programación el css de una celda, debe ejecutar el comando setCellStyle para la celda específica del objeto de la rejilla de datos.

    Sintaxis: myGrid.setCellStyle(rowNum, colNum, cssName);

En este ejemplo, siete estilos css se crean en rgbdemo.css. Cada estilo está disponible como elemento seleccionable en la lista desplegable.

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

Ejemplo: Aplicar a celda

Cuando se hace clic en un botón "Aplicar celda", se llama a la función setCSStoCell. Recupera el valor seleccionado de la lista (que es el nombre del estilo css) y lo aplica a la celda seleccionada actualmente, determinada por el número de fila y de columna.

    function setCSStoCell (aObj){
        var cssname = aObj.options[aObj.selectedIndex].value;
        myGrid.setCellStyle(parseInt(targetrow.value), parseInt(targetcol.value), cssname);
    }

Ejemplo: Aplicar a fila

Cuando se hace clic en un botón "Aplicar fila", se llama la función setCSStoRow. Se recupera el valor seleccionado de la lista (el nombre de un estilo css) y se aplica a todas las celdas en la fila que el usuario ha seleccionado.

    function setCSStoRow (aObj) {
        var cssname = aObj.options[aObj.selectedIndex].value;
        for(var i=1;i<=7;i++){
            myGrid.setCellStyle(parseInt(targetrow.value), i, cssname);
        }
    }

Ejemplo: Aplicar a columna

Cuando se hace clic en un botón "Aplicar columna", se llama la función setCSStoCol. Se recupera el valor seleccionado del la lista (el nombre de un estilo css) y se aplica a todas las celdas en la columna que el usuario ha seleccionado.

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