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

Change multiple selected cells background color on click

7 Answers 816 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Tomislav
Top achievements
Rank 1
Tomislav asked on 06 Mar 2014, 10:04 AM
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

7 Answers, 1 is accepted

Sort by
0
Accepted
Dimiter Madjarov
Telerik team
answered on 06 Mar 2014, 02:37 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tomislav
Top achievements
Rank 1
answered on 06 Mar 2014, 03:07 PM
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'.
0
Dimiter Madjarov
Telerik team
answered on 06 Mar 2014, 05:05 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tomislav
Top achievements
Rank 1
answered on 07 Mar 2014, 08:47 AM
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.
0
Dimiter Madjarov
Telerik team
answered on 11 Mar 2014, 08:41 AM
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
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 28 May 2014, 09:14 PM
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
0
Dimiter Madjarov
Telerik team
answered on 29 May 2014, 01:04 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Tomislav
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Tomislav
Top achievements
Rank 1
Peter
Top achievements
Rank 1
Share this question
or