CODEWITHSUNDEEP
webgridkendo-ui
eljay
eljay

Reputation: 11

Kendo Web Grid Edit Command and Local Data

The follwing code is an extended version of an example of a built in command in the Kendo documentation

<!DOCTYPE html5>
<html>
<head>
    <title>Untitled Page</title>
    <link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/kendo.web.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#grid").kendoGrid({
                columns: [
                    { field: "name" },
                    { command: ["edit", "destroy"]} // displays the built-in "edit" and "destroy" commands
                ],
                editable: "inline",
                dataSource: new kendo.data.DataSource ({
                    data: [{ name: "Jane Doe" }, { name: "Joe Soap" }, { name: "Fred Blogs"}]
                })
            });
        });
     </script>
</head>
<body>
    <div id="grid"></div>

</body>
</html>

Clicking on any of the "Edit" buttons works fine. If you now click on another "Edit" button without cancelling the first, then the original edit row is cancelled but now all of the edit buttons fail to open a row in edit mode. This behaviour is not demonstrated when a remote datasource is used by the grid.

Do Kendo know about this problem?

Does anyone know a work-around?

Upvotes: 1

Views: 1384

Answers (1)

OnaBai
OnaBai

Reputation: 40897

This is a frequent problem when there is not id defined in the model (it is not actually a problem with Kendo UI, maybe a not a clearly documented behavior).

Use this grid definition instead:

$("#grid").kendoGrid({
    columns   : [
        { field: "name" },
        { command: ["edit", "destroy"]} // displays the built-in "edit" and "destroy" commands
    ],
    editable  : "inline",
    dataSource: new kendo.data.DataSource({
        data  : [
            { id: 1, name: "Jane Doe" },
            { id: 1, name: "Joe Soap" },
            { id: 2, name: "Fred Blogs"}
        ],
        schema: {
            model: {
                id: "id"
            }
        }
    })
});

I've added and id field to each row and then I define that schema.model.id is id. See it running here

Upvotes: 4

Related Questions