I have following data-grid Definition:
<div ng-controller="testCtrl">
<div dx-data-grid="{ bindingOptions: { dataSource: 'model' },
paging: {
enabled: false
},
editing: {
editMode: 'row',
editEnabled: true,
removeEnabled: true,
insertEnabled: true
},
columns: [{
dataField: 'Name',
},
{
dataField: 'DateOfBirth',
dataType: 'date'
},
{
dataField: 'Note'
}],
onEditingStart:
function(e) {
alert('EditingStart');
},
onRowInserted:
function(e) {
alert('RowInserted');
}
}"></div>
</div>
But I get a syntax error.
How do I handle events with the angular approach?
I haven't found any code samples at the devextreme site.
You should not use the event handler directly in the markup. Put it to the controller:
$scope.editingStart = function(e){
alert("onEditingStart is fired");
}
Then, update the view:
<div dx-data-grid="{
<!-- data grid options... -->
onEditingStart: editingStart }
"></div>
I've created the sample here - http://jsbin.com/nijuvewure/edit?html,output
Related
I am using Kendo UI grid in angular js. Grid is displaying correctly.
but I want to hide a particular column based on user type.
I have tried like below, but its not working.
Here my angular controller code:
$scope.blogGridOptions = {
dataSource: {
pageSize: 10,
autoBind: false,
transport: {
read: function (e) {
$http.get('/Blog/GetAllBlogs')
.then(function success(response) {
if (response.data.success) {
e.success(response.data.blogs);
}
});
gridCallback = e;
}
}
},
sortable: true,
pageable: true,
resizable: true,
filterable: true,
columns: [{
field: "BlogTitle",
title: "Blog Title",
width: "300px",
filterable: false
}, {
field: "BlogContent",
title: "Blog Content",
width: "300px",
filterable: false
}, {
field: "ApprovalStatus.ApprovalStatus",
title: "Approval Status",
width: "300px",
filterable: false
}, {
field: "Actions",
width: "300px",
template: function (e) {
var str = '';
str = str + 'Edit';
str = str + ' | Delete';
return str;
},
filterable: false
}, {
hidden: function (e) { return e.userDetails.UserTypeId == 1 ? false : true; } ,
title: "Approve",
template: function (e) {
return '<button type="button" class="btn btn-success" ng-click="blog.approveBlogs(dataItem,2)"><i class="fa fa-check"></i></button> <button type="button" class="btn btn-danger" ng-click="blog.ignoreBlogs(dataItem,3)"><i class="fa fa-close "></i></button>';
}
}]
}
MVC View code:
<div kendo-grid="blogGrid" options="blogGridOptions" id="gridBlog"></div>
if usertypeid is 1, that column should show, for other users, it should be hidden.
PLease help to resolve this issue.
You can use hidecolumn in your dataBound event that is on the options of the grid. Not sure where you are getting the userTypeId from, but let's say it's bound to the controller and the column's name is 'approved'
dataBound: function(e) {
if(vm.userDetails.UserTypeId !== 1){
this.hideColumn('approved');
}
},
I have a angular directive which returns the kendo grid data source values (which is gridDataDisplayed). With the same data source, i have to bind it to a nested grid in detailInit.
scope.gridsource = new kendo.data.DataSource({
pageSize: options.pSize,
transport: {
read: function (options) {
scope.getDataMethod({ pageDetails: options }).then(function (gridDataDisplayed) {
options.success(gridDataDisplayed);
}, function (error) {
//error
});
}
},
detailInit: detailInitMethod
});
In the detailInitMethod i have the use the same data returned from service call and display only few columns from "gridDataDisplayed". How can i bind this to nested grid?
In my directive the template code is:
template: '<div><kendo-grid k-options="gridOptions" k-data-source="gridDataSource"></kendo-grid></div>',
Thanks in advance.
You can use the detail-template directive. Here is how:
<div ng-controller="MyCtrl">
<kendo-grid options="mainGridOptions" k-data-source="gridDataSource">
<div k-detail-template>
<div kendo-grid k-options="detailGridOptions"></div>
</div>
</kendo-grid>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.gridDataSource = {
type: "odata",
transport: {
read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
},
pageSize: 5,
serverPaging: true,
serverSorting: true
};
$scope.mainGridOptions = {
sortable: true,
pageable: true,
dataBound: function() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns: [{
field: "FirstName",
title: "First Name",
width: "120px"
},{
field: "LastName",
title: "Last Name",
width: "120px"
}]
};
$scope.detailGridOptions = {
scrollable: false,
sortable: true,
dataSource: $scope.gridDataSource,
pageable: true,
columns: [
{ field: "City", title:"City", width: "56px" },
{ field: "Address", title:"Address", width: "110px" }
]
};
});
</script>
And a live demo: http://dojo.telerik.com/#korchev/UFIqa
I added two extra columns in in kendo grid which have not data in datasource. I add two textboxes in these two columns using template.Now I want to push the values of these two columns into an angular array oncheckbox checked. I search alot about this in google and in stackoverflow. But did not find any relevant answer for my problem Here is the code for adding template in kendo grid
$scope.qualifySubGridColumns = [
{ template: "<input type='checkbox' class='subCheck checkbox' ng-click='getSelectedRow(dataItem)' />" },
{ field: "subList", template: "<input type='number' ng-minlength='0' ng-init='prefferedUser.subList=0'>", title: "SubList" },
{ field: "level", template: '<input type="number" ng-model="prefferedUser.level" ng-minlength="0" ng-init="prefferedUser.level=0">', title: "Level" },
{ field: "lastName", title: "Last Name" },
{ field: "firstName", title: "First Name" },
{ field: "email", title: "Email" },
{ field: "address1", title: "Address 1" },
{ field: "address2", title: "Address 2" },
{ field: "phone", title: "Phone" }
];
and here I want to fetch these columns. But I have no Idea How can i fetch sublist and level field values in selectedRow Array. Please Experts Help me
$scope.selectedRow = [];
$scope.getSelectedRow = function (data) {
$scope.selectedRow.push({ userId: data.substituteId});
// $scope.selectedRow.push({ userId: data.substituteId, sublist: sublist, level: level });
console.log("mydata", $scope.selectedRow);
};
I'm not sure familiar with anuglar, but I've done this in the past using just kendo.
Here is a simple grid I created with a checkbox on one column, and a text input on another column. The dataSource schema only has an id and a name property. But by adding the data bindings to the template input fields, those properties will be added to the dataSource data item.
<div id="grid"
data-role="grid"
data-columns="[{ field: 'id', title: 'Select', template: '<input type=\'checkbox\' data-bind=\'checked: selected\' />' },
{ field: 'name', title: 'Name' },
{ title: 'Age', template: '<input type=\'number\' data-bind=\'value: age\' />' }]"
data-bind="source: itemsDataSource">
</div>
Then if you dump the dataSource the grid is bound to (itemsDataSource in my instance), the items that you have changed the checkbox, or textbox will have those properties.
See sample running at JSBin
From there, you should be able to pull out the fields you want if the selected field is true etc.
I am not sure but it worked for me...
Html:
<body>
<div kendo-grid k-options="gridOptions" k-ng-delay="gridOptions" k-on-change="selected=data"></div>
</body>
<script id="RowId" type="text/x-kendo-template">
<tr>
<td><input ng-model="dataItem.Name"></td>
</tr>
</script>
Js:
$scope.Array= new kendo.data.ObservableArray([Object,Object]);
$scope.gridOptions = {
dataSource: new kendo.data.DataSource({
pageSize: 20,
data: $scope.Array,
autoSync: true,
schema: {
model: {
id: "Id",
}
}
}),
sortable: true,
resizable: true,
autoSync: true,
scrollable: true,
columns: [
{
field: "Name",
title: "Name",
editable: True,
},
],
rowTemplate: kendo.template($("#RowId").html()),
};
When you group with Kendo UI Grid and you're using a row template, you lose a column and they get misaligned from the header row. I've found a couple of solutions but they are all based on using jquery and not AngularJs.
Similar Question, but it's using jQuery vs Angular. kendo Grid grouping incompatibility with row template
I have the same bug as here as well: http://www.kendoui.com/forums/ui/grid/grid-grouping-problem-when-using-row-template-bug.aspx#1948937
The difference is I'm not using jQuery, I'm using Angular.
I have a kendo ui grid defined in html like this:
HTML
<div kendo-grid="vm.myTaskListGrid" k-options="vm.gridOptions"></div>
<script id="tmpl-myTask-list-row" type="text/x-kendo-tmpl">
<tr>
<td>#:projectName#</td>
<td>#:name#</td>
<td>#:statusName#</td>
<td>#:parentTaskName#</td>
<td>
#:plannedCompletedDate#
#:estimatedCompletedDate#
</td>
<td>
<button type="button" class="btn btn-blue btn-sm" data-ng-click="vm.edit(#:id#)"><i class="fa fa-edit" /></button>
</td>
</tr>
</script>
my controller is setup like this..
Angular Controller:
vm.gridOptions = {
dataSource: {
transport: {
read: getMyTaskList
},
group: { field: "projectName" },
pageSize: 25,
sort: {
field: 'firstname',
dir: 'asc'
}
},
sortable: true,
pageable: true,
groupable: true,
rowTemplate: kendo.template($('#tmpl-myTask-list-row').html()),
columns: [
{
title: 'Project Name',
field: 'projectName',
},
{
title: 'Name',
field: 'name'
},
{
title: 'Status',
field: 'statusName'
},
{
title: 'Dependent Task',
field: 'parentTaskName'
},
{
title: 'Dates'
},
{
title: ''
}]
};
function getMyTaskList(options) {
myTaskService.getMyTaskList(2, vm.showDone).then(function (response) {
options.success(response);
});
};
Angular Service:
Adding this by request, and note the grid works fine when I don't try and fix this issue with the #-- row template and the $.proxy lines.
function getMyTaskList(userId, showDone) {
return $http.get("/api/tasks/getMyTaskList?userId=" + userId + "&showDone=" + showDone);
}
I've tried adding the suggested
on the gird I added:
#= new Array(this.group().length + 1).join('<td class="k-group-cell"></td>') #
but I'm reading you have to add the $.proxy
$.proxy(kendo.template($('#tmpl-myTask-list-row').html()), getMyTaskList),
but the $.proxy on the controller doesn't seem work. If I had the #= new Array... code to the row template and don't include the $.proxy I get the error
TypeError: undefined is not a function
How do you get kendo ui grouping with angular working properly with row templates?
As I said, you need to
create the datasource first, via new kendo.data.DataSource,
set it as prop on the gridOptions and
bind it to the template instead of getMyTaskList
JS:
var dataSource = new kendo.data.DataSource({
transport: {
read: getMyTaskList
},
group: {
field: "projectName"
},
pageSize: 25,
sort: {
field: 'firstname',
dir: 'asc'
}
});
var t = $.proxy(kendo.template($('#tmpl-myTask-list-row').html()), dataSource);
vm.gridOptions = {
dataSource: dataSource,
sortable: true,
pageable: true,
groupable: true,
rowTemplate: t,
columns: [{
title: 'Project Name',
field: 'projectName',
}, {
title: 'Name',
field: 'name'
}, {
title: 'Status',
field: 'statusName'
}]
};
I've hooked up a DropDown editor inside a Grid column, and I've followed the Kendo example here :
http://demos.telerik.com/kendo-ui/grid/editing-custom
I actually do have the downdown editor working in Add/Edit mode, and with the DataSource binded to it. However, I can't figure out why the styling is all messed up.
As you can see in the below image, the dropdown is rendered but there is also an text box rendered just below it.
All appears to be styling fine in my plunker example, http://plnkr.co/edit/mxBYYerPLazQwctQkDjS?p=preview, but not in my real project code.
My HTML :
vm.userDimenGridOptions = { // Kendo grid - USER DIMENSIONS...
selectable: true,
sortable: true,
pageable: true,
columns: [
{ field: "id", width: "50px", hidden: true },
{ field: "dimension", width: "120px", editor: dimenDropDown, template: "#=dimension#" },
{ field: "hierarchy", width: "80px" },
{ template: '<button onclick="return up(\'#=uid#\')">up</button><button onclick="return down(\'#=uid#\')">down</button>' },
{ command: [{ name: "edit", text: '' }, { name: "destroy", text: '' }], width: 170 }
],
editable: "inline",
toolbar: ["create"],
messages: {
commands: {
cancel: "Cancel",
canceledit: "Cancel",
create: "dimension",
destroy: "Delete",
edit: "Edit",
save: "Save changes",
select: "Select",
update: "Update"
}
}
};
My angular controller code :
// SERVER-SIDE DIMENSIONS DATA SOURCE
vm.dimensionsDataSource = new kendo.data.DataSource({
transport: {
read: getDimensionsFromServer
}
});
function dimenDropDown(container, options) {
$('<input id="dimenDropDown" data-text-field="name" data-value-field="name" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoComboBox({
dataTextField: "name",
dataValueField: "name",
dataSource: vm.dimensionsDataSource
});
}
I also wanted to show an image of what the Insepect Elements looks lik in Chrome. Indeed some weird behavior here; see the SPAN inside the SPAN. And within each SPAN tag there's an INPUT tag.
Why two input tags ???
Take the Template off from the column and try. I'm not sure though
{ field: "dimension", width: "120px", editor: dimenDropDown }