What is the best way to bind a Kendo grid following an update of the data in

//Using the HttpGet method from API to retrieve a list of data.

var apiPath = "http://localhost/unitek/#/ParameterMaster"; 
                            Restangular.all(apiPath).getList().then
                            (
                                function (response) 
                                {
                                    $scope.consultationParamItems = response.data.plain();

                                    $scope.consultationItemsGridOptions = consultationItemsGridOptionsFn();
                                },
                                function (response) 
                                {
                                    alert("Error Retrieving Items" + response.data);
                                }
                            );

//Configuring the kendo grid

function consultationItemsGridOptionsFn()
        {
            var options = {
                            dataSource: 
                                {
                                    data: $scope.consultationParamItems,
                                    pageSize: 10,
                                    serverPaging: false,
                                    serverSorting: false

                                },
                                autoBind:true,
                                sortable: true,
                                pageable: true,
                                resizable: true,
                                reorderable:true,
                                groupable: false,
                                columns: 
                                    [   

                                        {
                                            field: "ShortDesc",
                                            title: "Parameter Name",
                                            width:"20%"
                                        },

                                        {
                                            field: "Remarks",
                                            title: "Remarks",
                                            width:"15%"
                                        },
                                        {
                                            field: "ConsultationParamSequence",
                                            title: "SEQ",
                                            width:"20%"
                                        },
                                        {
                                            field: "ICD10Code",
                                            title: "ICD10Code",
                                            width:"20%"
                                        },
                                        {
                                            field: "ICD10Remarks",
                                            title: "ICD10Remarks",
                                            width:"20%"

                                        },
                                         {
                                             command: ["edit"], title:"  ", width: "100px"

                                         },
                                        {
                                            command: ["destroy"], title: " ", width: "100px"
                                        }
                                    ],
                                    editable:true,
                                    //{
                                            // mode: "inline"
                                    //},
                                        toolbar:[{ name: "create", text: "Add " }]
                            };
                return options;
        }

//Saving the updated grid data

$scope.saveConsultationParameter=function()
        {
            if($scope.consultationParamItems!=undefined)
            {
                Restangular.all('consultparam/consultationparam/saveItems').post($scope.consultationParamItems).then
                (
                    function()
                    {
                        alert("Save successful");
                    },
                    function()
                    {
                        alert("Data Save Failed")
                    }
                )
            }
        }

//Implementing kendo grid UI

<kendo-grid id="consultationItemsGrid"  k-options="consultationItemsGridOptions"></kendo-grid> 

//Calling the save method

<div class="panel-ctrls">
                                <span class="button-icon pull-right"><i class="ti ti-save" ng-click="saveConsultationParameter()"></i></span>
                            </div>

I am able to load data into the kendo grid. However, when I try to edit or add new rows and then save, the changes are not being saved to the local database. It seems that the updated data is not binding with the data source. I am looking for a solution to this issue. Any help would be appreciated.

Answer №1

Stop using $scope.consultationParamItems and start utilizing the Grid data items:

$("#consultationItemsGrid").data("kendoGrid").dataSource.view().toJSON()

Even better, set up the Grid DataSource for CRUD operations. This way, you can submit only the edited or inserted items, instead of sending all the data every time.

http://docs.telerik.com/kendo-ui/framework/datasource/crud

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

Jquery each function not correctly retrieving all elements with the specified class

I created a page featuring a search box and 5 Bootstrap Cards. I set it up so that the cards would hide if the text typed in the search box does not match the content within the data-tags attribute. Everything seems to be working fine, except that it is on ...

jQuery smooth scrolling problem causing a one-second page "blinking" issue

Currently, I have implemented a smooth scrolling effect on my website using the following jQuery code: jQuery('html,body').animate({scrollTop:scrollTarget}, 1000, "swing"); Although the effect works well in general, I have noticed that when mul ...

Effective methods for transferring parameters between two separate JavaScript files within an express.js application

Currently, I am working with Express.js and facing a challenge in passing parameters from one JavaScript file to another. How can this be accomplished? The two files involved are 1. process.js var WebPageTest = require('webpagetest'); var wpt ...

Creating an alarm clock with customizable time and date formats using ReactJS with Material-UI integration

Here is the code I have written: const date = new Date(); const currentTime = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`; const getDay = `${date.getDay()} ${date.getMonth()} ${date.getDate()}`; return ( <Box> < ...

Accessing website login - <div> and validating user entry

I am currently working on developing a basic login webpage, but I am facing issues with the rendering of the page. Below is the code I am using: function logIn(username, password){ var username = document.getElementById("username").value; var p ...

Adjusting position in relation to the cursor's movements

I have searched extensively for similar questions but have been unable to resolve my issue. Here, I am sharing just a single list item from my code. The task at hand is to create a span element on the mousemove event over the list item, and dynamically set ...

Linking user input range to a certain cell in an Angular data grid

Within my Angular project, I am working with a straightforward model: $scope.data = [ {1: 7, 2: 23,3: 9, 4: 13,5: 32}, {1: 23, 2: 8,3: 67, 4: 11,5: 6}, {1: 35, 2: 12,3: 24, 4: 17,5: 24}, ]; To display this model in HTML, I am using ng-rep ...

The preventDefault function fails to work in Firefox

My input is called shop_cat_edit and I've included the following code. However, it seems to work fine in IE but doesn't work in FireFox. Can anyone help me figure out what's wrong? $('[name=shop_cat_edit]').on('click',fu ...

html input type called array named AmountMap[1] is unable to be configured with <input type="textbox" size="15" name="amountMap[1]" value="0" >

**Having trouble setting the value of an HTML input type named like an array AmountMap[1] <input type="textbox" size="15" name="amountMap[1]" value="0" > When trying to set amountMap[1].value='10', ...

Is it better to include the Google Analytics code in the master page or on every individual page of an asp.net

Looking for a way to track every page on my website effectively. Should I insert the Analytics tracking code in each aspx page inherited from the master page, or is it sufficient to place it only in the master page to track all inherited pages? ...

What is the best way to reassign key-value pairs in JSON mapping using JavaScript/TypeScript?

Given {"a": {"name": "king", "firstname": "Thomas"},"b": {"age": "21"}} I'm exploring a simple way to convert it to {"name": "king","firstname": "Thomas","age": "21"} In the realm of Javascript/Angular. Any helpful suggestions are greatly appreci ...

Attempting to execute an onclick event by clicking on a link is not functioning properly

Hello there, I created an HTML link <a href="javascript:void(0);" onClick="next(1)" id="next"></a> When I click on it, nothing happens. Using href="#" doesn't work either. Strangely, if I call next(1) in the console, it works. ...

Having difficulty retrieving a nested child element with querySelector in JavaScript

Encountering an issue with the querySelector method in JavaScript when accessing nested child elements. The goal is to retrieve the first child of a selected element and then obtain the first child of that inner element. Attempted code: let selected = doc ...

Is there another method to retrieve event.target from a React functional component?

Currently, I am creating a form and obtaining input from a mui textfield. I have successfully stored the value of the textfield to a value object. To handle the key and value of the form fields, I have implemented an onValueChanged function. My goal is to ...

Tooltip remains visible even after formatting in highcharts

I have successfully hidden the datalabels with 0 values by formatting them. However, after formatting the tooltips for 0 valued data in a pie chart, there is an issue where hovering over the 0 valued portion shows a white box as shown in the picture. I hav ...

What is the method for including a dynamic image within the 'startAdornment' of MUI's Autocomplete component?

I'm currently utilizing MUI's autocomplete component to showcase some of my objects as recommendations. Everything is functioning correctly, however, I am attempting to include an avatar as a start adornment within the textfield (inside renderInp ...

Exploring the context of file upload events and analyzing javascript functionality

Can you help me conditionally trigger the file upload dialog using JavaScript based on an Ajax response? <input type="file" id="Upload"> I have hidden the input element as I don't want to display the default file upload button. Instead, ther ...

Incorporating Framer Motion into traditional React class components (non-functional approach)

I'm encountering an issue with a simple animation using Framer Motion that functions correctly in a functional component, but fails to work in a class component. I am new to Framer Motion and here is my react code => import {motion} from 'fr ...

Node.js HTTP request not returning any content in the body/message

Having some trouble with the requestjs package as I attempt to post data and receive a response. No matter what I do, the body response always ends up being undefined. const request = require('request'); request({ method: "POST", ...

Obtain precise JSON information using Node.js

Having limited experience with Angular JS and Node JS, I find myself in need of assistance. On the server side, I have multiple JSON files containing language translations. Based on a client's request for a specific language, such as French, I must re ...