jQuery Grid Checkbox Column Alternatives

La columna de casilla de verificación (introducida con la última versión, consulte esta publicación sobre el uso de columnas de casilla de verificación con la cuadrícula Infragistics jQuery) se creó para proporcionar un 'acceso directo' para transformar columnas con valores booleanos en casillas de verificación y, en su mayoría, se hizo realidad debido al gran interés en dicha funcionalidad por parte de los clientes (y después de todo, tiene mucho sentido).

Por supuesto, este no es un mundo perfecto y la creación de valores predeterminados que puedan adaptarse a las necesidades de todos es probablemente una causa perdida. Si echa un vistazo al blog introductorio anterior, de hecho está ahorrando mucho tiempo: configurar una sola propiedad es todo lo que se necesita. Eso es bueno y todo, pero como se puede ver incluso en los comentarios y en nuestros foros, hay una limitación: la columna de casillas de verificación funciona muy bien, pero se vuelve tímida cuando se trata de plantillas.

El problema

En la referencia de la API de Grid, en 'renderCheckboxes', dice "Esa opción no está disponible cuando se usa jQueryTemplating". Eso es solo un poco engañoso y sin duda se actualizará, ya que esto, de hecho, incluye nuestro propio motor de plantillas. Entonces, en esencia, lo anterior debe leerse como 'Esa opción no está disponible cuando se usa plantillas'. Esto se debe a que, por diseño, la característica de columna Casilla de verificación se suprime en tales casos, ya que una plantilla de fila puede tener su propia representación para la columna.

Esa puede o no ser una explicación intuitiva de por qué no estará disponible con la plantilla de columna también, pero una vez que lo piensas, la cuadrícula representa filas, tiene una plantilla predeterminada para hacerlo: una plantilla de fila. La definición de una columna simplemente termina incluyéndose en algún lugar del camino en esa plantilla de fila, en lugar de la predeterminada. Es por eso que las plantillas en general deshabilitarán esta función.

Pero no te preocupes, hay opciones como siempre. Me topé con esto y, dado que los comentarios de los clientes nos lo señalaron (¡sigue así, nos gustan los comentarios constructivos!) en este blog compartiré mi experiencia con la búsqueda de formas alternativas de tener dicha funcionalidad.

La solución

Template Checkbox

Por extraño que parezca, el problema también es la parte principal de las soluciones, ya que es la forma más fácil de alterar la representación de la interfaz de usuario de sus datos y también es muy flexible para ajustarlo a su gusto. Usando esto para agregar casillas de verificación en no todos los nuevos () y, como se mencionó, la función en sí misma está destinada a ser un atajo para eso.

Una advertencia justa: Estoy compartiendo mi experiencia y por eso voy a repasar dos enfoques diferentes que tomé. Antes de sumergirse en el uso de uno, asegúrese de haber visto y considerado ambos.

Por lo tanto, el primer enfoque es usar una entrada HTML simple de tipo etiqueta de casilla de verificación y asignarle nuestro valor. Este es el enfoque que puede ver en las dos publicaciones del foro vinculadas anteriormente. Puede aplicar la plantilla a su plantilla de fila (si ya está utilizando una) o simplemente asignarla a una sola columna. Para fines de demostración, usaré la tabla Employees de AdventureWorks () para la columna de bandera asalariada y así es como se vería una configuración de cuadrícula:

$("#grid").igGrid({
    primaryKey: "BusinessEntityID",
    height: 550,
    dataSource: "@Url.Action("Employees")",
    autoGenerateColumns: false,
    columns: [
        { key: "BusinessEntityID", width: "50px", headerText: "ID", dataType: "number" , template: "<a style=\'font-size:20px;\' href=\'http://msdn.microsoft.com/en-us/library/ms124432(v=sql.100).aspx\'>${BusinessEntityID}</a>'},
        { key: "LoginID", width: "250px", headerText: "Login ID", dataType: "string" },
        { key: "JobTitle", width: "220px" , headerText: "Job Title", dataType: "string" },
        { key: "SalariedFlag", width: "120px", headerText: "SalariedFlag", dataType: "bool", template: "<input type=\"checkbox\" {{if ${SalariedFlag} === \"true\"}} checked=\"checked\" {{/if}} disabled=\"disabled\" style=\'display: block; margin-left: auto; margin-right: auto;\'>'}
    ],
    features: [
        { name: "Filtering", mode: "advanced", type: "local" },
        { name: "Sorting", type: "local" }]
});

Tenga en cuenta que la primera columna también tiene una plantilla, un vínculo a la misma descripción de la tabla en MSDN, y, como está visible, eso no impide que aparezcan las casillas, además de funcionar bien con características como la ordenación y el filtrado:

Mejoras

La plantilla anterior no es más que un mero ajuste de renderizado y no viene con un paquete de interacción. Otro punto justo de los clientes es que la interacción predeterminada se puede mejorar, ya que la columna de casilla de verificación requiere 3 clics para actualizarse, que es como se comporta la edición de filas con selección: 1 clic para seleccionar, otro para ingresar a editar y tercero para cambiar el valor. Aunque este no era el problema original, ya que ahora tienes el control de las casillas de verificación, ¿por qué no mejorar un poco las cosas?

El primer paso es eliminar la parte deshabilitada, por supuesto. A continuación, tendrías que gestionar la interacción del usuario con la casilla de verificación, así que añade algo como lo siguiente:

data-rowid=\"${BusinessEntityID}\" onchange=\"checkboxChanged(event);\"

a la plantilla. Para las entradas de casilla de verificación habilitadas, los eventos onchange y click son básicamente intercambiables, así que elija uno, pero el nombre del parámetro pasado al handle *must* be 'event'. El atributo 'data-' es la forma más fácil de almacenar información para la ubicación de la casilla de verificación: la cuadrícula hace lo mismo con los elementos de las filas si se mira más de cerca y es mucho más fácil almacenarla en la creación, ya que luego tiene acceso a la entrada de datos de la fila separada y apenas agregará ninguna sobrecarga. Ahora, lo fácil que es con la API de actualización poner esa plantilla en uso:

function checkboxChanged(evt) {
    // get rowID where change occured:
    var rowId = $(evt.currentTarget).data().rowid;
    $("#grid").igGridUpdating("updateRow", rowId, { "SalariedFlag": evt.currentTarget.checked });
}

El uso del método jQuery data() nos da ese ID de fila en un instante y el evento pasado puede decirnos el estado de la casilla de verificación para asignar a ese valor de columna. Tenga en cuenta que esto requiere que la actualización se cargue como un recurso y se agregue a las características de la cuadrícula (). Y eso lleva a algunos problemas que pueden surgir

Al actualizarse entra en escena.

Es bastante razonable suponer, dado que la edición de las casillas de verificación y la actualización ya están involucradas, que se supone que la cuadrícula proporciona la experiencia de edición completa. Sin embargo, una vez activado el modo de edición, la interfaz de usuario de celda/fila editada es independiente, lo que significa que si no implementa un proveedor usted mismo, obtendrá el editor de estilo combinado predeterminado:

Ahora, eso puede o no ser un problema para usted (funcionará bien y las casillas de verificación se actualizarán una vez que salga del modo de edición), pero en aras de una experiencia constante, sería bueno si el editor también pudiera ser una casilla de verificación. preferiblemente el mismo. En este punto tienes bastantes opciones, realmente, solo proporcionaré algunos ejemplos de cómo creo que esto se puede mejorar y usar.

Un pequeño truco para probar es establecer esa misma columna como de solo lectura. Ya tiene un control que establece el valor de la celda independientemente del estado de edición y, por lo tanto, puede continuar y establecer esa misma columna como de solo lectura. Lo que eso haría es evitar que la interfaz de usuario de la celda sea reemplazada por el editor y, en el modo de fila, permanecerá sin cambios. Eso significa que no hay combo como el anterior y la misma casilla de verificación con el mismo controlador de eventos todavía listo para la acción. Sin embargo, se requiere un ajuste: dado que el método Update Row no está diseñado para llamarse desde dentro de la sesión de edición, actualizará la interfaz de usuario. ¿Todo bien? No. El problema es que en el caso de que tenga la cuadrícula con la configuración anterior e intente actualizar una fila cuando la edición esté activada, entonces el comportamiento incómodo está garantizado. La interfaz de usuario se actualiza, pero la edición sigue activa a pesar de que la cuadrícula parece que salió de esa y dado que no hay botones u otros elementos que manejen la edición de la sesión de edición. bueno, está atascado. Veo algunas opciones aquí, cosas como finalizar la edición (el método está disponible, por supuesto) antes de llamar a la fila de actualización, pero eso se cierra inmediatamente al cambiar la casilla de verificación y eso probablemente no es lo que el usuario esperaría que sucediera. Por otra parte, puede deshabilitar las casillas de verificación mientras edita, pero ese no es el camino a seguir cuando la edición está activa.

Lo que puede hacer es guardar el cambio directamente en los registros de transacciones de la fuente de datos, después de todo, la casilla de verificación se encargará de su interfaz de usuario, pero es posible que requiera trabajo adicional (evento de datos desfasados, reenlace) para que funcione correctamente con otras características. También puede simplemente reiniciar la edición en la misma fila para el usuario:

function checkboxChanged(evt) {
    // get rowID where change occured:
    var rowId = $(evt.currentTarget).data().rowid;
    // if editing is active - update just the cell, otherwise use row update
    if($("#grid").igGridUpdating("isEditing")){
        $("#grid").igGridUpdating("endEdit");
        $("#grid").igGridUpdating("setCellValue", rowId, "SalariedFlag", evt.currentTarget.checked);
         
        //optionally can start the editing on the same row again
        //need row index:
        var rows = $("#grid").igGrid("rows");
        var rowIndex;
        //var context = this;
        $.each(rows, function (index, row) {
            if ($(row).data().id == rowId) {
                rowIndex = index;
            }
        });
        //make sure you let the calling code exit before attempting start edit,
        // a few milliseconds should be enough
        setTimeout(function () { $("#grid").igGridUpdating("startEdit", rowIndex, 1); }, 2);
    }
    else {
        $("#grid").igGridUpdating("updateRow", rowId, { "SalariedFlag": evt.currentTarget.checked });
    }
}

El fragmento de código anterior muestra cómo obtener el índice de fila del ID y comenzar a editar en esa fila con un pequeño retraso (se llama al controlador de eventos dentro de la función anónima en otro lugar). Finalizar e iniciar la edición provoca el cambio de la interfaz de usuario, lo que a su vez provoca un ligero parpadeo, pero con algo de deseo y ajustes de CSS que se pueden cambiar.

Tenga en cuenta que puede explorar la posibilidad de crear un proveedor de editor personalizado para una experiencia aún mejor y mostraré algo sobre eso en la siguiente parte.

No Boolean? No problem!

Si te has dado cuenta hasta ahora, hay una conexión muy débil entre el valor real y la representación: nuestra lógica dicta tanto la representación como el resultado de la interacción. Por lo tanto, nada le impide usar más que solo booleano (cadenas, números, valores nulos), todos bastante plausibles. Tal vez explore también más de dos estados de la casilla de verificación. Vamos a tener la tabla SpecialOffers de AdventureWorks en la que una propiedad MaxQty para cada oferta indica un OR 'NULL' máximo. No quiero solo mostrar esos datos, quiero mostrar un resultado de la evaluación de esos. Puede que no sea el mejor ejemplo, pero tendré una columna que mostrará si la oferta tiene un máximo:

$.ig.loader(function () {
    $("#grid").igGrid({
        primaryKey: "SpecialOfferID",
        height: 550,
        dataSource: "@Url.Action("SpecialOffersData")",
        autoGenerateColumns: false,
        columns: [
            { key: "SpecialOfferID", width: "100px", headerText: "ID", dataType: "number" , template: "<a style=\'font-size:20px;\' href=\'http://msdn.microsoft.com/en-us/library/ms124455(v=sql.100)\'>${SpecialOfferID}</a>'},
            { key: "Description", width: "250px", headerText: "Description", dataType: "string" },
            { key: "Type", width: "220px" , headerText: "Type", dataType: "string" },
            { key: "MaxQty", width: "150px", headerText: "Has MaxQty", dataType: "string", template: "<input type=\"checkbox\" {{if parseInt(${MaxQty}) }} checked=\"checked\" {{/if}} data-rowid=\"${SpecialOfferID}\"  data-test=\"${MaxQty}\" onchange=\"checkboxChanged(event);\" style=\'display: block; margin-left: auto; margin-right: auto;\'>'}
        ],
        features: [
            { name: "Filtering", mode: "advanced", type: "local" },
            { name: "Sorting", type: "local" },
            { name: "Updating"}]
    });
});

Tenga en cuenta que la casilla de verificación solo se marca si el valor no es uno de los equivalentes 'falsos' (el análisis devuelve NaN, por ejemplo, cuando falla). Además, puede establecer los valores de la misma manera: agregue null para false y valor predeterminado/calculado para true:

function checkboxChanged(evt) {
    // get rowID where change occured:
    var rowId = $(evt.currentTarget).data().rowid;
    var newValue = evt.currentTarget.checked ? 10 : null;
    $("#grid").igGridUpdating("updateRow", rowId, { "MaxQty": newValue });
}

Los resultados (tanto de SQL Management Studio como de la aplicación en ejecución con jQuery Grid):

Y nuevamente, los trucos de actualización mencionados se pueden implementar para esto de manera idéntica.

Seguir adelante

A continuación, se muestra una comparación rápida entre la plantilla de bricolaje y la columna de casilla de verificación predeterminada:

PROS

• Funcionará con otras plantillas.
• Fácil de implementar: 1 línea para escenarios simples.
• No se limita solo a los valores booleanos.
• Como solución personalizada, no se limita a una casilla de verificación de dos estados, se puede implementar potencialmente una casilla de verificación de tres estados()

CONTRAS

• Requiere algo de código para lograr resultados similares.
• Puede ser algo complicado de implementar si también es necesario para funcionar dentro del modo de edición Actualización. En general, en relaciones complicadas con la función de actualización.

• Las implementaciones del navegador no se ven nada especial y (corríjame si me equivoco) tampoco se garantiza que se vean igual.

  
  

Esperemos que esta experiencia haya sido útil para todos aquellos que tienen en mente mayores funcionalidades que pueden proporcionar los valores predeterminados. Como dije anteriormente, esto es solo yo compartiendo experiencias, hay una curva de aprendizaje aquí y esta no es la única ni la solución final. ¡Estén atentos para otro enfoque en el próximo blog!

El proyecto de demostración está disponible para su descarga. Como siempre, puedes seguirnos en Twitter@DamyanPetevy@ Infragisticsy mantenerte en contacto enFacebook,Google+yLinkedIn.