I have a kendo grid with a custom popup editor. I have defined the edit body as a kendo template using mvvm binding, but I think I must be missing something because the behaviour of the popup is not as expected.
When clicking Edit, the popup editor appears, but if I close the popup using the cancel button, then click Edit on the same row again, the editor does not appear.
In addition, changes do not seem to be occurring as expected for the field using the dropdown measureStatusId, unless it is not null to begin with.
I would prefer to use mvvm here, I don't think this scenario is unusual enough to need to roll my own edit pop up?
See this JSBin.
var model = {
"title": "Active Community",
"measures": [
{
"measureId": 3,
"completed": false,
"measureStatusId": null,
"measureStatus": null,
"progress": null,
"target": "Council provides a wide range of accessible and well-maintained sports facilities to increase levels of participation in sport and active recreation"
},
{
"measureId": 4,
"completed": false,
"measureStatusId": null,
"measureStatus": null,
"progress": null,
"target": "Council funds and works in partnership with external recreation organisations to help increase levels of participation in sport and active recreation"
}
],
"measureStatuses": [
{
"text": "Green",
"value": "1",
"selected": false
},
{
"text": "Orange",
"value": "2",
"selected": false
},
{
"text": "Red",
"value": "6",
"selected": false
}
]
},
PNCC = {};
$(document).ready(function () {
PNCC.viewModel = new kendo.observable(model);
$("#Measures").kendoGrid({
dataSource: {
data: PNCC.viewModel.measures,
schema: {
model: {
id: "measureId",
fields: {
measureId: { type: "number", editable: false },
target: { type: "string", editable: false },
completed: { type: "boolean" },
measureStatusId: { type: "string" },
measureStatus: { type: "string" },
progress: { type: "string" }
}
}
},
sort: { field: "target", dir: "asc" }
},
"columns": [
{
"title": "Performance Measures & Targets",
"field": "target"
},
{
"title": "Year to date progress and next steps",
"field": "progress"
},
{
"title": "Status",
"field": "measureStatus"
},
{
"title": "Complete?",
"field": "completed"
},
{ command: ["edit"], title: " " }
],
"filterable": false,
"scrollable": true,
editable: {
mode: "popup",
template: kendo.template($("#popup_editor").html())
}
});
});
I think the problem is with the observable object you created for your datasource
Please check this Jsbin
PNCC.viewModel = new kendo.observable(model);
$("#Measures").kendoGrid({
dataSource: {
data: model.measures,
schema: {
model: {
id: "measureId",
fields: {
measureId: { type: "number", editable: false },
target: { type: "string", editable: false },
completed: { type: "boolean" },
measureStatusId: { type: "string" },
measureStatus: { type: "string" },
progress: { type: "string" }
}
}
},
sort: { field: "target", dir: "asc" }
},
"columns": [
{
"title": "Performance Measures & Targets",
"field": "target",
width: "150px"
},
{
"title": "Year to date progress and next steps",
"field": "progress",
width: "150px"
},
{
"title": "Status",
"field": "measureStatus",
width: "150px"
},
{
"title": "Complete?",
"field": "completed",
width: "150px"
},
{ command: ["edit"], title: " ", width: "75px" }
],
filterable: false,
scrollable: true,
editable: {
mode: "popup",
template: kendo.template($("#popup_editor").html())
}
});
Some changes:
Make measureStatusId be a number in model and the grid schema.
Change the grid status column from measureStatus to measureStatusId
Alter the html declaration of the dropdown to include data-value-primitive="true"
Change the observable to include measures as a datasource, and update the grid declaration to use that directly, rather than create a new datasource.
I think the critical change here was to make both the grid and the popup refer to a single object, rather than two separate objects. The rest of the issues seem to stem from mismatching datatype configuration.
The change to the observable object is shown below.
PNCC.viewModel = new kendo.observable({
measures: new kendo.data.DataSource({
data: model.measures,
schema: {
model: {
id: "measureId",
fields: {
measureId: { type: "number", editable: false },
target: { type: "string", editable: false },
measureStatusId: { type: "number" },
progress: { type: "string" }
}
}
},
sort: { field: "target", dir: "asc" }
}),
measureStatuses: model.measureStatuses
});
Related
I have defined a Kendo grid as follows:
$(document).ready(function() {
$("#catalogGrid2").kendoGrid(catalogGridOptions);
});
let catalogGridOptions = {
pageable: true,
dataSource: {
serverPaging: true,
//serverGrouping: true,
transport: {
read: {
url: "/gliese/read",
type: "GET",
contentType: "application/json"
}
},
//pageSize: 25,
schema: {
data: "data",
total: "total",
// total: function(response) {
// return response.total;
// },
model: {
id: "catalogID",
fields: {
id: {type: "number"},
name: {type: "string"},
component: {type: "string"}
}
}
},
},
pageable: {
pageSize: 25,
//pageSizes: true,
//pageSizes: [10,25,50,100,"all"],
//input: true,
numeric: true,
refresh: true
},
columns: [
{
field: "id",
hidden: true
},
{
field: "name",
title: "Name",
width: 150
},
{
field: "component",
title: "Component",
width: 75
}
],
};
The data displays correctly in the grid, but there are no pages to navigate through, and the message "No items to display" is in the pager bar as well.
Below is an example of the results being returned:
{
"total": 3803,
"pageSize": 25,
"data": [
{
"id": 12409,
"name": "Sun",
"component": "",
"ra": "00 02 33.8",
"dec": "+00 16 42",
"properMotion": null,
"properMotionDir": null,
"radialVelocity": null,
"spectralTypeFull": "G2 V",
"spectralType": "G",
"spectralTypeSub": "2",
"luminosityClass": "V",
"visualMagnitude": -26.72,
"absoluteMagnitude": 4.85,
"parallax": null,
"bvColor": 0.65,
"hd": null
},
// 24 more results
]
}
Does anyone see any obvious reasons why the pager bar does not work?
EDIT: Added screenshot per request, updated code to newest attempt.
I am very new to NVC working on an existing solution. We are using a dxDataGrid, and I am trying to add a column with custom buttons. I am using the following documentation as reference:
https://js.devexpress.com/Documentation/ApiReference/UI_Widgets/dxDataGrid/Configuration/columns/buttons/
and
https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/CommandColumnCustomization/jQuery/Light/
The existing implementation of the grid is as follows:
$(function () {
$("#branchDataGrid")
.dxDataGrid({
dataSource: {
store: dxMvcStore({
key: "ID",
})
},
showBorders: true,
noDataText: "No Branch Selected",
editing: {
mode: "batch",
allowAdding: false,
allowUpdating: true,
allowDeleting: true
},
paging: { enabled: true, pageSize: 10 },
showRowLines: true,
sorting: { mode: "none" },
columns: [
{
dataField: "Name",
caption: "Branch/Division Name",
validationRules: [{ type: "required" }]
},
{
dataField: "Code",
caption: "Code",
validationRules: [{ type: "required" }]
},
{
dataField: "ExternalCode",
caption: "External Code",
validationRules: [{ type: "required" }]
},
{
dataField: "OrderExchangeabilityTimeoutDays",
caption: "Return Window (days)",
dataType: "number",
editorOptions: {
format: "#",
min: 1,
},
},
{
dataField: "CollectionRequestMonthlyLimit",
caption: "Monthly Collection Limit",
dataType: "number",
editorOptions: {
format: "#",
min: 1,
},
validationRules: [{ type: "required" }]
},
],
onInitialized: e => {
self.companiesNodeDataGrid = e.component as DevExpress.ui.dxDataGrid;
},
onRowExpanding: e => {
// Only show one detail view at a time.
self.companiesNodeDataGrid.collapseAll(-1);
},
onRowInserting: e => {
// self.saveCompanyResult(e, true);
},
onRowUpdating: e => {
// self.saveCompanyResult(e, false);
}
}).dxDataGrid("instance");
});
I am trying to add my column with the buttons as shown in the documentation. Here is a snippet:
columns: [
{
type: "buttons",
buttons: [{
name: "save",
cssClass: "my-class"
}]
},
{
dataField: "Name",
caption: "Branch/Division Name",
validationRules: [{ type: "required" }]
},
{
dataField: "Code",
caption: "Code",
validationRules: [{ type: "required" }]
},
{
dataField: "ExternalCode",
caption: "External Code",
validationRules: [{ type: "required" }]
},
{
dataField: "OrderExchangeabilityTimeoutDays",
caption: "Return Window (days)",
dataType: "number",
editorOptions: {
format: "#",
min: 1,
},
},
{
dataField: "CollectionRequestMonthlyLimit",
caption: "Monthly Collection Limit",
dataType: "number",
editorOptions: {
format: "#",
min: 1,
},
validationRules: [{ type: "required" }]
},
]
The problem is that I am getting a compiler error in the line where it says "type: "buttons". Please see the below screenshot for reference:
I have done some searching but cannot seem to find any posts with similar issues. If anyone might have some advice for me where to look for a solution, or point out what I am doing wrong, I would be very grateful.
I have managed to continue using a different approach of adding custom markup to a column, as shown in the below link:
https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/CellCustomization/jQuery/Light/
I have a JSON dataSource that looks like this:
var productDataSource = new kendo.data.DataSource({
transport: {
read: {
url: 'http://...',
dataType: "json"
}
},
pageSize: 10
});
And returns something like this:
{
"ProdSet1":[
{
"Name": "Product 1-1",
"Price": 20,
"Quantity": 50,
"Change": 4
},
{
"Name": "Product 1-2",
"Price": 14,
"Quantity": 74,
"Change": 5
}
],
"ProdSet2":[
{
"Name": "Product 2-1",
"Price": 15,
"Quantity": 12,
"Change": 2
}
]
}
Then I have multiple grids that use this one dataSource:
$("#prodSet1").kendoGrid({
dataSource: productDataSource,
columns: [
{ field: "ProdSet1[0].Name", title: "Name" },
{ field: "ProdSet1[0].Price", title: "Price" },
{ field: "ProdSet1[0].Quantity", title: "Quantity" },
{ field: "ProdSet1[0].Change", title: "Change" }
]
});
$("#prodSet2").kendoGrid({
dataSource: productDataSource,
columns: [
{ field: "ProdSet2[0].Name", title: "Name" },
{ field: "ProdSet2[0].Price", title: "Price" },
{ field: "ProdSet2[0].Quantity", title: "Quantity" },
{ field: "ProdSet2[0].Change", title: "Change" }
]
});
But doing { field: "ProdSet1[0].Name" ...} isn't working.
How can I reference the correct product data?
Since the collections are named in the return object, you can set the schema.data property to each ProdSet, and bind a grid to it.
I would manually fetch the data from the datasource, with a datasource.read()
var datafromService = productDataSource.read();
Documentation... http://docs.telerik.com/kendo-ui/documentation/api/framework/datasource#methods-read
Then bind each grid to that datafromService, with each specifying the collection inside the JSON object to bind to.
$("#prodSet1").kendoGrid({
dataSource: {
data: datafromService,
schema: {
data: 'ProdSet1'
}
},
columns: [
{ field: "Name", title: "Name" },
{ field: "Price", title: "Price" },
{ field: "Quantity", title: "Quantity" },
{ field: "Change", title: "Change" }
]
});
and
$("#prodSet2").kendoGrid({
dataSource: {
data: datafromService,
schema: {
data: 'ProdSet2'
}
},
columns: [
{ field: "Name", title: "Name" },
{ field: "Price", title: "Price" },
{ field: "Quantity", title: "Quantity" },
{ field: "Change", title: "Change" }
]
});
Now they will be bound to the same set of data, just displaying different collections from the JSON data.
See sample... http://jsbin.com/dokub/1/edit
If you are needing full CRUD operations, that gets into another bag of cats.
I have been struggling with this issue and hit a roadblock. I have a kendo grid that has a dropdownlist.
Problem
When i edit a record by selecting a value in the DropdownList, the
field is not updated.
When i select the Add Command from the toolbar, a different
template tries to render and raises the error "Uncaught ReferenceError:
ParentMenu is not defined" in Chrome debugs. So nothing happens consequently.
When i comment out "values: parentRef" from the kendogrid columns definition all commands[Add,Edit] display properly
I have demonstrated the error i am experiencing here http://jsfiddle.net/BlowMan/5tNQy/
JS Code
$(function () {
var mbModel = kendo.data.Model.define({
id: "MenuId",
fields: {
"MenuId": {
type: "number"
},
"DisplayText": {
type: "string"
},
"MenuOrder": {
type: "number"
},
"MenuStatus": {
type: "boolean"
},
"HasKids": {
type: "boolean"
},
"ParentMenu": {
type: "number",
defaultValue: 1
}
}
});
var mbDataSource = new kendo.data.DataSource({
data: [{
"MenuId": 1,
"DisplayText": "Home",
"MenuOrder": 0,
"MenuStatus": true,
"HasKids": false,
"ParentMenu": null
}, {
"MenuId": 2,
"DisplayText": "Finance",
"MenuOrder": 1,
"MenuStatus": true,
"HasKids": false,
"ParentMenu": null
}]
});
var parentRef = [{
"value": 1,
"text": "Finance"
}, {
"value": 2,
"text": "Corp. Services"
}];
$("#menuBuilder1").kendoGrid({
columns: [{
field: "MenuId",
title: "Menu",
editable: true
}, {
field: "DisplayText",
title: "Name",
editable: true
}, {
field: "MenuOrder",
title: "Order",
editable: true
}, {
field: "MenuStatus",
title: "MenuStatus",
editable: true
}, {
field: "HasKids",
title: "Depends",
editable: true
}, {
field: "ParentMenu",
title: "ParentMenu",
values: parentRef
}, {
title: "Action",
command: ["edit"]
}],
toolbar: ["create"],
editable: "popup",
schema: {
model: mbModel
}
});
var mbObject = new kendo.data.ObservableObject({
data: mbDataSource,
//parentRef:[]
});
kendo.bind($("#menuBuilder1"), mbObject);
mbDataSource.bind("change", function (e) {
});
var grid = $("#menuBuilder1").data("kendoGrid");
grid.bind("save", function (e) {
var that = this;
that.refresh();
});
grid.bind("edit", function (e) {
});
$.ajax({
url: "/MenuBuilder/GetMenuWithKids",
dataType: "json",
type: "GET",
success: function (ret) {
mbObject.set("parentRef", ret);
}
});
});
HTML Code
<div id="menuBuilder1" data-bind="source:data"></div>
Am in a tight corner and any help will be much appreciated.
MustafaP solved Problem 1.
For problem 2,
I realised that i had placed the schema definition at the wrong place within the kendoGrid. I placed it at the bottom after the toolbar.
It should rather be placed just after the kendoGrid brackets
$("#menuBuilder1").kendoGrid({
schema: {
model: mbModel
},
columns: [{
field: "MenuId",
title: "Menu",
editable: true
I'm currently implementing a kendo grid and i'm populating it with local data.
That is; I have generated a JSON string from my action and supplying that string on the view page.
In the end i would like to know if it is possible to implement full CRUD functions with local data?
here's a sample of the code written so far;
<div id="example" class="k-content">
<div id="grid"></div>
<script>
$(document).ready(function() {
var myData = ${coursemodules},
dataSource = new kendo.data.DataSource({
data: myData,
batch: true,
pageSize: 30,
schema: {
model: {
id: "id",
fields: {
id: { editable: false, nullable: true},
name: { type: "string", validation: { required: true }},
qualificationLevel: { type: "string", validation: { required: true }},
description: { type: "string", validation: { required: true }},
published: { type: "boolean" },
gateApprove: { type: "boolean" },
duration: { type: "number", validation: { min: 1, required: true } },
academicBody: { type: "string" }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
height: 350,
scrollable: true,
sortable: true,
pageable: true,
toolbar: ["create", "save", "cancel"],
columns: [
{
field: "id",
title: "ID",
width: '3%'
},
{
field: "name",
title: "Course Title",
width: '20%'
},
{
field: "description",
title:"Description",
width: '35%'
},
{
field: "published",
title: "Published",
width: '7%'
},
{
field: "gateApprove",
title: "Gate Approve",
width: '7%'
},
{
field: "duration",
title: "Duration",
width: '5%'
},
{
field: "academicBody.shortName",
title: "Academic Body",
width: '10%'
}
],
editable: true
});
});
</script>
</div>
I have realise that for the datasource, you have to declare transport to implement the CRUD. However, I need to declare "data". I tried declaring both transport and data. That doesn't seem to work.
Yes you can Here is JSFiddle Hope this will help you.
// this should be updated when new entries are added, updated or deleted
var data =
[{
"ID": 3,
"TopMenuId": 2,
"Title": "Cashier",
"Link": "www.fake123.com"},
{
"ID": 4,
"TopMenuId": 2,
"Title": "Deposit",
"Link": "www.fake123.com"}
];
$("#grid").kendoGrid({
dataSource: {
transport: {
read: function(options) {
options.success(data);
},
create: function(options) {
alert(data.length);
},
update: function(options) {
alert("Update");
},
destroy: function(options) {
alert("Destroy");
alert(data.length);
}
},
batch: true,
pageSize: 4,
schema: {
model: {
id: "ID",
fields: {
ID: {
editable: false,
nullable: true
},
TopMenuId: {
editable: false,
nullable: true
},
Title: {
editable: true,
validation: {
required: true
}
},
Link: {
editable: true
}
}
},
data: "",
total: function(result) {
result = result.data || result;
return result.length || 0;
}
}
},
editable: true,
toolbar: ["create", "save", "cancel"],
height: 250,
scrollable: true,
sortable: true,
filterable: false,
pageable: true,
columns: [
{
field: "TopMenuId",
title: "Menu Id"},
{
field: "Title",
title: "Title"},
{
field: "Link",
title: "Link"},
{
command: "destroy"}
]
});
When binding local data, the Grid widget utilizes an abstraction that represents a local transport. Therefore, it does not require a custom transport; modifications made in the grid are reflected to the bound data source. This includes rollbacks through a cancellation.
There is fully functional example of this in telerik documentation
What you need is define transport block in dataSource object with custom CRUD funtions which update local source.
transport: {
create: function(options){
var localData = JSON.parse(localStorage["grid_data"]);
options.data.ID = localData[localData.length-1].ID + 1;
localData.push(options.data);
localStorage["grid_data"] = JSON.stringify(localData);
options.success(options.data);
},
read: function(options){
var localData = JSON.parse(localStorage["grid_data"]);
options.success(localData);
},
update: function(options){
var localData = JSON.parse(localStorage["grid_data"]);
for(var i=0; i<localData.length; i++){
if(localData[i].ID == options.data.ID){
localData[i].Value = options.data.Value;
}
}
localStorage["grid_data"] = JSON.stringify(localData);
options.success(options.data);
},
destroy: function(options){
var localData = JSON.parse(localStorage["grid_data"]);
for(var i=0; i<localData.length; i++){
if(localData[i].ID === options.data.ID){
localData.splice(i,1);
break;
}
}
localStorage["grid_data"] = JSON.stringify(localData);
options.success(localData);
},
}