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

Error in Next.js: The element type is not valid. Please make sure it is either a string (for built-in components) or a class/function (for composite components) and not undefined

I've encountered an issue while working on my Next.js project where I am trying to import the Layout component into my _app.js file. The error message I received is as follows: Error: Element type is invalid: expected a string (for built-in componen ...

The package-lock file may vary depending on the npm version being used

I am experimenting with a new typescript react app that was created using CRA. I am running @6.4.1 on one PC and an older version on another. Interestingly, the newer version installs dependencies with an older version instead of the expected new one. ...

What is the process for transferring information from a Microsoft Teams personal tab to a Microsoft Teams bot?

Is it feasible to share data such as strings or JSON objects from custom tab browsers to a Teams bot's conversation without utilizing the Graph API by leveraging any SDK functionality? ...

How to resolve the error of "Objects are not valid as a React child" in NextJs when encountering an object with keys {children}

I am currently working on a nextjs application and I have encountered an issue with the getStaticPaths function. Within the pages folder, there is a file named [slug].tsx which contains the following code: import { Image } from "react-datocms"; i ...

Issue with onClick event not firing when using option tag in React

onClick event seems to have an issue with the <option> tag. How can we successfully use the onClick event with the select option tags while assigning different parameters to each option? async function setLanguage(language) { ...

Exploring numerical elements in interactive content

Struggling with the Wikipedia API and encountering issues with the results that are returned. {"query":{ "pages":{ "48636":{ "pageid":48636, Concerned about how to access a specific ID (such as 48636) without knowing it in advance ...

What is the correct way to invoke a function from an external JavaScript file using TypeScript?

We are currently experimenting with incorporating Typescript and Webpack into our existing AngularJS project. While I have managed to generate the webpack bundle, we are facing an issue at runtime where the program is unable to locate certain functions in ...

What is the best way to incorporate CSS into JavaScript code?

Here is the code I am working with: <script type = "text/javascript"> function pic1() { document.getElementById("img").src = "../images/images/1.png"; } function pic2() { document.getEl ...

Stopping all animations with JQuery animate()

I have a question about stopping multiple animations. Here's some pseudocode to illustrate my situation: CSS #div1 { position: absolute; background-image: url("gfx/cat.jpg"); width: 60px; height: 70px; background-size: 50%; b ...

Exploring Vue Component Features through Conditional Display

I am working with a vue component called <PlanView/>. In my code, I am rendering this component conditionally: <div v-if="show_plan" id="mainplan"> <PlanView/> </div> <div class="icon" v-else> ...

What are the steps for installing the latest version of popper, v2?

When you run the following command: npm install popper.js --save You will receive a warning message that says: npm WARN deprecated <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="81f1eef1f1e4f3afebf2c1b0afb0b7afb0">[email& ...

Utilizing jQuery to Perform Calculations with Objects

Can someone help me with a calculation issue? I need to calculate the number of adults based on a set price. The problem I'm facing is that when I change the selection in one of the dropdown menus, the calculation doesn't update and continues to ...

Choose an option from a list of items in a nested array by

I'm working with a nested array (3d) and I want to populate a drop-down select menu with its values using PHP and jQuery I've tried implementing this for two-level arrays like categories and sub-categories, but what if some sub-categories have f ...

Is there a way to make the console output more visually appealing with some styling?

What techniques do programs such as npm and firebase use to generate visually appealing and informative console output during command execution? Consider the following examples: $ firebase deploy or $ npm i <some-package> ...

Unveil the Expressjs middleware within the API Client

I am currently developing a Nodejs API Client with the following simple form: //client.js function Client (appId, token) { if (!(this instanceof Client)) { return new Client(appId, token); } this._appId = appId; this._token = tok ...

Creating a CSS animation to repeat at regular intervals of time

Currently, I am animating an SVG element like this: .r1 { transform-box: fill-box; transform-origin: 50% 50%; animation-name: simpleRotation,xRotation; animation-delay: 0s, 2s; animation-duration: 2s; animation-iterat ...

JavaScript powered caller ID for web applications

I am currently working on an innovative project where I aim to automatically detect the phone number of a landline call to a specific device. While research led me to various packages like npm caller-id-node that work with desktop applications using the mo ...

When using a variable to fetch data in JSON, an undefined error occurs. However, if a hardcoded index

I am facing an issue while trying to extract and manipulate JSON data from a file for an application I am developing. When looping through the data, I encounter an undefined error that seems to indicate a missing property in the JSON object when accessing ...

VueJS with Vuetify: Issue with draggable cards in a responsive grid

I am currently working on creating a gallery that allows users to rearrange images. To test this functionality, I am using an array of numbers. It is important that the gallery is responsive and displays as a single column on mobile devices. The issue I ...

How can I duplicate an array of objects in javascript?

I'm struggling with a javascript issue that may be due to my lack of experience in the language, but I haven't been able to find a solution yet. The problem is that I need to create a copy array of an array of objects, modify the data in the cop ...