Develop Reference

How to update D3 chart when data is updated

I am using D3 charts to display the data on screen. Data is updated from WebApi. Once data is updated I want to refresh data in chart.
here is the code
$scope.config = {
title: 'Products',
tooltips: true,
labels: false,
mouseover: function () { },
mouseout: function () { },
click: function () { },
legend: {
display: true,
//could be 'left, right'
position: 'right'
}
};
$http.put(WebApiURL.GetWebApiURL() + 'api/ReportPerformance', data)
.then(function (response) {
$scope.PerformanceData = response.data;
$scope.LoadingData = "";
$scope.chartdata = [];
var tempchartdata = [];
angular.forEach($scope.PerformanceData, function (value) {
tempchartdata.push(value.ReportTimeInSeconds);
});
$scope.chartdata = tempchartdata;
}), function errorCallback(x, y, z) {
$scope.LoadingData = "Error while generating report:= " + x.ExceptionMessage;
};
}
this web call updating data $scope.chartdata.
Chart definition in html...
<div data-ac-chart="'bar'"
data-ac-data="chartdata"
data-ac-config="chartConfig"
style="height: 500px; width: 500px;"
class="chart">
</div>
But when data come from webApi, it is updating $scope.chartdata but it is not reflecting on screen.
Added plunker... http://plnkr.co/edit/a0mVRL0Jo9ah8Om8ONTc

Try to apply method, I thing its now updated because, $digest not working in your code. Wrap your code around
$scope.$apply(function () {
//your code
});
$scope.$apply(function () {
$scope.dataAcData
});
go through http://jimhoskins.com/2012/12/17/angularjs-and-apply.html link, Hope it will help you

you should watch the $scope.dataAcData in your directive and update the D3 in
scope.$watch('dataAcData',function(){
//update your d3 here
})

Show/Hide print button in JQuery?

I was wondering is there any way to show print button based on the argument passed in the function. Here is my code that creates dialog box:
alertInfo: function (message, title, height, width, print) {
$("<div></div>").dialog( {
buttons: {
"Ok": function () {
$(this).dialog("close");
},
//show/hide button if argument 'print' equals to 'Yes'
"Print": function() {
$(this).dialog().printArea();
},
},
close: function (event, ui) { $(this).remove(); },
resizable: false,
title: title,
modal: true,
width: height,
height: width,
overflow:'auto',
position: {
my: "center",
at: "center",
of: window
}
}).html(message);
}
This is the code where I'm passing the arguments in alerInfo() function:
$.alertInfo(infoTable,'User Info',800,600,'Yes');
I still did not get this to work and If I tried to put if statement around Print button error occurred. If anyone can help please let me know.

alertInfo: function(message, title, height, width, print) {
var buttons = {
"Ok": function() {
$(this).dialog("close");
}
};
if (print) buttons.print = function() {
$(this).dialog().printArea();
};
$("<div></div>").dialog({
buttons: buttons,
close: function(event, ui) {
$(this).remove();
},
resizable: false,
title: title,
modal: true,
width: height,
height: width,
overflow: 'auto',
position: {
my: "center",
at: "center",
of: window
}
}).html(message);
}
This assumes the print parameter is a boolean
$.alertInfo(infoTable,'User Info',800,600, true); // to show print button
$.alertInfo(infoTable,'User Info',800,600, false); // to not show print button

You're effectively passing an object to the buttons property:
{
"Ok": function () {
$(this).dialog("close");
},
"Print": function() {
$(this).dialog().printArea();
}
}
So what you can do is dynamically create that object based on your conditions and then set the dynamically created object to the property. It might look something like this:
// create the object
var myButtons = {
"Ok": function () {
$(this).dialog("close");
}
};
// conditionally add a "print" button
if (someCondition) {
myButtons.Print = function() {
$(this).dialog().printArea();
}
}
// use the object
$("<div></div>").dialog( {
buttons: myButtons,
close: function (event, ui) { $(this).remove(); },
// etc.
});

Kendo UI Grid reference undefined in AngularJS

I am trying to integrate Kendo UI into AngularJS. I've come across an issue which I can't seem to solve. I am fairly new to AngularJS and am trying to follow the guidelines as best as possible.
The issue at hand is that I am unable to obtain a reference to my Kendo UI grid. I've already gone through a couple of similar SO questions, but none seem to resolve the issue. The main difference in my code is that I'm using controllerAs instead of $scope.
Datagrid Controller:
'use strict';
angular
.module('ayotaWebFeApp.datagrid')
.controller('DataGridController', DataGridController);
DataGridController.$inject = ['$scope','$routeParams', 'datagriddataservice'];
function DataGridController($scope, $routeParams, dataservice) {
console.info('DataGridController instantiated.');
var vm = this;
vm.grid = {};
vm.dataTitle = $routeParams.datatype;
activate();
$scope.$on('kendoWidgetCreated', function(event, widget) {
console.log('kendowidgetcreated event: ', event);
console.log('kendowidgetcreated widget: ', widget);
$scope.$apply();
});
function activate() {
console.info('Activate was called.');
return getDataFields().then(function() {
console.info('Loaded data fields for data type :'+$routeParams.datatype);
});
}
function initGridOptions(columnSpec) {
var restURL = '/api/data';
if($routeParams.ups) {
restURL += '/UPS/' + $routeParams.ups;
} else {
restURL += '/adm';
}
restURL += '/' + $routeParams.historical;
restURL += '/' + $routeParams.datatype;
console.info('Data REST url : ', restURL);
console.info('fields: ', columnSpec);
vm.dataGridOptions = {
name: 'grid',
columns : columnSpec['columns'],
dataSource: {
type: 'json',
transport: {
read: 'http://localhost:57713'+restURL
},
schema: {
model: {
fields : columnSpec['fields']
}
}
},
sortable: true,
filterable: true,
scrollable: true,
reorderable: true,
resizable: true,
selectable: 'single row',
columnMenu: true,
pageable: {
refresh: true,
buttonCount: 5
},
dataBound: onDataBound,
height: '100%'
};
console.info('vm.dataGridOptions : ', vm.dataGridOptions);
console.info('scope after datagridoptionsloaded: ', $scope);
console.info('vm.grid: ', vm.grid);
console.info('scope.vm.grid: ', $scope.vm.grid);
}
function getDataFields() {
return dataservice.getDataFields($routeParams.datatype)
.then(function(data) {
initGridOptions(data);
});
}
function onDataBound(ev) {
console.log('DATABOUND !');
//vm.grid = ev.sender;
var gh = $('.datagrid-grid').find('.k-grid-header');
var gc = $('.datagrid-grid').find('.k-grid-content');
//var rightPaddingHeader = gh.css("padding-right");
gh.hide();
gh.css('padding-right', '0px');
gc.css('overflow-y', 'auto');
gh.show();
//resizeGrid();
//unbind event
vm.grid.unbind('dataBound');
}
function resizeGrid() {
console.log('vm.grid.dataSource: ', vm.grid.dataSource);
// trigger layout readjustment
vm.grid.resize();
// force layout readjustment
vm.grid.resize(true);
//set new pagesize according to content height to avoid inner scrollbars
var gridContentWidget = $('.datagrid-grid .k-grid-content');
console.info('gridContentWidget.height(): ', gridContentWidget.height());
var rowHeight = $('.datagrid-grid .k-grid-content tr').first().height();
var newPageSize = Math.floor(gridContentWidget.height() / rowHeight);
console.info('Setting dataSource to new pageSize: ', newPageSize);
if(newPageSize != vm.grid.dataSource.pageSize())
vm.grid.dataSource.pageSize(newPageSize);
console.info('DataSource pageSize after set: ', vm.grid.dataSource.pageSize);
}
}
And the corresponding html
<div class="datagrid-container">
<h2>{{vm.dataTitle}}</h2>
<div class="datagrid-grid">
<div kendo-grid="vm.grid"
k-options="vm.dataGridOptions"
k-ng-delay="vm.dataGridOptions"
datagrid-resize />
</div>
</div>
Only in the onDataBound function can I get a reference through the event sender.
Any suggestions are highly appreciated.

try this:
vm.gridReference = $('div[kendo-grid]').data('kendoGrid');
I haven't yet figured out a decent way of getting a grid reference without throwing JQuery around but this will do for a quick and dirty.

Popup window using Javascript

i am trying to open a page in popup using ModalDialog.
Issue: The popup window get closed before it gets loaded.
Code:
function ShowPopup(id, rowIndex) {
var options = {
title: "Add User Account",
width: 750,
height: 800,
url: "/sites/Main/sitepages/Home.aspx"
};
SP.UI.ModalDialog.showModalDialog(options);
}
this.btnAccOk.Attributes.Add("onclick", "javascript:ShowPopup(0,0);");

function ShowPopup(id, rowIndex) {
var options = {
title: "Add User Account",
width: 750,
height: 800,
url: "/sites/Main/sitepages/Home.aspx"
};
SP.UI.ModalDialog.showModalDialog(options);
return false;
}
this.btnAccOk.Attributes.Add("onclick", "return ShowPopup(0,0);");
Try above code.i have made few changes

Mootools - one Fx.Morph object for different effects? ... Also Morph onComplete

I'm having trouble with a Mootools Fx.Morph object. I expected I'd be able to use a single object several times to create different effects. I'd like to toggle the effect on a single div. But my effect only fires the first time. Are there any Fx.Morph wizards out there who could advise?
This is my class
var F = new Class({
Implements: [Options, Events],
myFX: null,
dDiv: null,
options: {
container: null,
width: '250px',
background: '#ccc'
},
initialize: function(options) {
this.setOptions(options);
this.addDemoDiv();
},
addDemoDiv: function() {
var dDiv = new Element('div', {
'class': 'myClass',
html: 'Click me!',
styles: {
padding: '20px',
border: '1px solid #999',
width: this.options.width,
background: this.options.background
},
events: {
click: this.animate.bind(this)
}
});
if (!this.container) {
this.dDiv = dDiv.inject(document.body);
} else {
this.dDiv = dDiv.inject(this.container);
}
this.myFx = new Fx.Morph(dDiv);
},
animate: function(e) {
this.dDiv.set('html', 'Hello world');
this.myFx.start({
height: 200,
width: 500,
link: 'cancel',
onComplete: function(){
this.dDiv.removeEvent('click', this.animate);
this.dDiv.addEvent('click', this.deanimate.bind(this));
}.bind(this)
});
},
deanimate: function(e) {
this.dDiv.set('html', 'Click me!');
this.myFx.start({
height: 20,
width: 250,
link: 'cancel',
onComplete: function() {
this.dDiv.removeEvent('click', this.deanimate);
this.dDiv.addEvent('click', this.animate.bind(this));
}.bind(this)
});
}
});
window.addEvent('domready', function() {
var item = new F({cntainer: 'container', background: '#ddd', width: '250px'});
});
I've tried quite a few things, including giving up on the Fx.Morph property and just calling .morph on the div with each click. This seemed to cause horrendous browser problems, maybe because it was creating a new Morph oject with each click and leaking memory.
The deanimate() method is definitely being called, because this.dDiv.set('html', 'Click me!'); is working. But the div won't shrink back. I've tried applying other effects, like background colour, but they're ignored too.
Does this mean an Fx.Morph object is destroyed after you run start()?
The onComplete handler of Fx.Morph also doesn't behave as you would expect. When I put a console.log in the onComplete of the animate() method, the log message gets displayed long before the animation's finished. So is onComplete just when the parsing of the script is complete?
Or is this just me being a chump? Any pointers gratefully received!
======================
Added later
I've been able to get around this problem by losing the Fx.Morph object and animating with .morph and a toggle variable, like this
animate: function(e) {
if (!this.anim) {
this.dDiv.set('html', 'Hello world');
this.dDiv.morph({
background: '#666',
width: 500,
height: 250
});
this.anim = true;
} else {
this.dDiv.set('html', 'Click me!');
this.dDiv.morph({
background: '#eee',
width: 250,
height: 100
});
this.anim = false;
}
}
But if anybody can shed any light on why the first version wasn't working I'd be very grateful!

this is an error in binding and removeEvent.
this.animate.bind(this) returns a function that is NOT the same as this.animate which you compare against when you removeEvent.
if you bind event callbacks that you need to remove, you should store them:
http://jsfiddle.net/yLhHG/ (incomplete but it does first shrink. read more:
basically:
this.boundEvents = {
click: this.animate.bind(this)
};
...
this.dDiv.removeEvent('click', this.boundEvents.click);
or:
this.dDiv.addEvent('click', this.boundEvent = this.animate.bind(this));
...
this.dDiv.removeEvent("click", this.boundEvent);
and finally:
you can totally rewrite this to have a single method but pass a different object. will update it in a moment.
there: http://jsfiddle.net/yLhHG/1/
var F = new Class({
Implements: [Options, Events],
myFX: null,
dDiv: null,
options: {
container: null,
width: '250px',
background: '#ccc',
fx: {
animate: {
props: {
height: 200,
width: 500
},
html: "hello world"
},
deanimate: {
props: {
height: 20,
width: 250
},
html: "bye world"
}
}
},
initialize: function(options) {
this.setOptions(options);
this.container = this.options.container || document.body;
this.addDemoDiv();
},
addDemoDiv: function() {
this.element = new Element('div', {
'class': 'myClass',
html: 'Click me!',
styles: {
padding: '20px',
border: '1px solid #999',
width: this.options.width,
background: this.options.background
},
events: {
click: this.animate.bind(this)
},
morph: {
link: "cancel",
onComplete: function() {
}.bind(this),
onStart: function() {
this.element.set("html", this.options.fx[this.action].html);
}.bind(this),
onCancel: function() {
//
}
}
}).inject(this.container);
},
animate: function(e) {
this.action = this.action == "animate" ? "deanimate" : "animate";
this.element.morph(this.options.fx[this.action].props);
}
});
new F({
cntainer: 'container',
background: '#ddd',
width: '250px'
});