This is a migrated thread and some comments may be shown as answers.

Bulk Updating a Checkbox Column (Select All)

9 Answers 464 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mikel
Top achievements
Rank 1
Mikel asked on 12 Jul 2012, 06:12 PM
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.

9 Answers, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 13 Jul 2012, 07:58 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Mikel
Top achievements
Rank 1
answered on 13 Jul 2012, 12:07 PM
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'}
            }
        }
    }
});
0
Seth
Top achievements
Rank 1
answered on 13 Jul 2012, 02:13 PM
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?
0
Rosen
Telerik team
answered on 13 Jul 2012, 02:15 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Mikel
Top achievements
Rank 1
answered on 02 Aug 2012, 02:44 PM
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.
0
Rosen
Telerik team
answered on 03 Aug 2012, 08:08 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Peter
Top achievements
Rank 1
answered on 30 Aug 2012, 07:28 AM
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
0
Rosen
Telerik team
answered on 31 Aug 2012, 02:30 PM
Hello Peter,

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

All the best,
Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Peter
Top achievements
Rank 1
answered on 31 Aug 2012, 02:36 PM
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);
}
});



Tags
Grid
Asked by
Mikel
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Mikel
Top achievements
Rank 1
Seth
Top achievements
Rank 1
Peter
Top achievements
Rank 1
Share this question
or