Manipulate the grid checkboxes with Knockoutjs and KendoUI

Question

Manipulate the grid checkboxes with Knockoutjs and KendoUI

Navigation

#1 by (3 votes)
#2 by (1 votes)

9

I would like to know how to detect the change in ownership of an observable object in a grid when selecting a checkbox with knockoutjs. The code that I currently have is this way.

<div data-bind="kendoGrid:{data: asignados, columns:columns}"></div>

<script type="text/javascript>
var RecursosVm = function () {
var self = this;
self.columns = [
    {
        title   : "",
        field   : "isChecked",
        template: "<input type='checkbox' data-bind='checked: checkedAlert'/>"
    },
    { title: "Código", field: "reC_CLIENTKEY" },
    { title: "Nombre", field: "reC_NOMBRE_COMPLETO" }
];
self.asignados = ko.observableArray([]);
self.disponibles = ko.observableArray([]);
self.checkedAlert = function() {
    //aqui deberia capturar el objeto
};
self.moverDisponibles = function() {
   //TODO:
}}

The problem is that selecting the checkbox does not change the value of the object or trigger the function and there is no way to recover the selected objects.

javascript kendoui knockoutjs

asked by yurivan 18.11.2015 в 18:49

source

2 answers

How to load data in Spinner Determine how they are displayed Apply filters to NoSQL query in MongoDB

score 3 · Answer 1

The checked binding requires a boolean or a observable of boolean to bindearlo al html

If you need to execute a function by changing the value of the checkbox in the UI you can create a Writable computed observable for such an end

self._checkbox = ko.observable(false); //o el valor por defecto que necesites
self.checkedAlert = ko.computed({
    read: function () {
        return this._checkbox();
    },
    write: function (value) {
        //TODO: Acá va lo que quieres ejecutar cuando se cambia el valor del checkbox
        this._checkbox(value);
    },
    owner: self
});

score 1 · Answer 2

Problem and solution

You have confused a event of type checked with the data link or binding of type checked . Knockout binding requires an expression of type Observable or a static value, not a function that manages an event.

<input type='checkbox' data-bind='checked: <expresión>'/>

In this case you have to define an observable for each resource that represents the status of being selected and link the interface to it:

...
self.isChecked = ko.observable(valorInicial);
...

<input type='checkbox' data-bind='checked: isChecked'/>

Depending on what you should do when the checkbox is alternated, it may make sense to subscribe to the change (a) or to extend your model with a computed that depends on the different observables isChecked, if this fits in your needs. For example:

a) Subscribe method

self.isChecked.subscribe(function (value) {
    // Ojo: se dispara siempre al cambiar de estado...
    console.log((value ? 'seleccionado' : 'deseleccionado') + '(' + self.clave() + ')');
    // Salida: 
    // seleccionado(123)       // Al seleccionar
    // deseleccionado(123)     // Al deseleccionar
});

b) Computed

// Si queremos mostrar cuántos recursos están seleccionados
self.numSeleccionados = ko.computed(function () {
    return self.asignados().filter(function (e) {
            return e.isChecked();
        }).length;
});

Example:

In this fiddle there is a concrete example.

Note:

Actually, the use of KendoGrid or a foreach of Knockout is indifferent in this case.