I am using Kendo Window in which I am showing Kendo TreeView with checboxes. The issue is that treeview renders correctly but checkboxes does not show. If I render treeview outside Kendo Window (i.e., directly in my page) then it showing checboxes correctly.
Please help as I am stuck. Below is the code that I use:
<div kendo-tree-view k-options="treeOptions" k-data-source="treeDataSource"></div>
$scope.treeOptions = {
checkboxes: {
checkChildren: true
}
};
This code seems to work fine:
<div kendo-window>
<div kendo-tree-view k-options="treeOptions" k-data-source="treeDataSource"></div>
</div>
<script>
angular.module("app", ["kendo.directives"]).controller("controller", function($scope) {
$scope.treeOptions = {
checkboxes: {
checkChildren: true
}
};
$scope.treeDataSource = [
{ text: "Furniture", expanded: true, items: [
{ text: "Tables & Chairs" },
{ text: "Sofas" },
{ text: "Occasional Furniture" }
] },
{ text: "Decor", items: [
{ text: "Bed Linen" },
{ text: "Curtains & Blinds" },
{ text: "Carpets" }
] }
];
});
</script>
Live demo: http://dojo.telerik.com/#korchev/INezO/2
Related
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 am trying to use custom editors for an editable kendo ui grid in my angular app.
For some reason( which I am not able to trace) the custom editor is not triggered.
I am expecting the following to be triggered but it does not work.
console.log("Editor Launched", options);
Here is the plunker for the same:
http://plnkr.co/edit/WioRbXA3LHVVRQD95nXA?p=preview
app.controller('MainCtrl', function($scope) {
$scope.model = {};
$scope.model.dataSource = new kendo.data.DataSource({
data: createRandomData(10),
schema: {
model: {
fields: {
City: { type: "string" },
Title: { type: "string" },
BirthDate: { type: "date" },
Age: { type: "number" }
}
}
},
pageSize: 16,
editable:true
});
$scope.addWWNumEditor= function (container, options) {
console.log("Editor Launched", options);
$('<input kendo-numeric-text-box k-min="10" k-max="20" style="width: 100%;" data-bind="value:' + options.field + '"/>')
.appendTo(container);
}
$scope.controlIsDisabled=function(model){
//console.log("model",(model.Age>=50));
var toReturn = (model.Age>50)?"columnDisabled" : "columnActive";
//console.log('to Return',toReturn);
return toReturn;
}
$scope.model.columns = [
{ field: 'City', title: 'City' },
{
field: 'Title',
title: 'Title',
template:'<span style="color:red;">EDITABLE</span><span ng-
class="controlIsDisabled(dataItem)">#=Title#</span>'
},
{
field: 'Age',
title: 'Age',
template:'<span ng-class="controlIsDisabled(dataItem)">#=Age#</span>'
,
editor:$scope.addWWNumEditor
}
];
});
Assuming your Plunkr mirrors your actual code, the primary problem I'm seeing is in your binding of k-columns on the grid element.
You currently have k-columns="{{model.columns}}", but the {{}} are unnecessary here. Changing to k-columns="model.columns" causes your editor function to execute as expected.
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.
I'm very new to angular , i know little basic of angular only.
I'm trying to integrate kendo ui grid in my view using angular component.
My Angular Component :
class GetAllPostController{
constructor(API, ToastService){
'ngInject';
this.API = API;
this.ToastService = ToastService;
}
submit(){
var data = {
name: this.name,
topic: this.topic
};
this.API.all('posts').post(data).then((response) => {
this.ToastService.show('Post added successfully');
});
}
test(){
alert('');
this.gridOptions = {
sortable: true,
selectable: true,
dataSource: [
{ text: "Foo", id: 1 },
{ text: "Bar", id: 2 },
{ text: "Baz", id: 3 }
],
columns: [
{ field: "text", title: "Text" }
]
};
}
}
export const GetAllPostComponent = {
templateUrl: './views/app/components/get_all_post/get_all_post.component.html',
controller: GetAllPostController,
controllerAs: 'vm',
bindings: {},
}
My View :
<div kendo-grid k-options="gridOptions" k-ng-delay="gridOptions" ng-init="vm.test()"></div>
But it's now working. Any one please help ?
And please explain how to use scope inside componenet and view?
I'm using Laravel Angular Material
suppose u going to implement kendo inside this div
<div ng-controller="myController">
</div>
The script part
<script>
angular.controller('myController',['$scope',function($scope){
$scope.results=[];
/* ajax request and result bind to the $scope.results array */
//here you implement kendo/what ever other framework
$scope.apply(function(){
//write kendo functions inside this apply service
kendo.gridOptions = {
sortable: true,
selectable: true,
dataSource: $scope.result,
columns: [
{ field: "text", title: "Text" }
]
};
})
}])
</script>
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/