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

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

2 Answers 50 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Chuanlong
Top achievements
Rank 1
Chuanlong asked on 07 Apr 2014, 07:57 AM
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>

2 Answers, 1 is accepted

Sort by
0
Chuanlong
Top achievements
Rank 1
answered on 07 Apr 2014, 08:10 AM
Hi experts,

Do you have any ideas that what's the problem of my code?
0
Alexander Valchev
Telerik team
answered on 09 Apr 2014, 08:01 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Chuanlong
Top achievements
Rank 1
Answers by
Chuanlong
Top achievements
Rank 1
Alexander Valchev
Telerik team
Share this question
or