Change multiple selected cells background color on click

[Tomislav]

Hi,

I have a Kendo Grid with selectable: "multiple, cell" option. I would like to select multiple cells, then click on a button outside the grid to change the selected cells background color. Do you have any suggestions?

Thanks

[Dimiter Madjarov]

Hi Tomislav,


To achieve this you could change the styles for the cells/rows with k-state-selected class, which is added to the selected ones.
E.g.

$(".myButton").click(function () {
    //grid is the name of the grid
    $("#grid tbody .k-state-selected").css({
        "background-image": "none",
        "background-color": "blue"
    });
});

Regards,
Dimiter Madjarov
Telerik

[Tomislav]

Thanks, that works.

Could you tell me how I could change input values of those selected cells?

For instance, let's say I select 5 cells which are all populated with '0', and then on click I want to change their values to '5'.

[Dimiter Madjarov]

Hi Tomislav,


This will depend on the exact Grid implementation and the current requirements. Could you please share the Grid configuration and what exactly do you mean by "input values" - the model values, some <input> elements that are contained in the cells or probably something else?

I am looking forward to hearing from you so I could assist you further.

Regards,
Dimiter Madjarov
Telerik

[Tomislav]

Here's the grid configuration:

//remove spinners from kendoNumericTextBox
function editNumberWithoutSpinners(container, options) {
        $('<input data-text-field="' + options.field + '" ' +
                'data-value-field="' + options.field + '" ' +
                'data-bind="value:' + options.field + '" ' +
                'data-format="' + options.format + '"/>')
                .appendTo(container)
                .kendoNumericTextBox({
                    spinners: false,
                    min: 0
                });
 }

$("#grid").kendoGrid({
        dataSource: {
            transport: {
                read: "/Kendo/GetData",
                update: {
                    url: "/Kendo/Update",
                    dataType: "jsonp"
                },
                destroy: {
                    url: "/Kendo/Destroy",
                    dataType: "jsonp"
                },
                create: {
                    url: "/Kendo/Create",
                    dataType: "jsonp"
                },
                parameterMap: function (options, operation) {
                    if (operation !== "read" && options.models) {
                        return { models: kendo.stringify(options.models) };
                    }
                }
            },
            batch: true,
            pageSize: 20,
            schema: {
                model: {
                    id: "Id",
                    fields: {
                        Dan1: { type: "number" },
                        Dan2: { type: "number" },
                        Dan3: { type: "number" },
                        Dan4: { type: "number" },
                        Dan5: { type: "number" }
                    }
                }
            }
        },
        editable: {
            update: true,
            destroy: false
        },
        toolbar: ["save", "cancel"],
        height: 430,
        filterable: false,
        sortable: true,
        pageable: true,
        scrollable: true,
        navigatable: true,
        selectable: "multiple, cell",
        columns: [
            { field: "Dan1", title: "1", editor: editNumberWithoutSpinners},
            { field: "Dan2", title: "2", editor: editNumberWithoutSpinners},
            { field: "Dan3", title: "3", editor: editNumberWithoutSpinners},
            { field: "Dan4", title: "4", editor: editNumberWithoutSpinners},
            { field: "Dan5", title: "5", editor: editNumberWithoutSpinners}],
        edit: function (e) {
            var input = e.container.find("input");     //select (highlight) the content automatically
            input.focus(function (e) {
                setTimeout(function () {
                    input.select();
                });
            });
        },
});

Let's say I have few rows of data populated with numbers. I want to select multiple cells and then on click on a button outside the grid
change their values to some other number, let's say '8'. See the attached screenshot.

[Dimiter Madjarov]

Hello Tomislav,


There is a way to achieve this. Usually when a model value has to be changed, the set method should be used, so that the observable object becomes aware of the change. Nevertheless in the current case, I would suggest not to use it, because this will cause the Grid to be redrawn after the first cell is changed. Here is a sample implementation.
E.g.

<button class="change">Change</button>

$(".change").click(function () {
    var grid = $("#Grid").data("kendoGrid");
    var cellsToChange = grid.select();

    for (var i = 0; i < cellsToChange.length; i++) {
        var item = grid.dataItem($(cellsToChange[i]).closest("tr"));
        item.ProductName = "new value";
    }

    grid.refresh();
});

Please keep in mind that when the Grid is refreshed, the new values will be displayed in the table and the selection will be lost.

Regards,
Dimiter Madjarov
Telerik

[Peter]

Dimiter,
Using your example,  my grid cell values change , but the [save changes] from toolbar.save() is not enabled.
I tried .set but I think .set  removes <tr> , causing a second .closest("tr" to not work.
Any ideas?
Thanks, Peter

[Dimiter Madjarov]

Hi Peter,


I am not sure that I understand the issue. Could you please elaborate further?

I am looking forward to hearing from you.

Regards,
Dimiter Madjarov
Telerik