Accessing a Kendo Grid instance within an Angular directive

Continuing from the previous question, which can be found here, I have an additional query that I felt warranted a separate post.

The link provided above demonstrates how to obtain a grid instance in Angular, credit to Lars for that.

Building upon the example in the previous question, I have now introduced the following directive:

<body>    
<div data-ng-app="app">     
<div data-ng-controller="Grid as vm">
        <div id='aa'>
    <div pckendo id='bb' kendo-grid='grid' 
       k-options="vm.options"></div>  
    </div>

 </div>
</div>      
</body> 

In addition, I added the following code in the .js file:

angular
.module("app", ["kendo.directives"])
.controller("Grid", Grid)
.directive('pckendo', PCKendo);
....
function PCKendo() {

function link(scope, element, attrs) {
    var instance = element;
    var vm = scope.vm;

    vm.msg = "";
    var grid = scope.grid;

}

return {
    link: link
}

You can view the complete example here.

Instead of fetching the instance in the controller, my goal is to retrieve it via a directive (as I believe this is a more appropriate place for event handling, etc).

I've attempted various approaches within the directive but haven't succeeded in obtaining the grid instance. Any further guidance on this matter would be highly appreciated.

Thank you in advance!

Answer №1

Essentially, the process remains the same; you just have to be patient and wait for the kendoRendered event to trigger. Here's an example implementation:

function PCKendo($timeout) {
    function link(scope, element, attrs) {
        scope.$on("kendoRendered", function (e) {
            scope.$apply(function () {
                scope.vm.setMessage("one col");
                scope.grid.hideColumn(1);
            });

            $timeout(function () {
                scope.$apply(function () {
                    scope.vm.setMessage("all cols");
                    scope.grid.showColumn(1);
                });
            }, 2000);
        });
    }

    return {
        link: link
    }
}

(Check out the demo here)

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

Looking to pass two distinct variables using a single props with v-if in Vue-JS. Any suggestions?

I am attempting to pass different data to my other component. Essentially, when my variable firstvalue is not null, I want to send firstvalue. Currently, this setup is functioning as expected. However, I now wish to send secondvalue if it is not null. < ...

Add a hyperlink within a button element

I am looking to add a route to my reusable 'button' component in order to navigate to another page. I attempted using the <Link> </Link> tags, but it affected my CSS and caused the 'button' to appear small. The link works if ...

Why is my AngularJS Ng-Repeat not showing the content of my array?

In the process of developing a functionality, I retrieve a document from a mongodb collection, store its data in an array, and utilize this array to populate elements on the view. The challenge is that although I can see that I am retrieving the relevant d ...

Using Alpine JS to rotate through images at regular intervals using the window.setInterval() method

Attempting to tackle a simple task using Alpine JS and the standard JS function setInterval. The goal is to create an image selector where images switch every second (1000ms). Here's what I have so far: <div x-data="imgFunc()"> ...

Tips for configuring Visual Studio Code to utilize path mappings for handling automatic imports

In order to streamline my project and avoid messy paths, I am implementing absolute paths that will allow for consistent imports regardless of the file's location in the project tree. For this purpose, I made adjustments to the tsconfig.json: "paths ...

Utilizing variable query operators solely in instances where they hold value

Imagine you are on a movie website where you can customize filters for the movies displayed to you. Currently, these preferences are stored in the User model as a map. Here is an example of what the preferences object might look like: preferences: { yea ...

Changing the position of a Bootstrap popover dynamically from top to bottom

Struggling with the bootstrap popover here. I can't seem to change the popover position from top to bottom when it reaches the top of the viewport. I attempted to use placement: 'auto bottom' but unfortunately, it didn't do the trick f ...

Is there a way to dim and deactivate a button after it has been clicked once?

Hello, I am attempting to disable and grey out a button after it has been clicked once in order to prevent the user from clicking it again until they refresh the page. I hope my question is clear enough and that you can understand me. Below is the HTML cod ...

show logged-in users on the screen

Can someone please assist me in updating my controller to change the username when the user is logged in? I am currently experiencing an issue where even after updating the user, the username field remains empty. Any help in resolving this would be greatly ...

Icon for TypeScript absent from npm package listings

Recently, I created a package and uploaded it to the npm repository. The package was displayed with an icon labeled "ts" on the website. https://i.stack.imgur.com/LoY1x.png The accompanying package.json showcased the inclusion of the "ts" icon - https:// ...

When hovering over an element, I must utilize a selector and reference a variable that was defined outside of the hover state in order to

Explaining this code may be a challenge, but I'll give it my best shot. Here's the code snippet: $('#navibar a').hover(function(){ var position = $(this).position(); var width = $(this).width(); $('#underliner'). ...

When a global variable is defined after a return statement within a function declaration, it does

Check out this Javascript code snippet: http://jsfiddle.net/ramchiranjeevi/63uML/ var foo = 1; function bar() { foo = 10; return; function foo() {} } bar(); console.log(foo); // should return 10, but returns 1 It's interesting to no ...

Adding custom styles to an unidentified child element in React using Material-UI

When the function below is executed in a loop, I need to include styles for the icon which will be passed as an argument to the function. The icon element will be an unspecified React Material-UI Icon component. const renderStyledCard = (lightMode, headi ...

The most efficient method for handling a vast amount of data in NodeJS

My database consists of 4 million numbers and I need to quickly check if a specific number exists in it. Example of the database: [177,219,245,309,348,436,...] I initially tried using a MySQL table for this task, but it took a lengthy 1300ms just to chec ...

What is the easiest method to design an email subscription form that remains fixed on the top right corner of the screen?

Looking for advice on setting up a sleek email signup bar that remains at the top of the browser while users scroll and navigate through different pages. I am working with WordPress and have jquery already loaded, but have not yet worked with either. Up ...

What methods are available for drawing on an HTML canvas using a mouse?

I am facing two challenges: how can I create rectangles using the mouse on an HTML canvas, and why is my timer not visible? Despite trying various code snippets, nothing seems to be working. Grateful for any help! HTML: <!DOCTYPE html> <html lan ...

What is the best way to save information to a JSON file using AngularJS?

If I have an HttpService implemented in a controller that returns JSON data, what is the best way to save this data to a file on my disk? My goal is to save this result as a mock file so I can use it offline instead of relying on the online service. ...

Using Django with Ajax without the need for the JQuery library

Exploring the world of Ajax without jQuery Library has been quite a journey. I recently created a basic view that displays a random number on the screen. After adding a button and invoking the ajax function, I encountered an issue where clicking the button ...

Move your cursor over the image to activate the effect, then hover over it again to make the effect disappear

Looking to enhance my images with hover effects. Currently, all the images are in grayscale and I'd like to change that so that when you hover over an image, it reverts to full color and remains that way until hovered over again. I've noticed so ...

"Resolving the problem of populating an empty array with JSON

My JSON structure at the top level is set up like this: { "video": [], "messages": [], "notifications": [] } In the database output stored in a variable called "result," I have data that I want to add to the "vide ...