Remote update cell content in kendo grid

Kenneth Bo Christensen Published at Dev

Kenneth Bo Christensen

Here I have a code to update a cell contet when pressing a button. It works fine, but it doesn't set the flag, that indicates, that the cell has been changed. It should look like this with the litle red triangle: enter image description here

The code:

<a id="button" href="#">Click me</a>
<div id="grid"></div>

<script>
    var dataSource, grid;
    $(document).ready(function () {
        dataSource = new kendo.data.DataSource({
            data: [
                { category: "Beverages", name: "Chai", price: 18},
                { category: "Seafood", name: "Konbu", price: 6}
            ],
        })

        grid = $("#grid").kendoGrid({
            dataSource: dataSource,
            editable: true,
        }).data("kendoGrid");

        $('#button').click(function (e) {
            var data = grid.dataItem("tr:eq(1)");
            data.set('category', 'Merchandice');
        });
    });
</script>

Update: Here is the update based on @tstancin: Kendo example. Thank you for the answer - I had thought of it to. I am wondering if it's possible to do the update in a more clean way with some binding through som MVVM perhaps?

Kind regards from Kenneth

Kenneth Bo Christensen

I wrote a script that makes it posible to use a call like this:

SetCellData(id, columnName, value);

So with an id, a columnName and a value, I can update a value in a grid and the flag will be set on the cell.

function SetCellData(id, columnName, value) {
    var dataItem = grid.dataSource.get(id);
    dataItem.set(columnName, value);
    var columnIndex = GetColumnIndex(columnName);
    if (columnIndex > -1) {
        var cell = $('tr[data-uid*="' + dataItem.uid + '"] td:eq(' + columnIndex + ')')

        if (!cell.hasClass("k-dirty-cell")){
            cell.prepend("<span class='k-dirty'></span>");
            cell.addClass("k-dirty-cell");
        }
    }

}

function GetColumnIndex(columnName) {
    var columns = grid.columns;
    for (var i = 0; i < columns.length; i++)
        if (columns[i].field == columnName)
            return i;
    return -1;
};

I have the code here : example

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-02-10

Comments

0 comments

From Dev

Related Related

Article

Remote update cell content in kendo grid

Remote update cell content in kendo grid

Update Kendo Grid selected cell value with the value in a Kendo Editor

Kendo Grid Filterable cell

Kendo Grid Filterable cell

Clickable Cell in Kendo Grid

Kendo Grid: Foreign Key Dropdown does not update grid cell after update

Kendo UI grid update

Accessing kendo grid cell values

Kendo grid editable multiselect grid cell

How can i highlight the Kendo grid cell by color change after update

How can i highlight the Kendo grid cell by color change after update

How do I display Kendo Grid inside Kendo Grid cell?

kendo grid do not refresh on update

Binding Kendo Grid to remote data MVC 4

kendo grid select cell data on focus

Show dropdown in cell of kendo grid in template

How to show € symbol in a kendo grid cell

how to get cell click event in kendo grid

Make cell readonly in Kendo Grid if condition is met

Kendo Grid: Removing dirty cell indicators

Kendo grid cell refocusing after refresh

Styling cell in Kendo grid via ClientTemplate

how to focus next cell in kendo grid by enter

Kendo UI grid filter cell that contains an array

Kendo grid change style cell data

how to focus next cell in kendo grid by enter

Kendo UI grid conditionally editable cell

How to mark Kendo Grid's cell as edited?

Kendo UI grid filter cell that contains an array

make a kendo cell readonly based on dropdownselection in the grid