Hi,
I'm relatively new to kendo, so the problem I'm encountering may be obvious to some. That said, I have searched google and these forums extensively and have not been able to figure out my issue.
I'm using local data to populate a grid, and I find that canceling out of or closing the editor popup is breaking something. Specifically, after canceling out of editing, I can no longer open the editor for that item. I will include a short single page application below which demonstrates the issue I'm experiencing. To reproduce the bug, click the edit button on the 'pay bills' item, then click the cancel button on the popup editor. Then click the edit button on the same item again. Expected behavior: the editor pops up. Actual behavior: nothing happens.
Of interest is that newly created items do not experience this issue. If you use the add button to create a 'pet the dog' item, you can edit, cancel, and edit again fine. Also, the other bound item, 'buy milk', will continue to work as long as you do not cancel out.
I will be monitoring this thread to answer any and all questions and to provide any clarification requested. I appreciate in advance any help and support the community can provide. Thanks!
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="KendoGridDemo.aspx.cs" Inherits="WebApplication1.KendoGridDemo" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Kendo Grid Demo</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script> <script src="http://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.504/styles/kendo.common.min.css" /> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.504/styles/kendo.default.min.css" /> </head><body> <form id="form1" runat="server"> <div id="todo-grid"></div> <script id="todo-template" type="text/x-kendo-template"> <div> <label for="ItemText">Todo</label> <input type="text" name="ItemText" required validationMessage="What do you have to do?" style="width: 350px;" /> </div> </script> <script type="text/javascript"> // Explanation: we are trying to set up a "Save/Cancel" model where all data // operations are performed in memory on the client. The user would then // click a save button which packages all the data and sends it to the // server for an atomic commit to the database. For that reason, we are // loading data into a local dataset and performing grid operations on // the local data, rather than using a remote transport to do real-time crud ops. // in our application, the source data comes from the server via a jquery ajax // call. for the purposes of this example we will use the array below. var _sourceData = [{ TodoID: 1, ItemText: "buy milk" }, { TodoID: 2, ItemText: "pay bills" }]; // the remote data is shifted into this page variable var TodoData; // new items are given an id which is later adjusted by the server var TodoIDSeed; // this method is called after the ajax call retrieves data from the server. // we will simulate this using the _sourceData array. function LoadTodos(todos) { // Dispose of any old data and set up an observable array TodoData = new kendo.data.ObservableArray([]); // shift the data out of the incoming source and into the local page variable while (todo = todos.shift()) TodoData.push(todo); // initialize the temporary ID seed for new todo items TodoIDSeed = -1; // create the datasource var todoDataSource = new kendo.data.DataSource({ pageSize: 3, schema: { model: { id: 'TodoID', fields: { TodoID: { type: 'number', editable: false, defaultValue: 0 }, ItemText: { type: 'string' } } } }, transport: { read: function (options) { options.success(TodoData); }, create: function (options) { var item = options.data; item.TodoID = TodoIDSeed--; options.success(item); }, update: function (options) { options.success(); }, destroy: function (options) { options.success(); } } }); // set the datasource and read the data $('#todo-grid').data('kendoGrid').setDataSource(todoDataSource); todoDataSource.read(); } $(document).ready(function () { // create the grid $('#todo-grid').kendoGrid({ autoBind: false, pageable: true, height: 250, toolbar: [{ name: 'create', text: 'Add' }], columns: [{ field: "ItemText", title: "Todo" }, { command: [{ name: 'edit', text: 'Edit' }, { name: 'destroy', text: 'Delete' }], title: "Updates", width: 170 }], editable: { mode: 'popup', template: kendo.template($('#todo-template').html()), window: { title: 'Add/Edit Todo Item', animation: false, width: 440, height: 200 }, confirmation: true, confirmDelete: 'Yes' } }); // load the data LoadTodos(_sourceData); }); </script> </form></body></html>2 Answers, 1 is accepted
Rank 1
Quick update: here's a jsbin that will run the example in your browser: http://jsbin.com/qalivereki/edit?html,js,output
Rank 1