The Kendo grid row mysteriously vanished while trying to edit it immediately after inserting a new row

I have configured a Kendo grid in the following manner, but I am encountering an issue where after adding a row, it disappears when I attempt to edit it before sending the changes to the server. However, upon refreshing the page, the row reappears. Any insights on why this behavior is occurring?

$("#actionGrid").kendoGrid({          
    scrollable: true,
    height: "200px",
    toolbar: [{name: "create", text: "Add"}],
    editable: {
        mode: "inline",
        confirmation: false
    },
    columns: [
        { field: "order", title: "Order", width: 80 },
        { field: "action", title: "Action name"},           
        { command: ["edit", "destroy"], width: 100 }                       
    ],
    dataSource: {
        schema: {
            model: {
                id:"taskId",
                    fields: {
                        taskId: { type:"number" },
                        order: { type: "number", validation: { min: 0 } },                          
                        action: {}
                    }
                }
            },
            transport: {
                read: {
                    dataType: "json",
                    type: "GET",
                    contentType: "application/json",
                    url: "action/readByPId?pId=" + pId
                },
                destroy: {
                    dataType:"json",
                    type:"POST",
                    contentType:"application/json",
                    url: "action/delete"
                },
                update: {
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json",
                    url: "action/update"
                },
                create: {
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json",
                    url: "action/update"
                },                                     
                parameterMap:function parameterMap(options,type) { 
                    if(type !== "read"){        
                        return JSON.stringify(options);
                    }
                }
            },
            sort: { field: "order", dir: "asc" }
        }
    });

Answer №1

The guidelines for Kendo Grid are clear-cut. Whenever a new record is created, the updated list must be returned to the client-side call. It is important to confirm that the updated record is indeed returning.

If you are implementing the online offline feature of Kendo UI, please refer to the demo provided in the following link:

If you have not specified the data communication method, but are using a custom approach, you need to update the datasource after every operation. Use the following code to ensure your data is up to date:

$('#GridName').data('kendoGrid').dataSource.read(); <!--  first reload data source -->

$('#GridName').data('kendoGrid').refresh(); <!--  refresh current UI -->

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

Encountering an issue with the v-carousel component from Vuetify: receiving a 'Cannot read property 't' of undefined' error message

Currently, I am trying to create an image carousel using Laravel along with Vue/Vuetify. The issue lies in the fact that the Vuetify v-carousel and v-carousel-item components are not rendering properly due to the error mentioned in the title. I have alrea ...

Navigating between two Vue2 applications

I currently have two applications, app1 and app2. App1 serves as a website at www.wxample.com with a button. My goal is to implement code in app2 that allows me to click the button on app1 and be redirected to the Login Panel in app2 for the workers module ...

What methods are available to incorporate arithmetic when defining a style attribute?

Is there a way to achieve arithmetic operations in CSS, like calculating margin-left: -60px + 50% of the width of the parent div? I'm eager to find a solution, whether it involves JavaScript or any other method. Any help would be greatly appreciated. ...

Listener for clicking on a marker in Google Maps

Trying to add a click event to Google Map markers in my Cordova app has proven to be quite challenging. The recommended ways mentioned in the documentation don't seem to work, unless I make the marker draggable - which is not an option for me. It seem ...

What's causing the problem with my custom filter?

I've encountered an issue with a custom filter I'm currently working on. The challenge lies in the fact that I'm using Angular 1.3.6 and am unable to upgrade at the moment. Therefore, I truly need your assistance with this matter. Check out ...

Angular.js has a unique filter that allows users to customize the date format to their preference

My upcoming event is happening on "endDate": "2014-11-30 01:00:00.0", in JSON format. I want to display it as 30 Nov 2014. I attempted to display it using: {{ phone.endDate | date:'medium' }} within an HTML document. Unfortunately, it is sti ...

What is the best way to restrict the length and number of lines in a textarea based on pixel dimensions?

I am looking to create a textarea where people can select different fonts, such as "sans-serif" and "serif", to type in text. I plan to have buttons labeled "sans-serif" and "serif" that will change the font of the textarea when clicked. However, there ar ...

Obtain the value of an element from the Ajax response

Just starting out with Jquery and Ajax calls - here's what I've got: $(document).ready(function () { $.ajax({ type: "GET", url: "some url", success: function(response){ console.log(response); } }) }); Here's the ...

Utilizing AngularJS and RequireJS to incorporate a controller into the view

I am facing an issue while trying to add an Angular controller to my HTML view. Typically, in Angular, this can be done using: ng-controller="<controller>". However, due to my use of RequireJS, I have had to implement it differently. I need to includ ...

Enhance the functionality of selectize.js by incorporating select options through ajax

I'm currently working on implementing options to a select box using AJAX and selectize.js. When not using selectize.js, everything functions correctly. The two select boxes are interconnected so that when one is updated, the values in the other select ...

Develop a RESTful API in Node.js that allows for the sending of audio files along with JSON

My current project involves a REST API that I've built using node and express. I'm now facing a challenge where I need to send both JSON Data and an Audio File in a single http request. The audio file needs to be playable on the client side. JSO ...

The eval() function does not run scripts from external sources with a src attribute

Instead of using eval() to execute all <script> tags after completely rewriting a div, I have encountered an issue. The following code snippet works for inline-scripts, but it doesn't have the same effect on external scripts like: <script sr ...

Trigger a Redux action with the following action as the payload in order to display a Material UI snackbar or dialog

Currently, my project involves using React along with Redux and Material UI to develop a web application. The web app consists of numerous pages and components. It is common practice to have a snackbar or dialog interact directly with the user's actio ...

Using a JavaScript function inside a loop without the need for a click event

I have successfully created a slideshow, but I am facing an issue with looping it continuously. Currently, I have implemented a click event to restart the script, but I want it to loop without the need for any interaction. window.CP.exitedLoop(0);functio ...

What causes useEffect to run twice in React and what is the best way to manage it effectively?

I'm currently facing an issue with my React 18 project where the useEffect hook is being called twice on mount. I have a counter set up along with a console.log() inside the useEffect to track changes in state. Here's a link to my project on Code ...

Alexa Skill: Successful with the initial query but fails with the subsequent one

An issue has been identified with the Alexa skill where it works for the first question but not the second one. The skill involves a jumbled letters quiz utilizing the following array: var arr = [{"Q":"dcha","A":"chad"},{"Q":"goto","A":"togo"},{"Q":"alim" ...

Please send the element that is specifically activated by the onClick function

This is the HTML code I am working with: <li class="custom-bottom-list"> <a onClick="upvote(this)"><i class="fa fa-thumbs-o-up"></i><span>upvote</span></a> </li> Here is my JavaScript function for Upvot ...

Transforming the header of a table in a CSV file into a schema field

My task is to create a schema for a CSV file using Mongoose, but upon inspecting the file, I discovered it contains nearly a hundred fields or columns. While I am familiar with defining schemas in Mongoose for files with only a few fields, I am unsure ho ...

What is the best way to extract individual words from a string based on a specified list of tokens?

I am currently working with a list of tokens used to create artificial Japanese words, which is represented by the following array: var syllables = ["chi","tsu","shi","ka","ki","ku","ke","ko","ta","te","to","sa","su","se","so","na","ni","nu","ne","no","ha ...

Did I accidentally overlook a tag for this stylish stripe mesh Gradient design?

I've been attempting to replicate the striped animated Gradient mesh using whatamesh.vercel.app. I've set up the JS file, inserted all the gist code into it, and placed everything in the correct locations, but unfortunately, it's not functio ...