Updating Kendo by modifying the Angular model

While working on a project with Angular, I recently discovered the Kendo-Angular project available at . I successfully integrated Angular-Kendo into my project and it seems to be functioning well, except for updating models in the way I am accustomed to.

This project aligns perfectly with my needs, however, the documentation does not provide examples of how to update an Angular model so that it updates a Kendo data source.

For instance, here is a snippet of code:

$scope.data = new kendo.data.DataSource({
    data: [{
        name: "India",
        data: [10, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855]
    }, {
        name: "World",
        data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, 2.245, 4.339, 2.727]
    }, {
        name: "Russian Federation",
        data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, 7.832, 4.3, 4.3]
    }, {
        name: "Haiti",
        data: [0.253, 0.362, 3.519, 1.799, 2.252, 3.343, 0.843, 2.877, 5.416, 5.590]
    }]
});

In Angular, one would expect something like this:

<input ng-model="data[0].data[0]" />

The input field should display 10. However, when trying to update the value in the input box and reflect it in the graph, the graph does not update.

If anyone familiar with these libraries knows how to achieve this functionality, please share your insights. Does such support exist? Or is this library simply designed to enable Kendo to work with Angular without further capabilities?

Answer №1

After solving the issue, it wasn't in the way I had anticipated.

I simply attached a change event to the input and utilized the Kendo redraw() method which updates every time my model changes. It's somewhat frustrating considering Kendo has put in a lot of effort for this feature. One would assume that two-way binding should be available.

I am still on the lookout for a superior solution, if there is one out there.

Answer №2

It's possible that the creators of angular-kendo or those well-versed in AngularJS may criticize my approach here, but I'll proceed anyway:

angular-kendo already includes a $watch on the data source. If you enhance its functionality by incorporating code like this:

scope.$watch(attrs.kDataSource, function (newData, oldData) {
    if (newData !== oldData) {
        element.data('$kendoDataSource', toDataSource(newData, type));

        var role = element.data("role");
        var widgetType = role.charAt(0).toUpperCase() + role.slice(1);
        var w = element.data("kendo" + widgetType);;

        if (!w) {
            w = kendo.widgetInstance(element, kendo.ui);
        }

        if (w && typeof w.setDataSource === "function") {
            w.setDataSource(element.data('$kendoDataSource'));
        }
    }
}, true);

then the desired behavior should be achieved. It puzzles me why such a feature isn't already built-in; to me, it appears fundamental. However, there may be technicalities that elude me since I haven't delved deep into the source code. Nonetheless, relying on manual event handlers for input updates doesn't quite align with Angular principles either.

Take a look at the demo. Please note: proceed at your own risk and refrain from implementation.

Edit: Upon examining the angular-kendo issue tracker, indications suggest they are considering similar enhancements (as per a comment by @BurkeHolland here). Therefore, my approach might not be entirely misguided; I have refined the demo for clarity.

Answer №3

Although I have reservations about this approach, I believe it is currently the most effective way to implement data binding. The suggestion is to utilize either kendo.data.ObservableArray or kendo.data.DataSource as the backend for the datagrid and then make updates to the ObservableArray or DataSource in the controller:

angular.module('MyApp').controller('MyController', function($scope, $http) {
    $scope.products = new kendo.data.DataSource({
        data: [],            // kendo watches this array
        pageSize: 5
    });

    $http.get('data/products.json').then(function(result) {
        // update the Kendo DataSource here.
        $scope.products.data(result.data);
    });
});

The structure of the HTML is as follows:

<div kendo-grid
     k-data-source="products"
     k-selectable="'row'"
     k-columns='[{ "field": "ProductName",           "title": "Name" },
                 { "field": "Supplier.SupplierName", "title": "Supplier" },
                 { "field": "Category.CategoryName", "title": "Category" }]'
     k-sortable="true"
     k-groupable="true"
     k-filterable="true">
</div>

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

SecurityError: The dubious operation triggers CORS to persist in its insecurities

I have developed an HTTP server using Express in Node.js. This server is currently running locally on port 3000. There is a served HTML page called "index.html" which makes AJAX GET requests for contents (in HTML format). These AJAX contents are also serv ...

Retrieve the class that corresponds to the element in the given list

In my JavaScript code, I have a NodeList of elements that were selected by querying multiple classes. I am using a "for" loop to iterate through the list. What I need is a concise one-liner to quickly determine which class each element was selected by so I ...

Best practices for authenticating methods with Google signin in Angular projects

I have made significant progress towards getting the Google signin feature to work, reaching 95% completion. However, I am currently facing two issues with the code. Here is a simplified version of my current implementation: loginWithGoogle(): void { //t ...

Unable to locate "Gruntfile.js" Node module for task execution

I am currently in the process of developing a module that enables node to execute Grunt tasks via the command line. This Node module is globally installed at : C:\Users\pcharpin\AppData\Roaming\npm\node_modules\task-app ...

What is the best way to change an object into a string in node.js?

Recently, I've delved into the world of node js and I'm eager to create a basic coap client and server using this technology. Successfully, I managed to set up a server hosting a text file, but now I aim to access it from the client. var coap = ...

Unable to retrieve headers from angular $resource query response on Safari browser

While the code successfully retrieves headers from responses in Chrome, FF, and IE, I am encountering an issue with Safari. Specifically, the X-Pagination-Total-Count header is not being retrieved as expected using the provided code snippet. $scope.logs ...

Error Message: Execution Not Recognized and Missing Requirement

After going through numerous threads, I couldn't find a solution to my specific issue. It's quite unclear what I've installed or uninstalled, but I'm hoping that this error message and its details might provide some clarity. Even though ...

What are some effective strategies for sharing information in JavaScript?

I have an ASP.NET website and I need to pass information to JavaScript for some tasks. Currently, I am using the following method: <script type="text/javascript"> var userHasMicrositePhoto = '<%=hasMicrositePhoto%>'; </script& ...

Having trouble rendering an object in my ThreeJS project. The error message says: "THREE.OBJLoader: Unexpected line: 'usemap glass'"

I encountered an error while running threejs in an angular 8 application. The objective is to load an object, for which the object and material files were obtained from Kenney assets. Despite referencing examples on the official threejs site and other onli ...

Tips on accessing the JS file api within an angular component.ts file

I've got a function in my JS file located at src/server/js/controller.js, and I'm trying to use that API within a component's ts file. I attempted the following code to achieve this but it doesn't seem to be working properly. controlle ...

Filter Observable based on object array property

I am trying to filter an Observable and only keep the stream that has a specific property value in an array of objects inside it. For example, consider this Observable: const observable = of({name: 'agency', year: '2010', job: [ ...

Is there a way to store the JWT response header retrieved with fetch?

I am currently utilizing React and employing fetch to send a request to the server: fetch("http://localhost:8001/api/login", { method: 'post', headers: { "Content-type": "application/x-www-form-urlencoded; charset=UTF-8" }, ...

The most effective method for modifying a prop in VueJS without altering the parent's data

In the main Vue component, there is an object named user. If I pass this user object as a prop to a child component: <child :user="user"></child> When updating user.name in the child component, the changes also reflect in the parent componen ...

Blurring isotopes within Google Chrome

While working with isotope in Google Chrome, I noticed that all items have the following CSS code: -webkit-transform: translate3d(properties); In Chrome, every even element [2,4,6,8,10,12,14...] appears blurred, whereas in Firefox everything looks normal ...

RxJS - Only emit if another source does not emit within a specified time frame

Imagine having two observables. Whenever the first one emits, there should be a 2-second pause to check if the other observable emits something within that timeframe. If it does, then no emission should occur. However, if it doesn't emit anything, the ...

Tips for moving a div with a button in jQuery

I am working on a parent div that has an overflow set to hidden and it contains dynamically created children. I want to be able to scroll the parent div using two buttons - one for scrolling up and the other for scrolling down, as if the div had overflow-y ...

The markers on Google Maps are currently displaying in the wrong position, despite the latitude and longitude being correct

Utilizing the Google Maps API, I have implemented a system to dynamically add map markers tracking 2 of our company's vehicles. The website is developed in asp.net c# mvc with bootstrap 4.3.1. An ajax request retrieves the latest marker location from ...

What is the best way to create a line break in text?

I've recently started familiarizing myself with Angular Material and I'm curious about how to display multiple cards side by side. I've been using ng-repeat for this, but I would like a maximum of three cards per row before a new row starts ...

Is there a way to identify the duplicated input element values using jquery?

Just starting out in the world of web development and jQuery. I have an input element that has been bound with a blur event. Here's the code snippet: // Here are my input elements: <input class="input_name" value="bert" /> <input class="inp ...

Trouble arises when implementing a nested flex layout in Angular Material shorthand

I'm having trouble identifying the issue with this particular layout. My goal is to maintain a Single Page Application layout where the "deepest" component only becomes scrollable if the viewport height is too small, as indicated in the snippet by us ...