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

Grid - Cancel causes postback

2 Answers 33 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Phil H.
Top achievements
Rank 2
Phil H. asked on 06 May 2015, 10:25 PM

Hi:

The grid is just part of a detail form, and the data for the grid is in memory, so the postback from the cancel button is very bad.

Phil

<!DOCTYPE html>
<head>
    <title>Author Design - snippet</title>
    <style>
        body {
            font-family: Tahoma;
            font-size: 18px;
            color: navy;
            margin: 0;
        }
        #grid .k-grid-toolbar
        {
            padding: .6em 1.3em;
        }
        .add-label
        {
            vertical-align: middle;
            padding-right: .5em;
        }
        #existing
        {
            vertical-align: middle;
        }
        .toolbar {
            float: right;
        }
    </style>
    <link href="../../content/kendo/kendo.common-bootstrap.min.css" rel="stylesheet" />
    <link href="../../content/kendo/kendo.blueopal.min.css" rel="stylesheet" />
    <script src="../../scripts/jquery-1.9.1.min.js"></script>
    <script src="../../scripts/kendo/kendo.all.js"></script>
</head>
<body>
    <script type="text/x-kendo-template" id="addTemplate">
        <div class="toolbar">
            <label class="add-label" for="existing">Add existing:</label>
            <input type="search" id="existing" style="width: 300px"/>
        </div>
    </script>
    <div style="width: 600px;">
        <div id="AuthorsGrid"></div>
    </div>
    <script type="text/javascript">
        //
        //
        var aData = [{ Id: 1, Name: "Joe" }, { Id: 2, Name: "Jane" }];
        $(document).ready(function () {
            //
            $('#AuthorsGrid').kendoGrid({
                dataSource: aData,
                width: 400,
                toolbar: [{ name: 'create', text: " Add " },
                    { template: $("#addTemplate").html() }],
                columns: [
                    { field: 'Id', hidden: true },
                    { field: 'Name', title: 'Name', width: '350px' },
                    { command: 'destroy', title: ' ', width: 110 }
                ],
                editable: 'popup'
            });
            //
            var AuthorGrid = $('#AuthorsGrid').data('kendoGrid');
            //
            var authorData = [{ "Id": 11, "Name": "Andy Hunt" }, { "Id": 10, "Name": "Ben Albahari" },
                { "Id": 4, "Name": "Bill Wagner" }, { "Id": 1, "Name": "Bob Martin" },
                { "Id": 15, "Name": "Chad Fowler" }, { "Id": 12, "Name": "Dave Thomas" },
                { "Id": 6, "Name": "Fabrice Marguerie" }, { "Id": 2, "Name": "James Newkirk" },
                { "Id": 8, "Name": "Jim Wooley" }, { "Id": 3, "Name": "Jon Skeet" },
                { "Id": 9, "Name": "Joseph Albahari" }, { "Id": 5, "Name": "Joseph Rattz Jr." },
                { "Id": 16, "Name": "Julie Lerman" }, { "Id": 14, "Name": "Kent Beck" },
                { "Id": 17, "Name": "Rowan Miller" }, { "Id": 7, "Name": "Steve Eichert" },
                { "Id": 13, "Name": "Venkat Subramaniam" }];
            $("#existing").kendoDropDownList({
                dataTextField: "Name",
                dataValueField: "Id",
                dataSource: { data: authorData },
                optionLabel: "Select an Author ...",
                change: function (e) {
                    // handle selected event
                    var dataId = this.select() - 1;
                    if (dataId != -1) {
                        var dataItem = this.dataSource.at(dataId);
                        if (AuthorGrid.dataSource.get(dataItem.Id) === undefined) {
                            // alert(dataItem.Name + ' (' + dataItem.Id + ')' + dataId);
                            AuthorGrid.dataSource.add(dataItem);
                        }
                    }
                    //
                    e.preventDefault();
                }
            });
        });
    </script>
</body>
</html>

2 Answers, 1 is accepted

Sort by
0
Phil H.
Top achievements
Rank 2
answered on 07 May 2015, 04:49 PM

Hi:

I am kind of treating this as a SPA... 

I created a an example at:

http://dojo.telerik.com/@PhilHuhn/OxADO

To reproduce the problem 

1) delete an author,

2) add an existion author,

3) add an author and click the cancel button,

All previous work is gone.

Thanks,

Phil

‚Äč

0
Boyan Dimitrov
Telerik team
answered on 11 May 2015, 07:28 AM

Hello Phil,

I would like to apologize for the delayed response. 

Please check the modified version of your project http://dojo.telerik.com/uWaDI . In order CRUD operations to work properly the model id in the schema.model configuration should be defined. 

Regards,
Boyan Dimitrov
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
Phil H.
Top achievements
Rank 2
Answers by
Phil H.
Top achievements
Rank 2
Boyan Dimitrov
Telerik team
Share this question
or