3

次のアクションを実行すると、グリッドの動作が期待どおりになりません。

  1. 新しいレコードを追加する
  2. 次に、グリッドの更新ボタンを押します（新しく追加された行）
  3. 次に、保存する前にキャンセルを押します。

上記のアクションが完了すると、新しく追加された行が消えます。 jsフィドルへのリンク

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Demo Grid App</title>
    <!-- CDN-based stylesheet reference for Kendo UI DataViz -->
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
     <link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
            <!-- CDN-based script reference for jQuery; utilizing a local reference if offline -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
       <!-- CDN-based script reference for Kendo UI DataViz; utilizing a local reference if offline -->
    <script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>

</head>
<body>
    <header>
        <h1>Demo Grid App</h1>
    </header>

<div id="grid"></div>
          <script>
          var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne", "Nige"],
    lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth", "White"],
    cities = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "Philadelphia", "New York", "Seattle", "London", "Boston"],
    titles = ["Accountant", "Vice President, Sales", "Sales Representative", "Technical Support", "Sales Manager", "Web Designer",
    "Software Developer", "Inside Sales Coordinator", "Chief Techical Officer", "Chief Execute Officer"],
    birthDates = [new Date("1948/12/08"), new Date("1952/02/19"), new Date("1963/08/30"), new Date("1937/09/19"), new Date("1955/03/04"), new Date("1963/07/02"), new Date("1960/05/29"), new Date("1958/01/09"), new Date("1966/01/27"), new Date("1966/03/27")];

function createRandomData(count) {
    var data = [],
        now = new Date();
    for (var i = 0; i < count; i++) {
        var firstName = firstNames[Math.floor(Math.random() * firstNames.length)],
            lastName = lastNames[Math.floor(Math.random() * lastNames.length)],
            city = cities[Math.floor(Math.random() * cities.length)],
            title = titles[Math.floor(Math.random() * titles.length)],
            birthDate = birthDates[Math.floor(Math.random() * birthDates.length)],
            age = now.getFullYear() - birthDate.getFullYear();

        data.push({
            Id: i + 1,
            FirstName: firstName,
            LastName: lastName,
            City: city,
            Title: title,
            BirthDate: birthDate,
            Age: age
        });
    }
    return data;
}

function generatePeople(itemCount, callback) {
    var data = [],
        delay = 25,
        interval = 500,
        starttime;

    var now = new Date();
    setTimeout(function() {
        starttime = +new Date();
        do {
            var firstName = firstNames[Math.floor(Math.random() * firstNames.length)],
                lastName = lastNames[Math.floor(Math.random() * lastNames.length)],
                city = cities[Math.floor(Math.random() * cities.length)],
                title = titles[Math.floor(Math.random() * titles.length)],
                birthDate = birthDates[Math.floor(Math.random() * birthDates.length)],
                age = now.getFullYear() - birthDate.getFullYear();

            data.push({
                Id: data.length + 1,
                FirstName: firstName,
                LastName: lastName,
                City: city,
                Title: title,
                BirthDate: birthDate,
                Age: age
            });
        } while(data.length < itemCount && +new Date() - starttime < interval);

        if (data.length < itemCount) {
            setTimeout(arguments.callee, delay);
        } else {
            callback(data);
        }
    }, delay);
}
                $(document).ready(function() {
                    $("#grid").kendoGrid({

                        dataSource: {
                            data: createRandomData(10),


                            schema: {
                                model: {
                                    id:"FirstName",
                                    fields: {
                                        LastName: { type: "string" },
                                        City: { type: "string" },
                                        Title: { type: "string" },
                                        BirthDate: { type: "date" },
                                        Age: { type: "number" }
                                    }
                                }
                            },
                            pageSize: 10
                        },
                        height: 500,
                        width:300,
                         toolbar: ["create"],
                        scrollable: true,
                        sortable: true,
                        filterable: true,
                        pageable: {
                            input: true,
                            numeric: false
                        },
                        columns: [

                            {
                                field: "LastName",
                                title: "Last Name",

                            },
                            {
                                field: "City",

                            },
                            {
                                field: "Title"
                            },
                            {
                                field: "BirthDate",
                                title: "Birth Date",
                                template: '#= kendo.toString(BirthDate,"MM/dd/yyyy") #'
                            },
                            {
                                field: "Age",
                                width: 50
                            },
                              { command: ["edit", "destroy"], title: "&nbsp;", width: "210px" },
                        ],
                         editable: "inline"
                    });
                });
            </script>
    <div role="main">
    </div>
    <footer>
    </footer>
</body>
</html>
4

1 に答える 1

4

この動作は予期されたものです。問題は、新しく作成されたレコードには ID がないため、新規と見なされることにあります。isNew()メソッドで確認できます。

新しいレコード (まだ同期されていない) の編集をキャンセルすると、そのレコードは削除されます。アクションは、[新しいレコードを追加] を押してから [キャンセル] を押すのと同じです。

以下は、ローカル データを使用して CRUD 操作を実装する方法を示す例です。

        transport: {
            read: function(o) {
                //pass the date
                o.success(data);
            },
            create: function(o) {
                var item = o.data;
                //assign a unique ID and return the record
                counter++;
                item.Id = counter;
                o.success(item);
            },
            update: function(o) {
                //edit the local array and mark the operation as successful
                o.success();
            },
            destroy: function(o) {
                //edit the local array and mark the operation as successful
                o.success();   
            }
        }
于 2013-01-08T13:34:01.153 に答える