Bulk Updating a Checkbox Column (Select All)

[Mikel]

I am trying to figure out how to bulk update a checkbox column in a kendo grid.  I have a "Select All" toolbar button with the intent of updating a boolean value (from a remote datasource) across all rows of the datasource.  This button simply calls a javascript function that looks like this:

var dataSource = $("#grid").data("kendoGrid").dataSource.data();

        $.each(dataSource, function(i, dataRow) {

            dataRow.set("SomeBooleanColumn", true);

        });

This causes an automatic sync back to the server, which is not desired, I would like to control this sync manually when the user hits save.  When simply setting the "dataRow.SomeBooleanColumn = true" then attempt to save, nothing gets posted back at all.

Any help would be appreciated.

[Rosen]

Hello Mikel,

Could you please provide a bit more details about the DataSource configuration in your scenario? Could you please verify that DataSource autoSync option is not set to true?

All the best,
Rosen
the Telerik team

[Mikel]

I have tried that, here is the data source:

var dataSource = new kendo.data.DataSource({

    transport: {

        read : {

            type: 'POST',

            contentType: 'application/json; charset=utf-8',

            dataType: 'json',

            url: 'SomeUrl.svc'

        },

        update: {

            type: 'POST',

            contentType: 'application/json; charset=utf-8',

            dataType: "json",

            url: 'SomeUrl.svc'

        },

    },

    autoSync: false,

    pageSize: 10,

    batch: true,

    schema: {

        model: {

            id: 'SomeID',

            fields: {

                SomeID: { editable: true, type: 'string' },

                SomeBooleanColumn: { editable: true, type: 'boolean', nullable: false },

                MoreColumsn: { editable: true, type: 'string'}

            }

        }

    }

});

[Seth]

Is there a way to set up a Kendo Grid as a checked listbox?  I know there's a way to put the grid into a multiple selection mode by row, but that doesn't remember selections if the grid is being paged.

Is it best practice to create a boolean column and create a way for the user to edit a boolean model property?

[Rosen]

Hi Mikel,

The DataSource declaration seems to be ok. Thus, I would need to ask you to provide a simple test page in which this behavior can be observed locally.

Regards,
Rosen
the Telerik team

[Mikel]

Not sure if an example would help, since I cannot reproduce it without the service.

Datasource:

var dataSource = new kendo.data.DataSource({

    transport: {

        read : {

            type: 'POST',

            contentType: 'application/json; charset=utf-8',

            dataType: 'json',

            url: 'SomeWebService'

        },

        update: {

            type: 'POST',

            contentType: 'application/json; charset=utf-8',

            dataType: "json",

            url: 'SomeWebService'

        },

        parameterMap: function (options, operation) {

            switch (operation) {

            case 'read':

                options["importID"] = importIdData.value() === "" ? null : importIdData.value();

                break;

            case 'update':

                options["someID"] = '<%= this.someID %>';

                break;

            }

            return JSON.stringify(options);

        }

    },

    pageSize: 10,

    batch: true,
     autoSync: false, 


    error: function (e) {

        -- error handling code

    },

    schema: {

        model: {

            id: 'ProcurementResourceID',

            fields: {

                ItemID: { editable: true, type: 'string' },

                SomeBool: { editable: true, type: 'boolean', nullable: false },

                FirstName: { editable: false, type: 'string' },

                LastName: { editable: false, type: 'string' }

            }

        }

    }

});

Grid:

$("#grid").kendoGrid({

        columns: [

            { field: "SomeBool", title: "Selected", template: "#= getBooleanValue(SomeBool) #" },

            { field: "FirstName", template: "#=getStringValue(FirstName)#" },

            { field: "LastName", template: "#=getStringValue(LastName)#" }

        ],

        toolbar: kendo.template($("#toolbarTemplate").html()),

        dataSource: dataSource,

        editable: true,

        dataBound: function (e) {

             

        },

        sortable: true,

        scrollable: false,

        autoBind: false

    });

Function that attempts to update the datasource:

function SelectAll() {

        var dataSource = $("#grid").data("kendoGrid").dataSource.data();

        $.each(dataSource, function(i, item) {

            item.set("SomeBool", true);

        });

    }

The "Select All" gets called from a button click and attempts to update "SomeBool", which is a property on each datasource item to true.  When this operation completes, it automatically attempts to sync back to the server.  I have turned autoSync off.  I would like to manually submit these changes instead of having them auto-submit.  I am on the latest version of kendo.

[Rosen]

Hi Mikel,

I'm afraid the runnable sample will be required in this case as it is not obvious from the provided details what could be the cause for the described behavior.

Regards,
Rosen
the Telerik team

[Peter]

Hi Rosen

Could you please provide an example with a grid using "Batch editing" (e.g.http://demos.kendoui.com/web/grid/editing.html) with a "CheckBox-Column" (e.g. Discontinued-Column in sample) whit a Select-All Button outside the grid?

This script does not work:
function SelectAll() {
            var dataSource = $("#Grid").data("kendoGrid").dataSource.data();
            for (var i = 0; i < dataSource.length; i++) {
                    dataSource[i].Discontinued= true;
                    dataSource[i].dirty = true;

                    item.set("Discontinued", true);
                }

            }
        }

Thank you in advance.

Kind regards,
Peter

[Rosen]

Hello Peter,

Here is the small test page which demonstrates the discussed scenario. 

All the best,
Rosen
the Telerik team

[Peter]

Thank you Rosen, very nice.

$("button#selectAll").click(function() {

var data = dataSource.view();

for (var idx = 0, length = data.length; idx < length; idx++) {

data[idx].set("Discontinued", true);

}

});