angularjs-directive,kendo-grid , How to handle double click event on kendo grid using angularjs


How to handle double click event on kendo grid using angularjs

Question:

Tag: angularjs-directive,kendo-grid

I am trying to handle double click event for each row on kendo grid.Single click event is working by using k-on-change( k-on-change="methodname(dataItem.val)" ) , but i can not handle double click event from angularjs.


Answer:

Try this to get access to the element.

HTML

<div data-kendo-grid="grid" options="gridOptions"></div>

JS

  $scope.$on("kendoWidgetCreated", function(event, widget){
    if (widget === $scope.grid) {
      $scope.grid.element.on('dblclick', function (e) {console.log(e)});
    }
  });

Related:


AngularJS template vs templateURL in directive


javascript,angularjs,angularjs-directive
I have a directive defined like this: app.directive('itemComments', ['ajax', function(ajax) { return { restrict: 'A', templateUrl: URL + 'public/Pages/Homepage/ajax/getCommentsTpl', controller: 'ItemLibraryController', controllerAs: 'itemLibraryCtrl', link: function(scope, element, attr) { var $element = $(element); scope.$watch(function(scope) { return $element.find('li').length > 0; }, function(finished) { if(finished) { autosize($element.find('textarea')); } }); } }; }]); The...

Reply Textarea for particular post(using textarea), opening for all the comments


angularjs,angularjs-directive,angularjs-scope,angularjs-ng-repeat,ng-repeat
Hi I am trying to implement facebook kind of post and reply comments using angularjs. Below is my code <doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script...

How to shift parent
diagonally in AngularJS custom directive


html,css,angularjs,angularjs-directive,directive
The following code sample works correctly: the colors of the dynamically generated ellipse elements iterate through the colors in an array. As a variation, I'm trying to dynamically update the style property of the parent div element in a custom directive so that the div elements are essentially shifted downward...

How Do I call and pass data to a Directive from a Controller Angular


angularjs,laravel,angularjs-directive,controller
I have a QueueController.js which handles AJAX query. How do I pass the data from my CONTROLLER to my DIRECTIVE and show it to the Modal. Thanks. QueueController.js app.controller('QueueController', function($scope, $http, $interval, $modal) { $scope.Call = function(trans_id){ $http({ url: $locationProvider + 'query_stransaction', method: "GET", params: { trans_id: trans_id } }).success(function...

AngularJS proper events biding with parent and child directives


javascript,angularjs,events,angularjs-directive,event-propagation
I'm trying to implement popup window and button which reveals it. I'm doing that by the means of directives: <div class="wrapper" wrapper> <div class="popup" ng-class="{'popup__active':isActive}"> Popup message </div> <button btn>Click me</button> </div> When popup is visible I need to be able to close it by clicking anywhere outside of the...

AngularJS outputting Javascript in a directive


javascript,angularjs,angularjs-directive,morris.js
Hi good people of stack overflow.. I am trying to make a directive in angular that outputs javascript that I'll use to draw a morris chart. So far I've been having a tough time. Here's the code: area-chart.js: angular.module('areaChart', ['ui.bootstrap']).directive('areaChart', function() { var directive = {}; directive.templateUrl = directivePath +...

KendoUI Grid - Complex JSON with inconsistent keys


javascript,json,kendo-ui,kendo-grid
I know this is probably been asked before, but having tried to find an answer - I am guessing either I am not comprehending some of the answers right, or I am looking at the problem all wrong. I am using a complex SLC loopback query - and the api...

Getting Kendo Grid from its DataSource


kendo-ui,kendo-grid
I'm writing a generic error handler for all of the Kendo Grids. I need to get that source Grid to prevent its default behavior in saving data. In the handler, you can access the source's DataSouce by args.sender. How can I access the Kendo Grid from that DataSouce? The only...

AngularJS Directive how to show/hide custom(appended) element on a condition


javascript,jquery,angularjs,angularjs-directive
I' working on angular directive, to show error msg on exceeding character count on textarea. with following code, I can show error(div) MSG by appending on element, but I cannot hide it after showing it for first time, what I need to do in else block to remove the "elCharLimitError"....

How to mark Kendo Grid's cell as edited?


kendo-ui,kendo-grid,kendo-asp.net-mvc
I'm dynamically editing some fields using JavaScript. But the problem is Kendo's dataSource doesn't recognize them as changed cells. Grid's edit mode is InCell. This is my current JavaScript code: tablesGrid.tbody.find("input[type='checkbox']").each(function () { $(this).on('change', function () { var isChecked = $(this).prop('checked'); var dataItem = tablesGrid.dataItem($(this).closest('tr')); var currentTr = $(this).closest('tr'); var...

How to get data out of ember objects


javascript,ember.js,kendo-grid
I'm fairly new to ember and I'd like to know whats the fastest way to extract the data out of ember objects. I've loaded my model with a very large amount of records using this.store.find('modelName);` in my route. I created a component on my view using {{kendo-ui.kendo-table descriptor=tableDescriptor data=model}}. My...

pass callback to directive - angularjs


angularjs,angularjs-directive
I try to add an animation to an element via a directive. When the animation is done I want it to call the passed callback function. I try to do achieve it this way (SO - How to add validation attributes in an angularjs directive) The 'addAnimation' directive: angular.module('myModule') .directive('addAnimation',...

Format DateTime.ParseInfo


c#,datetime,kendo-grid
Good morning, I have problem with format of datetime which comes in format "Mon Jun 15 2015 00:00:00 GMT+0200 (Central Europe Daylight Time)". var value = "Mon Jun 15 2015 00:00:00 GMT+0200 (Central Europe Daylight Time)"; DateTime.Parse(value) throws CastException. I have also tried use ParseExact method which is more powerfull...

Dynamically build table after it recieves information from service


javascript,html,angularjs,asynchronous,angularjs-directive
HTML Code: <table class="table table-bordered table-striped"> <thead> <tr> <td>one</td> <td>two</td> <td>three</td> </tr> </thead> <tbody> <tr ng-repeat="color in colors"> <td>{{ color.one }}</td> <td>{{ color.two }}</td> <td>{{ color.three }}</td> </tr> </tbody> </table> Controller: var SomeController = function ($scope, SomeService, $window) { var colors= []; SomeService.someFunction().success(function...

Get Angular to action ng-if in new elements generated by d3.js


javascript,angularjs,svg,d3.js,angularjs-directive
I am generating a series of <circle ng-if='n'> someScopeFunction()' \> with d3.js How can I get Angular to notice and work on these new elements and ng-ifs? And how can I get it to do so with angular variables, e.g. <circle some-attr='{{i - 2}}' />...

Running script within ui-router TemplateURL


javascript,angularjs,angularjs-directive,angular-ui-router
I currently have a single page web application using Angular and UI-Router. The majority of my javascript files are being loaded on my index.html page, and those all work perfectly throughout the application. Issue: I have a state that requires javascript code to run when the state is called. (When...

How to programically collapse or expand Kendo Grid Group by values in row


jquery,asp.net-mvc,kendo-ui,kendo-grid
I have a requirement to default a grouped grid to collapsed state UNLESS it contains a row with a certain value (Status == "Closed"). I got this far but fell down because the dataView only contains an array of rows of the grouped field not the rows as I've seen...

Angularjs $watchCollection on $rootScope not triggered when values updated from directive


javascript,angularjs,events,angularjs-directive,angularjs-watch
I'm running into a bit of an issue solving a problem with some Angularjs functionality I'm working on. The basic idea is that I have a system where certain criteria must be met before the user is allowed to advance to the next section of the app. One example of...

why margin-right is not working in ionic + angular js


javascript,jquery,angularjs,angularjs-directive,angularjs-scope
I am trying to give a margin to a div.But it is taking margin-left but not taking margin right why ?Actually I have scrolling div in which content is scroll I want to give some margin from left as well as from right .So I give margin in % but...

Pass scope to element.after()


angularjs,angularjs-directive
The below is called in my HTML: <input data-autocomplete> There is a parsing error (basic HTML error) because when data-autocomplete is ran, it calls another directive inside its HTML: data-autocomplete-results. When this is run/compiled, it creates a div inside of the <input> element and because that is bad HTML it...

scope.$observe is not a function in an AngularJS Directive


javascript,angularjs,angularjs-directive
Take the following directive: appDirectives.directive('drFadeHighlight', ['$animate', '$timeout', function ($animate, $timeout) { return { scope: { isWatchObject: '=' }, restrict: 'A', link: function (scope, element, attr) { element.addClass('dr-fade-highlight'); scope.$observe('isEnabled', function () { console.log('i observed...'); console.log(arguments); }); } } }]); I have stripped it right back, to show only the part I...

ng-switch is not working as expected


angularjs,angularjs-directive,angularjs-scope,ng-switch
Maybe the use of the 2-ways binding and $watch is still not very clear to me.. but I was expecting that this piece of code should work! I have a topNavbar directive in my index.html page. The topNavbar should show the loginButton if the user is not logged, otherwise a...

How to get column footer data in Angular UI-Grid?


javascript,angularjs,angularjs-directive,angularjs-scope,angular-ui-grid
For example, in this tutorial, if there is any way to get the data in the column footer? I'd like to present the total numbers in somewhere else. Thanks in advance....

KendoUI Popover $compile issue


angularjs,angularjs-directive,kendo-ui,angularjs-compile,kendo-tooltip
I have directive which is a wrapper around KendoUI kendo-tooltip and I'm instantiating it like this: <div my-directive-popover="options"> </div> Inside my code I replace my-directive-popover with kendo-tooltip like this: $element.attr( 'kendo-tooltip', popoverName ); At the end of pre compile function I have to of course compile this so it's recognized...

Angular :: Making Input Text to open up dropdown list upon focus


javascript,angularjs,angularjs-directive
How can i make <input type="text"> to show drop down probably like it happens in auto complete extenders but without typing i mean as soon as i focus on text input box it should show a list like dropdown. In Simple word I want to show <select></select> which look like...

Improve slow angular directive


javascript,angularjs,angularjs-directive
I have a page that renders table view or div/blocks view depending on window width. But the swop between views happens very slow. Maybe I am not doing things in the best way? I basically have 2 scope variables(block and table, set to true or false) defined in the controller....

Detecting non-assignable values in angular directives


angularjs,angularjs-directive
I have a directive that will get/set focus on an element depending on a value. When the element is focused or blurred the directive will update the boolean value. However, sometimes I only want to set the focus when a condition is met and I use a non-assignable value, which...

Angular directive not applied on change of the value


javascript,angularjs,angularjs-directive
I have a directive like testApp.directive('changeValue', function(){ alert("coming"); return { restrict: 'E', link: function (scope, element, attrs) { element.text(attrs.val); }, replace: true }; }); and I have my views as follows <change-value val="{{test.val}}"/> When I refresh my page, I could see the values and I get the alerts. But when...

how to separate scopes without isolate scope?


javascript,angularjs,angularjs-directive,isolate-scope
Isolate scope is inconvenient because the directive stops inheriting from the parent scopes. So right now when I want to use the same directive within the same scope I am using ng-if to separate the directive scopes like so: <some-directive ng-if="true" var1="'wtva'" var2="{{wtv2a}}" var3="wtv2a" ></some-directive> <some-directive ng-if="true" var1="'wtvb'" var2="{{wtv2b}}" var3="wtv2b"...

Covert encoded HTML in string to plain text for Input Fields using Agular


javascript,html,angularjs,angularjs-directive,angularjs-filter
I have a use case, where we can have '&#' characters inside of a JSON. Name: "Kenneth Hinsvark &#38; Maurice McAlister" Address: "555555 W. Canyon Dr &#35; B212" The string values are pulled back from a database. Apparently the values were saved to the DB with HTML encoding. I need...

How to get value from ng-repeat when event not from element within ng-repeat (i.e. not ng-click)


javascript,angularjs,angularjs-directive,angularjs-ng-repeat,angular-filters
I have a lookahead fuzzy search directive for category tagging: <input type="text" class="form-control" placeholder="Apply Tags" ng-keydown="checkKeyDown($event)" ng-change="searchTags()" ng-model="searchText"> <div ng-show="searchText.length>0"> <ul> <li ng-repeat="tag in suggestedTags | fuzzySearch : searchText : 'OR' track by $index" ng-class="{active : $index === selectedIndex}"> {{tag}} </li> </ul> </div> This is how I'm handling things suggestedTags:...

Pass variable from directive to controller


javascript,angularjs,angularjs-directive,angularjs-scope,angularjs-controller
I have this directive definition and want to pass currentScriptPath to the TestController. How do I do that? (function(currentScriptPath){ angular.module('app', []) .directive('test', function () { return { restrict: 'E', scope: {}, templateUrl: currentScriptPath.replace('.js', '.html'), replace: true, controller: TestController, controllerAs: 'vm', bindToController: true }; }); })( (function () { var scripts...

angularjs directive to change the format of name


javascript,angularjs,angularjs-directive
I did not quite understand how to write AngularJS directives even after looking at many blogs. Basically I have an array of names in the format "lastname, firstname". I want to write a directive to make it "firstname lastname" My html is like this <div ng-repeat="names in nameArray" <custom-name-format> {{names}}...

How to hide columns in Kendo Grid when editing in a popup


asp.net-mvc,kendo-ui,kendo-grid,kendo-asp.net-mvc
I use Telerik Kendo Grid editing-inline. I want to hide certain columns when editing popup the number of columns....

AngularJS, Animate on change: directive $watch not called


javascript,angularjs,angularjs-directive
I'm creating a live websocket application which requires grabbing the users attention upon change of a value. The following directive is used in multiple places on the same page: <span class="badge" animate-on-change animate-class="highlightWarning" animate-watch="totalAnswers">{{totalAnswers}}</span> and <div animate-on-change animate-class="colorWarning" animate-watch="rq.answer" ng-switch="question.type" ng-repeat="rq in recentResponse.answers" ng-if="rq.question == question.id"> Now, rq.answer rarely changes,...

Set default attribute for all Kendo UI Grids


javascript,kendo-ui,kendo-grid
I have a Web Site containing multiple Kendo UI Grids. I have now been asked to remove the scrollbar from each of these grids. I know there's a config attribute scrollable that I could change to false in order to achieve this. However, I would like to avoid adding this...

Angular directive that requires another directive that uses an Attribute defined controller


javascript,angularjs,angularjs-directive
I'm learning angular and when I was studying custom directives I got stuck in a situation that I don't know how to solve. Here are my custom direcives: /** * Created by Lucas on 11/06/2015. */ 'use strict' eventsApp .directive('greeting',function() { return { restrict: 'E', replace: true, template: "<button class='btn'...

Kendo Grid Date is null for 13/06/2015 all dates after 12


asp.net-mvc,razor,kendo-grid,kendo-asp.net-mvc
My grid: @(Html.Kendo().Grid<IBATechnologies.IBA.Web.Models.AssetTransactionDetailViewMod el>() .Name("transactionGrid") .Pageable() //.Editable(editable=>editable.Mode(GridEditMode.InLine)) .Columns(colums => { colums.Bound(p => p.assetCode).Width(100); colums.Bound(p => p.assetDesc).Width(100); colums.Bound(p => p.remark).Width(100); colums.Bound(p => p.currencyCode).Width(100); colums.Bound(p => p.rate).Width(100); colums.Bound(p => p.currencyRate).Width(100); colums.Bound(p =>...

What should be the correct path of templateUrl in angularJs directive?


javascript,angularjs,angularjs-directive
I want to give path of templateUrl as a seprate .jade file. But its showing 500 err and Error: [$compile:tpload] . Below is the code in my directive app.directive('personRecord',['$http',function(http){ return{ restrict : 'AE', templateUrl : '../../views/template.jade', link : function(scope,ele,attr){ } } }]); and my folder structure is like below. bin...

How to remove circle on background of checkbox?


angularjs,angularjs-directive,angularjs-scope,ionic-framework,ionic
I am trying to show a check-box in a popup screen. Actually my checkbox is rounded. I need no rounded background and tick should be green as show in image. I need checkbox will be placed on right side and having no background but have green color. Here is my...

Limiting $scope in AngularJS


javascript,angularjs,angularjs-directive,angularjs-scope
I have a multi-page AngularJS web application that serves as an analytics dashboard. I am currently using $scope to create variables so I can display some of the data dynamically on the HTML pages. Instead of creating $scope variables that will be global no matter what page a user is...

Custom directive using ngModelController not updating UI value


angularjs,angularjs-directive
I am trying to create a directive that formats a decimal value to a time value h:mm. If a user enters a time value the model should be updated with the decimal representation. If a user enters a decimal value his input should be replaced with the formatted value. I...

Jquery Time Picker inside ng-repeat is not working


jquery,angularjs,angularjs-directive,angularjs-ng-repeat,datetimepicker
As i am proceeding into my project. In Some place i need to repeat few input fields which contains two time html5 field. Everything was going well when i was testing in Chrome but when i tested in in firefox it is showing as text field. (Firefox does not support...

Adding directives to an element using another directive


angularjs,angularjs-directive
I am trying to create a directive that adds some html code but also adds additional attributes/directives. Using the code below, an ng-class attribute is indeed added, but it seems angular does not recognize it as a directive anymore. It is there, but it has no effect. How can I...

password check directive elem.add error


javascript,angularjs,validation,events,angularjs-directive
I'm making a password checking directive to ensure password and confirm_password fields are the same: angular .module('myModule') .directive('pwCheck', function() { return { require: 'ngModel', link: function (scope, elem, attrs, ctrl) { var password = "#" + attrs.pwCheck; elem.add(password).on('keyup', function() { scope.$apply(function () { ctrl.$setValidity('pwmatch', elem.val() === $(password).val()); }); }); }...

Inject dependency to the angularjs directive using typescript


angularjs,angularjs-directive,typescript
Lets say I have a simple angular directive that looks like this: app.directive('setFocus', ['$timeout', function($timeout) { return { restrict: 'AC', link: function(_scope, _element) { $timeout(function() { _element[0].focus(); }, 0); } }; }]); How can I write this using Typescript and get the $timeout accesible within the link function? My example...

AngularJS - binding/linking two directives together


javascript,angularjs,angularjs-directive
What is the preferred way to link/bind two directives together? I have a controller with two directives, first directive is a select element, after selecting option, second directive should process selected item value. App code: var app = angular.module('plunker', []); app.controller('MainCtrl', function() { var sharedData = { selectedId: '' };...

Angular JS - Load a template html from directive on click of a button


javascript,jquery,html,angularjs,angularjs-directive
I am trying to load a HTML template when a link is clicked. I have made a directive that contains templateUrl which loads a HTML file. I am calling a function when a link is clicked that appends a div with our custom directive "myCustomer" to a div already in...

How do I reference a specific cell in kendo grid with javascript?


javascript,kendo-ui,kendo-grid,kendo-asp.net-mvc
Right now I have a kendo grid with 2 rows and 6 columns. I need some logic to highlight a specific cell but I don't know how to reference a cell. I used this example but I don't know what to pass in as the id. myHub.client.highlightRow = function (id)...

Implementing KendoUI grid search with dataSource filtering


javascript,html,kendo-ui,kendo-grid
I'm not sure if i'm doing this correctly, but I want to filter ('search') kendo ui grid based on one input's value. However, I want to search two fields of the grid, based on only one input. $("#grid").data("kendoGrid").dataSource.filter({ logic: 'or', filters: [ { field: 'lastName', operator: 'startswith' }, { logic:...