Keno UI Grid With Angular and Batch Editing Issues - angularjs

I have a grid that is filled with data from the server when the controller is being initialized and the grid allow batch editing and i have a custom delete command that will mark the dataItem as MarkedAsDeleted. My requirements is:-
If i update any row in the grid, the corresponding item in the angular dataSource didn't get updated. How to do this??
If the user click the custom delete command , i want to mark the item to be MarkAsDeleted but i want that item to be hidden from the grid but still exists in the data source.
I want to handle changes in the grid, so i can mark the corresponding item to be updated for example.
This is my code:-
var dataSource = new kendo.data.DataSource({
data: this.jobCategory.minorCategories,
batch: true,
schema: {
model: {
id: "id",
fields: {
id: { editable: false, nullable: true },
name: { type: "string", validation: { required: true, pattern: '.{3,200}' } },
notes: { type: "string" }
}
}
}
});
this.gridOptions = {
toolbar: [{ name: "create", text: "Add a new minor category" }],
dataSource: dataSource,
autoBind: true,
height: 300,
editable: true,
sortable: true,
columns: [
{
field: "name",
title: "Name"
}, {
field: "notes",
title: "Notes"
},
{
command: [
{
text: "",
template: '<span class="k-button-icontext" ng-click="vm.test(dataItem)">Delete</span>'
}
]
}
]
};
test(dataItem): void {
dataItem.markAsDeleted = true;
}
and this is my html
<div kendo-grid="minorCategoriesGrid" k-options="vm.gridOptions">
</div>

Bulk edit is currently not available for Kendo UI grid (Angular 2). I'm hoping that it will be available with the major release that has been announce for January 18th.

Related

Why isnt the Kendo Grid inline editable?

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

Dynamic bind kendo grid dataSource binded to directive

I create dataSourec in the controller
$scope.dataSource = new kendo.data.DataSource({
transport: {
read: function (e) {
e.success(response.data.value);
}
},
serverFiltering: true,
serverSorting: true,
pageSize: 20,
schema: {
model: {
fields: {
languageId: { type: 'number', editable: true, nullable: false },
dateStart: { type: 'date', ediitable: true },
dateEnd: { type: 'date', ediitable: true },
count: { type: 'number', editable: true, nullable: false }
}
}
}
});
Then I bind it to my component
<div data-ng-if="!displayList">
<analytics-grid data-data-source="dataSource"></analytics-grid>
</div
where I add it to options of my grid
ctrl.gridOptions = {
dataSource: ctrl.dataSource,
sortable: true,
pageable: true,
columns: [{
field: "languageId",
title: "language",
width: "120px",
filterable: false,
values: _languagesLookupDS.data().toJSON()
}, {
field: "count",
title: "count"
}, {
field: "dateStart",
title: "dateStart"
}, {
field: "dateEnd",
title: "dateEnd"
}],
editable: {
mode: 'popup',
confirmation: true
},
messages: { commands: { create: "" } }
};
and then bind to kendo grid in the component view
<kendo-grid data-k-options="$ctrl.gridOptions" data-k-ng-delay="$ctrl.gridOptions" data-k-rebind="$ctrl.dataSource"></kendo-grid>
I show component view when someone switch the button(data-ng-if="!displayList" in code above). I have to switch button to displayList = true and then again to displayList = false, to update grid data, why it do not update dynamicly when dataSource change in my controller, and button is set to show kendoGrid?
I have resolved the problem by declare ctrl.gridOptions as function
ctrl.gridOptions = function () {
return {
dataSource: ctrl.dataSource,
sortable: true,
columns: [{
field: "languageId",
title: "language",
width: "120px",
filterable: false,
values: _languagesLookupDS.data().toJSON()
}, {
field: "count",
title: "count"
}, {
field: "dateStart",
title: "dateStart"
}, {
field: "dateEnd",
title: "dateEnd"
}]
};
}
and then bind it to the view
<kendo-grid data-k-scope-field="$ctrl.analyticsGrid" data-k-options="$ctrl.gridOptions()" data-k-rebind="$ctrl.dataSource"></kendo-grid>
My job mate told that problem occurred couse view was looking for object of options and don't know how to resolve it when dataSource change. Right now it just call method and get options with new dataSource.

Kendo UI Grid, Add Row Number in Template Angularjs

I want to bind kendo ui grid with custom checkbox template binding row index as checkbox Id like the following:
var record = 1;
$scope.mainGridOptions = {
dataSource: {
data: $scope.LockingList,
pageSize: 15
},
schema: {
// the data, which the data source will be bound to is in the "list" field of the response
data: "EmployeeList",
type: "json"
},
sortable: true,
filterable: {
extra: false,
operators: {
string: {
eq: "Is equal to",
neq: "Is not equal to"
}
}
},
pageable: true,
dataBound: function () {
this.expandRow(this.tbody.find("tr.k-master-row").first());
record = (this.dataSource.page() - 1) * this.dataSource.pageSize();
},
columns: [{
field: "EmployeeName",
title: "Employee Name",
},
{
template: "<input type='checkbox' id='#= ++record #' class='checkbox' ng-checked='dataItem.Locked' ng-click='LockByTask(dataItem)' /> <label for='#= ++record #'></label>",
title: "<input type='checkbox' id='header' title='Select all' ng-click='toggleSelectAll($event)' /><label for='header'></label>",
width: 60
}
],
editable: "popup"
};
I got record is not defined and can't bind row number.How to I do this? Thanks.

Kendo Unable to get property 'data' of undefined or null reference

I am using Kendo UI grid with Angular. I am trying to send grid updates to my MVC controller, but when I click the Update button in the grid I am receiving the error "Unable to get property 'data' of undefined or null reference"
Here is my Angular controller code for my grid:
$scope.gridOptions = {
dataSource: new kendo.data.DataSource({
transport: {
read: {
method: "GET",
url: "/SSQV4/SSQV5/Search/GetBusinessUnits"
},
update: {
method: "POST",
url: "/SSQV4/SSQV5/Operator/UpdateBusinessUnit"
}
},
schema: {
model: {
id: "ProductID",
fields: {
intOrder: { editable: false },
OperatorBusinessUnitID: { editable: false },
vchDescription: { editable: true },
vchOperatorSystemID: {editable: true}
}
}
},
sort: { field: "intOrder", dir: "asc" }
}),
batch: false,
reorderable: true,
sortable: false,
editable: "inline",
columns: [
{ template: '<i class="fa fa-chevron-circle-up" style="cursor:pointer" ng-click="MoveUp(#=OperatorBusinessUnitID#)"></i> <i class="fa fa-chevron-circle-down" ng-click="MoveDown(#=OperatorBusinessUnitID#)" style="cursor:pointer"></i>', title: "List Order", width:100 },
{ field: "intOrder", hidden: true},
{ field: "OperatorBusinessUnitID", title: "Business Unit ID" },
{ field: "vchDescription", title: "Business Unit Name" },
{ field: "vchOperatorSystemID", title: "Operator System ID"},
{
command: [
{ name: "edit", text: " " },
{ name: "destroy", text: " " },
], title: "Action"
}
]
};
Here is my MVC controller method:
public ActionResult UpdateBusinessUnit(OperatorBusinessUnitModel form)
{
CompanyClient.UpdateBusinessUnit(form);
var businessunits = CommonClient.GetBusinessUnitsByMajorID(UserInfo.intMajorID);
return Json(businessunits, JsonRequestBehavior.AllowGet);
}
There were two issues causing my problem here. First, the scheme had Product ID as the id, and it should have been OperatorBusinessUnitID. (That's what I get for copying examples.) The issue is that the UpdateBusinessUnit method in my MVC controller needed to be changed to a void rather than an ActionResult returning the entire recordset. It seems to be working correctly now.

angularjs kendo datasource data length zero

I'm trying to get my grid (created by angular directive) populated with data, but it is not populating.
Here's my grid declaration:
<div id="dayTypesGrid" kendo-grid k-options='dayTypesGridOptions'></div>
Here's code from my angular controller:
$scope.dayTypesGridOptions = {
schema: {
model: {
id: "description",
fields: {
description: { editable: false, nullable: false },
numberOfDays: { type: "number", validation: { required: true, min: 0} }
}
}
},
columns: [{
field: "description",
title: "Day Type"
}, {
field: "numberOfDays",
title: "Number of Days"
}]
};
So far so good. The grid is instantiated, and I see the two columns. And my angular controller executes my data fetch call, and I store the result in an array $scope.viewModel.dayTypes.
Using the browser dev tools, I can see that $scope.viewModel.dayTypes indeed contains the array of 7 records.
I now want to display those 7 records in the grid, and I do so as follows:
var ds = new kendo.data.DataSource({data: $scope.viewModel.dayTypes});
$('#dayTypesGrid').data('kendoGrid').dataSource = ds;
After that last line of code, my grid still remains empty. Using the browser dev tools, I see that ds.data.length is zero.
What am I missing?
What you're looking for is the setDataSource method:
$('#dayTypesGrid').data('kendoGrid').setDataSource(ds);
Here is how I do it in my project and this works for me. Your mileage may vary because you're using data instead of a transport URL, but I noticed the structure of your grid configuration is a bit different than mine. For example, I define the schema when I create my datasource:
var datasource = new kendo.data.DataSource({
transport: {
read: {
url: "url/to/my/service",
dataType: "json"
}
},
schema: {
data: "results"
}
};
var gridConfig: {
dataSource: dataSource,
rowTemplate: $templateCache.get("modules/reports/row.html"),
height: 500,
scrollable: true,
groupable: true,
filterable: true,
pageable: true,
reorderable: true,
sortable: true,
resizable: true,
"columns": [
{
"field": "status",
"title": "Status",
"width": 200
},
{
"field": "actions",
"title": "Actions",
"width": 200
}
]
}
};

Resources