CODEWITHSUNDEEP
javascriptjquerykendo-uikendo-dataviz
Arun Killu
Arun Killu

Reputation: 14233

Newly added data not saved properly in kendo grid

Grid behavior not as expected when the following actions are done .

  1. add new record
  2. then press update button in the grid(new added row)
  3. then press cancel before save .

when above action is complete new added row disappears . link to js fiddle

<!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>

Upvotes: 3

Views: 1881

Answers (1)

sasheto
sasheto

Reputation: 541

The behaviour is expected. Problem comes from the fact that newly created records does not have an ID which is why they are considered as new. You may check that with the isNew() method.

When you cancel the editing of a new record (not yet synchronized) it will be removed. The action is identical to: pressing "Add new record" and then "Cancel".

Here is an example that demonstrates how to implement CRUD operations with local data.

        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();   
            }
        }

Upvotes: 4

Related Questions