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.
Related
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.
I am trying to use serverPaging with the Kendo UI grid. In order to pass the total pages. I am passing a model which consists of the data list, and the total count. My problem is that I can't figure out how to parse the model in the Kendo grid.
Here is my Controller code:
$scope.mainGridOptions = {
dataSource: {
transport: {
read: {
url: '/SSQV4/SSQV5/Search/GetSearch',
type: "GET"
}
},
schema: {
total: "Total"
},
pageSize: 25,
serverPaging: true
},
sortable: true,
pageable: true,
resizable: true,
columns: [{
field: "CompanyID",
title: "Company ID"
}, {
field: "CompanyName"
}, {
field: "City"
}, {
field: "State"
}, {
field: "Deficiencies"
}]
};
The data returned is a list ("results"), and the recordcount ("Total"). Normally, I would use a service to get the data and parse the two like below:
myService.GetSearch()
.success(function(data)){
$scope.myDataList = data.results;
$scope.myDataCount = data.Total;
})
I cannot figure out how to use "results" and "Total" in the Kendo Grid when it is returned by my web api.
Any assistance is greatly appreciated.
I figured this one out. I had to add "results" to the schema. This worked:
$scope.mainGridOptions = {
dataSource: {
transport: {
read: {
url: '/SSQV4/SSQV5/Search/GetSearch',
type: "GET"
}
},
schema: {
data: "results",
total: "Total"
},
pageSize: 25,
serverPaging: true
},
sortable: true,
pageable: true,
resizable: true,
columns: [{
field: "CompanyID",
title: "Company ID"
}, {
field: "CompanyName"
}, {
field: "City"
}, {
field: "State"
}, {
field: "Deficiencies"
}]
};
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.
I have single page application with KendoUI and AngularJs. I have two grid with two controllers. When I select first grid row (movie), I want to pass movieId to second controller and get actors for this movie.
Here my second controller:
myApp.controller("ActorsCtrl", function ($scope, $rootScope) {
$rootScope.$on("SetMovieId", function (event, movieId) {
alert(movieId);
$scope.movieId = movieId;
$scope.actorsGrid.dataSource.read();
$scope.actorsGrid.dataSource.refresh();
});
$scope.actorsGrid = {
dataSource: {
type: "application/json",
transport: {
read: {
url: "/Actors/GetActors",
data: { movieId: $scope.movieId }
}
},
pageSize: 5,
serverPaging: true,
serverSorting: true
},
sortable: true,
pageable: true,
dataBound: function () {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns: [{
field: "Name",
title: "Name",
width: "120px"
}, {
field: "BirthDate",
title: "Birth Date",
template: "#= kendo.toString(kendo.parseDate(BirthDate, 'yyyy-MM-dd'), 'MM/dd/yyyy') #",
width: "120px"
}]
};
});
Is this movieId adding correct?
How to refresh grid?
My example doesn't work :(
Kendo UI Datasource has event requestStart where you can pass parameters to request url.
var urlFormat = "/actors/{0}";
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/actors/",
dataType: "jsonp"
}
},
requestStart: function(e) {
e.options.url = kendo.format(urlFormat, movieId);
}
});
I want to implement inline editing in Kendo Angular Grid. My Grid HTML is as below in an angular view
<div kendo-grid="bankRegisterGrid" k-options="bankRegisterGridOptions" ></div>
My controller code is as
$scope.bankRegisterGridOptions = {
resizable: true,
dataSource: {
batch: true,
schema: {
model: {
id: "Id",
fields: {
Id: { type: "number", nullable: false },
ReferenceNo: { type: "string"},
AHead: { type: "string"},
Credit: { type: "number" },
Debit: { type: "number"},
ReconDescription: { type: "string"}
}
}
},
type: "json",
transport: {
read: "../Accounting/api/AccBankRegister/GetPaged",
update: {
url: "../Accounting/api/AccBankRegister/Update",
dataType: "json",
type: "Post"
},
destroy: {
url: "../Accounting/api/AccBankRegister/Update",
dataType: "json",
type: "Post"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
pageSize: 10
},
pageable: true,
columns: [{
field: "ReferenceNo",
title: "Ref. No",
type: "string",
width: "90px"
}, {
field: "AHead",
title: "Account Head",
type: "string",
width: "250px"
},
{
field: "Credit",
title: "Credit",
type: "number",
width: "90px"
},
{
field: "Debit",
title: "Debit",
type: "number",
width: "90px"
},
{
field: "Comments",
title: "ReconDescription",
type: "string",
width: "90px"
},
{ command: ["edit", "destroy"], title: " ", width: "130px" }],
editable: "inline"
};
Af first when the layout page open the url is xxx:2815/Accounting/Accounting#/ and when I click the BankRegister menu item the url is then xxx:2815/Accounting/Accounting#/BankRegister/. Now the grid open with data. When I click Edit button I see error in firebug:
'Error: Syntax error, unrecognized expression: unsupported pseudo: kendoFocusable .... jquery-1.9.0.js (line 4411, col 7)'.
In every row Edit Button click it comes. When I click cancel button in row it goes to home page and the url is xxx:2815/Accounting/Accounting#/. What is the problem?