Use gird editable 'popup', when click edit button and pop up a dialog and click 'cancel', the edit row will be deleted

[Chuanlong]

Use gird editable 'popup', when click edit button and pop up a dialog and click 'cancel', the edit row will be deleted. Here is the demo code~


  <div id="grid" data-role="grid" data-scrollable="true"
                 data-editable="popup" data-toolbar="['create' ]"
                 data-columns="[ 
                                 { 'field': 'DashboardName', 'width': 200 },
                                 { 'field': 'DashboardDescription', 'width': 300 },
                                 { 'command': ['edit', 'destroy' ], 'title': '&nbsp;', 'width': 150 }
                 ]"
                 data-bind="source: dashboardSource" style="width: 800px; height:500px;">

</div> 
    
<script type="text/javascript">    

    $(document).ready(function () {  

        kendo.bind(document.body, viewModel);

    });


    var viewModel = kendo.observable({        

        dashboardSource: new kendo.data.DataSource({
            schema: {
                model: {
                    id: "DashboardId",
                    fields: {
                        DashboardId: { editable: false },
                        DashboardName: { validation: { required: true } },
                        DashboardDescription: { },
                        UserAlias: { validation: { required: true } }
                    }
                }
            },
            data: []
            
        }),

    }); 

</script>

[Chuanlong]

Hi experts,

Do you have any ideas that what's the problem of my code?

[Alexander Valchev]

Hi Chuanlong,

The DataSource has internal array which stores the initial data state and is used for reverting changes in the data (e.g. when user clicks the "cancel" button the Grid calls cancelChanges method of the DataSource which replaces the data with the original one).

By design that internal array is updated only when the data comes through a transport. Since you use a local data (data: []) after adding a new record the array is not updated which is why upon cancel the record disappears.

If you plan to work with remote data the issue should be fixed when the remote transport is configured. If you plan to work with local data please check this example: http://jsfiddle.net/AWyLf/37/

Regards,
Alexander Valchev
Telerik