I'm doing a POC for AngularJS and Kendo UI and I need to know how to save updated data on a kendo grid. I have inline editing enabled but can't hook into kendo UI to get the updated data. I created a fiddle (http://jsfiddle.net/aMz7V/14/) but can't get the jsfiddle to work (sorry this is my first time creating a fiddle), so I have pasted the code below:
JavaScript (controller code):
var myApp = angular.module('myApp', ['kendo.directives']);
myApp.controller("gridCtrl", function($scope) {
$scope.assignments = {};
$scope.assignments.dataSource = new kendo.data.DataSource({
data: [
{ StudentName: "John Smith", HomeWork: 9, HomeWork1: 12 },
{ StudentName: "Kodjo Adu", HomeWork: 5, HomeWork1: 15 },
{ StudentName: "Patrick smith", HomeWork: 10, HomeWork1: 19 },
{ StudentName: "Richard lomax", HomeWork: 8, HomeWork1: 18 },
{ StudentName: "Aglade Bone", HomeWork: 7, HomeWork1: 20 }
],
schema: {
model: {
fields: {
StudentName: { type: "string" },
HomeWork: { type: "number" },
HomeWork1: { type: "number" },
}
}
},
pageSize: 3,
});
$scope.assignments.columns = [
{ field: 'StudentName', title: 'Student Name' },
{ field: 'HomeWork', title: 'Home Work / 10' },
{ field: 'HomeWork1', title: 'Home Work / 20' }
];
});
HTML:
<div ng:app="myApp">
<div ng-controller='gridCtrl'>
<div kendo-grid k-data-source="assignments.dataSource" k-selectable="'row'"
k-pageable='{ "refresh": true, "pageSizes": true }'
k-columns='{{assignments.columns}}' k-sortable="true" k-editable="true" k-toolbar="['save','cancel']"></div>
</div>
</div>
So i figured it out, to handle to the save changes event i needed to do this
k-on-save-changes="saveChanges(kendoEvent)"
and just add the saveChanges function to the $scope in the controller.
Related
Hi I need to customize each column in highcharts stacked column
like this image
I this implementation i have given like this
{
categories:["6-7","7-8"]
series: [{
name: 'pass',
data: [5, 3, 4, 7, 2]
}, {
name: 'Fail',
data: [2, 2, 3, 2, 1]
}]
}
But now I need to change this implementation and i have to customize each column and add categories
how do i achieve this i'm having a array like this
[{"pass":2,"fail":3,"category":"6-7","percentage":"20%"}
{"pass":5,"fail":0,"category":"7-8","percentage":"10%"}]
i wanted like this
|percentage|
------------
| pass |
| fail |
-----------------
category
You need to preprocess your data to create series structure required by Highcharts. The 'category' label is achievable by using name property and 'percentage' by stack-labels formatter:
var data = [{
"pass": 2,
"fail": 3,
"category": "6-7",
"percentage": "20%"
}, {
"pass": 5,
"fail": 0,
"category": "7-8",
"percentage": "10%"
}];
var series = [{
name: 'Pass',
data: []
}, {
name: 'Fail',
data: []
}];
data.forEach(function(dataObj) {
series[0].data.push({
y: dataObj.pass,
name: dataObj.category,
percentage: dataObj.percentage
});
series[1].data.push({
y: dataObj.fail,
name: dataObj.category
});
});
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
type: 'category'
},
yAxis: {
stackLabels: {
enabled: true,
formatter: function() {
return this.axis.series[0].options.data[this.x].percentage;
}
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: series
});
Live demo: http://jsfiddle.net/BlackLabel/nfbq2soe/
API Reference: https://api.highcharts.com/highcharts/yAxis.stackLabels.formatter
I am using highstock,5.0.10 with angularJS.
In my chart navigator got displayed twice, like below
As you can see, navigator has been rendered twice. However, if you refresh the page, everything looks fine.
Any ideas?
I have added my Highstock code here.
Highcharts.stockChart('FindComputerUsage', {
rangeSelector: {
selected: 1
},
credits: {
enabled: false
},
title: {
text: ''
},
yAxis: {
title: {
text: 'Percentage of time (%) '
}
},
tooltip: {
formatter: function() {
var date = new Date(requiredData[this.points[0].point.index][0]);
return date + '<br>' + 'Percentage:' + requiredData[this.points[0].point.index][1] + '%';
}
},
series: [{
name: 'Percentage (%)',
data: requiredData,
tooltip: {
valueDecimals: 2,
}
}],
lang :{
noData : "No data to display "
}
});
Here you can see a working example: https://plnkr.co/edit/OphM9wf8WyGm8U6HXfTy
You haven't show your HTML view, but I guess it's similar to this.
<div ng-controller="demoCtrl">
<div id="container" style="height: 400px; min-width: 310px"></div>
</div>
Concerning controller scope, I didn't change anything:
var app = angular.module('demoApp', []);
app.controller('demoCtrl', function($scope){
$scope.data = [
[1290729600000,45.00],
[1290988800000,45.27],
[1291075200000,44.45]
];
Highcharts.stockChart('container', {
rangeSelector: {
selected: 1
},
title: {
text: 'Qing Xu Example'
},
series: [{
name: 'Value',
data: $scope.data,
tooltip: {
valueDecimals: 2
}
}]
})
});
I have a requirement to toggle between the view in kendo UI scheduler, my view will be week but on checkbox click i want to change week view type between week and workWeek; how to do this?
Here is html
<label><input type="checkbox" ng-model="hideWeekend" ng-change="hideWeekends(hideWeekend);" value="true" />Hide Weekend</label>
<div id="team-schedule">
<div kendo-tooltip k-content="tooltipContent" k-filter="'.k-event'" class="k-group">
<div id="target"></div>
<div kendo-scheduler="weeklyScheduler" k-options="weeklySchedulerOptions" id="scheduler"></div>
</div>
</div>
JS code
$scope.schedulerDS = new kendo.data.SchedulerDataSource({
batch: true,
filter: {
logic: "or",
filters: [
{ field: "ownerId", operator: "eq", value: 1 },
{ field: "ownerId", operator: "eq", value: 2 }
]
}
});
var weekOrWorkWeek = 'workWeek';
$scope.loadWeeklySchedule = function (value) {
$scope.weeklySchedulerOptions = {
autoBind: false,
date: new Date(),
height: 600,
views: [{ type: value, selected: true, majorTick: 15, footer: false, allDaySlot: false }],
timezone: "Etc/UTC",
dataSource: $scope.schedulerDS,
resources: [
{
field: "ownerId",
title: "Owner",
dataSource: [
{ text: "Alex", value: 1, color: "#f8a398" },
{ text: "Bob", value: 2, color: "#51a0ed" },
{ text: "Charlie", value: 3, color: "#56ca85" }
]
}
]
};
};
$scope.hideWeekends = function (value) {
if (value == true) {
weekOrWorkWeek = 'workWeek';
$scope.loadWeeklySchedule(weekOrWorkWeek);
$scope.weeklySchedulerOptions.dataSource.read();
} else {
weekOrWorkWeek = 'week';
$scope.loadWeeklySchedule(weekOrWorkWeek);
$scope.weeklySchedulerOptions.dataSource.read();
}
};
$scope.loadWeeklySchedule(weekOrWorkWeek);
You can enable this view by adding the view type "workWeek" to the views array of the scheduler options object from the get go.
This will also show a view selection on the scheduler top toolbar but you can remove it by adding a CSS rule:
.k-scheduler-views {
display: none;
}
Switching between views can be done using the scheduler's view method:
$("#scheduler").data("kendoScheduler").view("ViewName")
Here's a Plunker with a demo.
My controller code looks like
$scope.items = [{
heading: 'Sports',
types: [{
name: 'Football',
}, {
name: 'Persie',
}, {
name: 'Ronaldo',
}, {
name: 'Messy',
}],
id: '1'
}, {
heading: 'Cricket',
types: [{
name: 'Tendulkar',
}, {
name: 'Lara',
}, {
name: 'Ponting',
}],
id: '2'
}];
My view contains something like this :
How can I get the selected values of options when user clicks submit button
Here is the jsfiddle
I used ng-repeat to build the select and ng-options to fill them, you then have to use the relative ng-model to get the selections.
HTML:
<div ng-app ng-controller="MyCtrl">
<select class="select fancy" ng-repeat="(i, item) in items" ng-model="searchOption[i]" ng-options="type.name for type in item.types"></select>
<button ng-click="submitIt()">Submit</button>
</div>
Javascript:
function MyCtrl($scope) {
$scope.submitIt = function () {
console.log($scope.searchOption);
};
$scope.searchOption = [];
$scope.items = [{
heading: 'Sports',
types: [{
name: 'Football',
}, {
name: 'Persie',
}, {
name: 'Ronaldo',
}, {
name: 'Messy',
}],
id: '1'
}, {
heading: 'Cricket',
types: [{
name: 'Tendulkar',
}, {
name: 'Lara',
}, {
name: 'Ponting',
}],
id: '2'
}];
}
I am trying to render charts using the Highcharts js-library. As I am working with AngularJS, I am using an AngularJS directive for HighCharts.
I made everything work fine but due to some weird reason, I am unable to change the yAxis label value.
I get the default value "Values" shown on the chart's y-axis, which I checked is defined in the highcharts.js file under "defaultYAxisOptions".
Html:
<div ng-app="myapp">
<div ng-controller="myctrl">
<highchart id="chart1" config="chart"></highchart>
</div>
</div>
Javascript:
var myapp = angular.module('myapp', ["highcharts-ng"]);
myapp.controller('myctrl', function ($scope) {
$scope.chart = {
options: {
chart: {
type: 'bar'
}
},
xAxis: {
title: {
text: 'x-axix-label'
}
},
yAxis: {
title: {
text: 'y-axix-label'
}
},
series: [{
data: [10, 15, 12, 8, 7]
}],
title: {
text: 'Hello'
},
loading: false
}
});
Sample implementation: http://jsfiddle.net/VwTCn/9/
Can someone please point out the mistake here.
Took me a while, to understand, that highcharts-ng doesn't work, using the original highcharts options structure.
Anyway, for some reason it works, if you put you yAxis config into the options object, like this:
...
options: {
chart: {
type: 'bar'
},
yAxis: {
title: {
text: 'y-axis label'
}
}
},
xAxis: {
title: {
text: 'x-axis label'
}
},
series: [{
...
See example: http://jsfiddle.net/martinczerwi/VwTCn/13/