I am facing one issue related to using the kendo grid with two buttons .If i click on the first button it should show three columns and if I click on the second button, it should show only two columns. But it doesn't seem to be working .My current example is :
Reference Link
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<button ng-click="execute1($event)">Execute 1</button>
<button ng-click="execute2($event)">Execute 2</button>
<div kendo-grid="grid" k-options="gridOptions" k-rebind="selectedType"></div>
</div>
</div>
You had a simple error
In both cases you are using dataModel1, you have to use "dataModel2" for gridOptions2
var gridOptions2 = {
dataSource: new kendo.data.DataSource({
data: new kendo.data.ObservableArray(dataModel2),
columns: [
{ field: "Id", title:"ID", width: "56px" },
{ field: "company", title:"company", width: "110px" },
{ field: "os", title:"os", width: "110px" }
]
})
Here is resolved:
http://plnkr.co/edit/Nie7eJVoPmt6xUpnmqnF?p=preview
EDIT:
Now I undestand the problem:
You have this:
var gridOptions1 = {
dataSource: new kendo.data.DataSource({
data: new kendo.data.ObservableArray(dataModel1),
columns: [
{ field: "Id", title:"ID", width: "56px" },
{ field: "company", title:"company", width: "110px" }
]
})
};
But the "columns" should be outside of the DataSource, like this:
var gridOptions1 = {
dataSource: new kendo.data.DataSource({
data: new kendo.data.ObservableArray(dataModel1),
}),
columns: [
{ field: "Id", title:"ID", width: "56px" },
{ field: "company", title:"company", width: "110px" }
]
};
Here is working:
http://plnkr.co/edit/qQ2IzHSyGM7SsZxE3BEI?p=preview
Related
I have a Kendo grid in html as follows:
<div
kendo-grid="grid"
k-options="gridOptions"
k-data-source="gridData"
k-selectable="true"
k-columns="gridColumns"
k-editable="editableOptions">
</div>
The Angular back end is:
$scope.gridData = new kendo.data.DataSource({
data: $scope.users, <-- the data binds correctly in the grid
editable: {
createAt: "bottom"
},
schema: {
model: {
id: "Id",
fields: {
Id: { type: "string", visible: true },
Name: { type: "string", editable: true }
}
}
},
sort: [
{ field: "Name", dir: "asc" }
],
pageSize: 15,
editable: true
});
$scope.gridOptions = {
};
$scope.gridColumns = [
{ field: 'Name', title: 'First Name', width: 60 },
{ field: 'Id', title: ' ', width: 120 },
{
command: ["destroy"],
title: " ",
width: "175px",
editable: "inline"
}
];
$scope.editableOptions = "inline";
So the User Data Load correctly with 5 rows, but there should be an extra row at the bottom for adding a new user via the line
editable: {
createAt: "bottom"
},
but this is not being created when the grid loads.
Also, they should be able to delete via the following command
{
command: ["destroy"],
title: " ",
width: "175px",
editable: "inline"
}
but this is also not being displayed.
What am I missing here?
make the row editable when clicking on the edit button:
Define editable once, like this:
editable: {
mode: "inline" ,
createAt: "bottom"
},
Your command:
{
command: ["edit","destroy"]
}
and also add toolbar for create:
toolbar: ["create"]
Here is a sample : Sample Dojo
make it editable once click in the cell:
editable:
editable: {
createAt: "bottom"
},
command:
{
command: ["destroy"]
}
toolbar:
toolbar: ["create", "save", "cancel"],
and also in your dataSource set batch: true
Here is a sample: Sample Dojo
I am using kendo grid and angularjs to make a table, I wanted the rows be reorderable by drag-and-drop and the cells (particularly the first column) be editable. It all worked out except if I click cells in another row after editing a cell, the change is lost. I can press the tab key or the enter key to make the changes but if I click it will fail. Here is the example:
CodePen example
angular.module("KendoDemos", ["kendo.directives"])
.controller("MyCtrl", function($scope, $compile) {
console.log("controller running.")
$scope.data = [{ id: "1", label: undefined, files: "file a" },{ id: "8", label: "", files: "file z" }, { id: "3", label: "item c", files: "file c" }, { id: "2", label: undefined, files: "file b" }];
$scope.mainGridOptions = {
dataSource: new kendo.data.DataSource({
autoSync: true,
data: $scope.data,
schema: {
model: {
id: "id"
}
}
}),
columns: [{
field: "label",
title: "Label",
width: "150px"
},
{
field: "id",
title: "ID",
editable: false,
width: "100px"
},
{
field: "files",
title: "Files",
editable: false
}
],
editable: true
};
$scope.sortableOptions = {
filter: ".k-grid tr[data-uid]:not(.k-grid-edit-row)",
hint: $.noop,
cursor: "move",
placeholder: function(element) {
return element
.clone()
.removeAttr("uid")
.addClass("k-state-hover")
.css("opacity", 0.65);
},
container: ".k-grid tbody",
change: function(e) {
var grid = $scope.ssgridcrda;
var dataItem = grid.dataSource.getByUid(e.item.data("uid"));
console.log("sorting ", dataItem);
grid.dataSource.remove(dataItem);
grid.dataSource.insert(e.newIndex, dataItem);
}
};
})
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'
}]
};