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?
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 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 am using angular and Kendo ui Grid. I have a custom button on each row which i need it bound to a function that expand the detail view. Below is the grid options.
Please help
$scope.mainGridOptions = {
dataSource: financialYearsDataSource(),
sortable: true,
selectable: true,
columnMenu: true,
columns: [
{ field: "FinYearName", title: "Year Name", width: "150px" },
{field: "StartDate", title: "*Start Date", type: "date", format: "{0:dd-MM-yyyy}", width: "150px"},
{field: "EndDate", title: "*End Date", type: "date", format: "{0:dd-MM-yyyy}", width: "150px"},
{field: "Remarks", title: "*Remarks", editor: descriptionEditor, hidden:true},
{
command: [
{name: "edit"},
{name: "destroy"},
{
text: " Expand/Collapse",
click: $scope.expandToggle,
className: "fa fa-map-marker"
},
], title: " ", width: "300px"
}],
editable: {
mode: "popup"
},
pageable: {
pageable: true,
refresh: true
},
detailExpand: function (e) {
this.collapseRow(this.tbody.find(' > tr.k-master-row').not(e.masterRow));
}
};
Here is the toggle function that needs to do the toggling
$scope.expandToggle = function (e) {
e.preventDefault();
$scope.myGrid.expandRow($(this));
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));}
Here is a jsfiddle demo:http://jsfiddle.net/akimaina/ay3vv2cm/2/
I have updated your fiddle. Please check if this solves.
http://jsfiddle.net/ay3vv2cm/3/
$("#grid").on("click",".clsExpand", function(e){
$("#grid").data("kendoGrid").expandRow($(e.currentTarget).closest("tr"));
});
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.