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>
Related
I have read several similar questions but none worked for me on this issue. I am using laravel-datatable with angular js. But 'ng-click' does not work with the dynamically generated datatable buttons. I read about $compile but dont know how to implement it with the table. Am very new to angular js.
When I click on the button nothing happens.
app.controller('myController', ['$scope','$compile', function($scope, $compile) {
$('#stafftbl').DataTable( {
paging: true,
"ordering": true,
"searching": true,
"bInfo" : true,
deferRender: true,
ajax: 'get_staffsalary',
columns: [
{ data: 'staff_num', name: 'staff_num'},
{ data: 'staffname ', name: 'staffname' },
{ data: 'salary', name: 'salary' },
{ data: 'date_effected', name: 'date_effected' },
{ data: 'updated_at', name: 'updated_at' },
{ data: null, render: function (data, type, full) {
return '<button class="btn btn-xs btn-primary" ng-click="update('+full.id+')">Update Salary</button> ';
}},
],
});
$scope.update= function (id) {
alert(id)
}
}]);
Please any help with this?
Yes, you are correct in that you need to use $compile.
After dynamically adding html with angular attributes in it, like you are with your data table, you must call $compile so that angular can pick up the attributes.
You'll need to inject the $compile service into your controller right after $scope. Then, after the HTML has been added you will need to compile the new DOM and link it to the scope by calling $compile(new_html)($scope) in the context of your controller.
Refer to the $compile doco for reference
I solved it using #MJL 's answer. Here is the full block of code, it may hep someone else
app.controller('myCtrl', ['$scope','$compile', function($scope, $compile) {
var table = $('#stafftbl').DataTable( {
processing: false,
serverSide: false,
deferRender: true,
ajax: 'get_staffsalary',
columns: [
{ data: 'staff_num', name: 'staff_num'},
{ data: 'salary', name: 'salary' },
{ data: 'date_effected', name: 'date_effected' },
{ data: 'updated_at', name: 'updated_at' },
{ data: null, render: function (data, type, full) {
return '<button class="btn btn-xs btn-primary text-size-small" ng-click="clickme()>Update</button> ';
}},
],
"createdRow": function ( row, data, index ) {
$compile(row)($scope); //add this to compile the DOM
}
})
$scope.clickme = function () {
alert('clicked me')
}
}]);
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 attempt to do simple task using KendoUI grid for AngularJS in asp.new mvc application. It is binding data to grid from mvc controller.
asp.net mvc controller method:
public ActionResult GetCdcReport()
{
var testJson =
#"{ProductID:'1',ProductName:'Chai',UnitPrice:'18',UnitsInStock:'39',Discontinued:'false'}";
var json = JObject.Parse(testJson);
return new JSONNetResult(json);
}
angularjs service function:
function getImportResultReport() {
return httpPost('getCdcReport');
}
code from component for data binding:
$scope.mainGridOptions = {
columns: [
{ field: "ProductID", title: "ID" },
{ field: "ProductName", title: "Product Name" },
{ command: [{ template: "<button class='k-button' ng-click='showDetails(dataItem)'>Show details</button>" }] },
],
pageable: true,
dataSource: {
pageSize: 5,
transport: {
read: function (e) {
dataservice.getImportResultReport().
success(function (data) {
e.success(data);
}).
error(function (data, status) {
alert('something went wrong');
console.log(status);
});
}
}
}
};
I see that server method is called but in console i get following client error:
dataservice.getImportResultReport(...).success is not a function
In similar question i read that:
The $http legacy promise methods success and error have been
deprecated. Use the standard then method instead.
i replace binding code on:
$scope.mainGridOptions = {
columns: [
{ field: "ProductID", title: "ID" },
{ field: "ProductName", title: "Product Name" },
{ command: [{ template: "<button class='k-button' ng-click='showDetails(dataItem)'>Show details</button>" }] },
],
pageable: true,
dataSource: {
pageSize: 5,
transport: {
read: function (e) {
dataservice.getImportResultReport().
then(function (data) {
return data;
});
}
}
}
};
After that I don't receive this error but grid stay without data.
Also i attempted do it like:
vm.mainGridOptions = {
columns: [
{ field: "ProductID", title: "ID" },
{ field: "ProductName", title: "Product Name" },
{ command: [{ template: "<button class='k-button' ng-click='showDetails(dataItem)'>Show details</button>" }] },
],
pageable: true
};
$scope.mainGridOptions.DataSource = dataservice.getImportResultReport();
it is also not work.
What i'm doing wrong?
It is example from telerik site. If in binding logic replase dataservice.getImportResultReport() on $http.jsonp('URL FROM EXAMPLE') then it is work.
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
I am learning AngularJS and trying to use the Telerik KendoGrid in a directive. I have a directive that that will access a service and get some data. Part of the data will be used to populate an observable array in the directive. The html that is associated to that directive has another directive within it that will create a kendoGrid that should be editable. When I click on the update button I get an undefined error and the grid data disappears.
I define my array as follows:
$scope.currentData.event.submissionDates = new kendo.data.ObservableArray([
]);
and on success of call push the data into the array.
the grid is called as follows in the html:
<submission-grid class="grid-16" event="currentData.event" ng-show="currentData.event.eventID"></submission-grid>
This directive calls the following html file:
<div kendo-grid="grid"
k-columns="gridColumns"
k-selectable="true"
k-on-change="selected = data"
k-options ="mainGridOptions "
k-editable ="{'mode': 'inline', 'update': 'true'}"
and the backing js is:
(function () {
angular.module('app.submissionGrid', [])
.directive('submissionGrid', function () {
var ctrlr = function ($scope) {
$scope.gridColumns = [{
field: "SubmissionDueDate",
title: "Due Date",
format: "{0:MM/dd/yyyy}",
width: "100px"
}, {
field: "Source",
title: "Agency",
width: "100px"
}, {
field: "SubmissionFiledDate",
title: "Filed Date",
format: "{0:MM/dd/yyyy}",
width: "100px"
}, {
field: "SeverityCategory",
title: "Severity Category",
width: "100px"
}, { command: ["edit", ], title: " ", width: "200px" }
];
$scope.mainGridOptions = {
dataSource: {
data: $scope.event.submissionDates,
schema: {
model: {
id: "ReportId",
fields: {
SubmissionDueDate: { type: "string" },
Source: { type: "string" },
SubmissionFiledDate: { type: "string" },
SeverityCategory: { type: "string" }
}
}
},
}
}
}
return {
restrict: 'E',
templateUrl: 'App/Event/SubmissionGrid/submissionGrid.html',
controller: ctrlr,
transclude: false,
scope: {
event: '='
}
};
})
})();
Any advice would be appreciated.