The Kendo UI Grid's cancel function fails to revert back to the original data

I am facing an issue with a kendo grid that is embedded inside a kendo window template. This grid gets its data from another grid on the main UI, following a model hierarchy of Fund -> Currency -> Allocations. The main UI grid displays the entire dataset, with the Fund containing a detail-template that shows its currencies and their allocations.

Let me share some of the code snippets:

Main Grid:

<div kendo-grid="ctrl.fundGrid" style="margin-top: 2em" k-options="ctrl.fundGridOptions" k-scope-field="kgrid" id="myGrid" k-height='600'></div>

Edit Window Template:

<script id="edit-template" type="text/x-kendo-template">
<div class="container">
    <div kendo-grid="ctrl.currencyKendoGrid" ng-show="ctrl.IsVisible" style="margin-top: 2em" id="myGrid" k-options="ctrl.currencyGridOptions">
        <div k-detail-template>
            <div id="allocGrid" kendo-grid k-options="ctrl.allocationGridOptions(dataItem)" ng-show="dataItem.FundCurrencyId!=0"></div>
        </div>
    </div>
</div>

The editable configuration settings for the edit window template:

editable: {
            mode: "popup",
            template: kendo.template($("#edit-template").html()),
            //confirmation: "Are you sure you want to delete this fund?",
            window: {
                title: "Edit Fund Details",
                animation: false,
                height: "800",
                width: "1200"
            }
        },

Event handler for editing in the main grid:

edit: function (e) {
     if (e.model.Currencies)
                ctrl.currencyKendoGrid.dataSource.data(e.model.Currencies);
}

The dataSource read configuration for the Currency grid:

dataSource: {
    transport: {
        read: function (e) {
            e.success();
        },
    }
}

The Currency grid is editable with edit and destroy commands set up. However, I'm encountering an issue where cancelling an inline edit on a currency row does not restore the original data. Can anyone help me understand how to make the kendo grid restore its state on cancel, and identify any issues in my implementation?

javascriptangularjskendo-uikendo-gridkendo-window

Answer №1

In a recent scenario, I encountered a situation where it was necessary to consistently hide the Delete button on specific rows within a grid. Whenever the Cancel button was clicked, the Delete button needed to reappear. Here is the solution I implemented:

    $(document).on("click", ".k-grid-edit", function () {
        var cancelbtn = $(".k-grid-cancel");

        cancelbtn.each(function () {
            var _this = $(this);
            _this.attr("onclick", "cancelEdit()");
        });
    });

    function cancelEdit() {
        $("#MyGrid").data("kendoGrid").dataSource.read();
    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trigger event from a service without causing any interference to the $rootScope

I am currently developing an app using angularjs, with a central notification queue that any controller can push messages to and then digest them. Here is the service I have implemented: angular.module('app').factory('notificationSvc' ...

angularjsangularjs-service

having trouble with changing the button's background color via toggle

I've been experimenting with toggling the background color of a button, similar to how changing the margin works. For some reason, the margin toggles correctly but the button's color doesn't. <script> let myBtn = document.querySele ...

javascripthtmlcss

Only displaying sub items upon clicking the parent item in VueJS

I'm in the process of designing a navigation sidebar with main items and corresponding sub-items. I want the sub-item to be visible only when its parent item is clicked, and when a sub-item is clicked, I aim for it to stand out with a different color. ...

javascripthtmlcssvue.jsvuejs2

Activate function upon closure of window.open

I'm facing an issue where I need to load a URL in window.open that saves some cookies in my browser. After the window.open is closed, I want to access those cookies but I haven't been able to find a way to do it. I've tried the following cod ...

javascriptjqueryangular

Change web page in JavaScript using post data

Is there a method to utilize JavaScript for navigating to a new URL while including POST parameters? I am aware that with GET requests, you can simply add a parameter string to the URL using window.location.replace(). Is there a way to achieve this with ...

javascriptjqueryajaxpost

Identifying the difference between var and JSON.stringify

Take a look at this code snippet: var data = JSON.stringify({ id: _id, ReplyId: _idComment }) openDialog(_url, data, $('#div-modal1')); function openDialog(url, Id, div) { //How can we identify if variable Id is of type JSON.stringi ...

javascriptjson

``There seems to be an issue decoding the JSON array

I am currently working on a PHP script to decode JSON data and insert the objects into my database. However, I am encountering an error: Fatal error: Cannot use object of type stdClass as array in phptest.php on line 21 $postdata = file_get_contents("php: ...

phpangularjsjson

What is the best way to switch focus to the next input using jQuery?

Currently, I am implementing the autocomplete feature using jQuery and everything seems to be functioning properly. The only issue I've encountered is with Internet Explorer (IE) - when a user selects an item from the autocomplete list, the focus does ...

javascriptjqueryautocomplete

The process involves transferring information from a specific div element to a database. This particular div element obtains its data after receiving an appended ID

It's a bit complicated, but I'm working on creating a tag system. I'm fetching data from a database with an AJAX call using the "@" symbol. Everything is working fine - the tags are being generated, but I'm having trouble retrieving and ...

javascriptphpjquerycssajax

Connecting JSON objects based on unique GUID values generated

I am in search of a method to automate the laborious task of linking multiple JSON objects with random GUIDs. The JSON files are all interconnected: { "name": "some.interesting.name", "description": "helpful desc ...

javascriptpythonjsonnpmawk

Passing NextJS props as undefined can lead to unexpected behavior and

Struggling with dynamically passing props to output different photo galleries on various pages. One of the three props works fine, while the others are undefined and trigger a warning about an array with more than one element being passed to a title elemen ...

javascriptreactjstypescriptnext.js

Tips for creating a responsive Youtube embedded video

Check out this website for a good example: If you take a look, you'll notice that the header youtube video is responsive - it automatically resizes when the window size changes. Here are the <iframe> codes: <iframe id="bluetube-player-1" fr ...

javascriptjquerycsstwitter-bootstrap-3responsive-design

Steps to properly structure Rails JSON data with a line break

I'm currently working on a Rails application using Kendo UI. I am in the process of creating a JSON object to populate a table cell within a table. I'm attempting to add line breaks within the cell by including them in the JSON object, but it doe ...

ruby-on-railsjsonruby-on-rails-4kendo-uiline-breaks

Illustrating SVG links

I'm working on a basic svg animation project where I want to create a simple shape by animating a line under a menu link. The goal is to have a single line consisting of a total of 7 anchors, with the middle 3 anchors (each offset by 2) moving a few p ...

javascriptjquerycssanimationsvg

Unusual case of missing lines while reading a file using readline.createInterface()

const readline = require('readline') const fs = require('fs/promises'); (async function() { await fs.writeFile('/tmp/input.txt', [...Array(100000).keys()].join('\n')) await fs.writeFile('/tmp/other.tx ...

javascriptnode.jsreadline

Automatically integrating Nivo Lightbox into your website

I incorporated Nivo Lightbox into my website, seamlessly integrating all images with the plugin using the following code: <div class="portfolio-item"> <div class="portfolio-thumb "> <a class="lightbox" data-lightbox-type="ajax" title="Strat ...

javascriptjqueryhtmlcsstwitter-bootstrap

Obtain geographic information using a JSON fetch from a map

I am facing an issue while integrating Laravel API data into React. Although I can see the JSON data in the console after fetching it, I encounter an error when I try to display it in a table for listing. The error states that my .map function is not recog ...

javascriptreactjsjsonfetch-api

JavaScript does not allow executing methods on imported arrays and maps

In my coding project, I created a map named queue in FILE 1. This map was fully built up with values and keys within FILE 1, and then exported to FILE 2 using module.exports.queue = (queue). Here is the code from FILE 1: let queue = new.Map() let key = &q ...

javascriptnode.jsdiscorddiscord.js

Tips for Drawing Lines and Preserving Them When a Condition is Met

I am currently utilizing Node.Js in an attempt to outline objects within an image based on certain conditions being met. My goal is to draw lines around specific portions of the image received from an API response. Whenever the response includes the keywor ...

javascriptnode.jscanvas

What could be causing the "AJAX data not defined" error

Attempting to make an Ajax post request to the root directory on my Express server. By simply using the HTML form and submitting an artist name, I successfully receive a response back and can send the information to the client without any issues... As se ...

javascriptjquerynode.jsexpress