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.
Related
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
});
I am using KendoUI - Grid component
How can I convert this into Kendo Grid:
For Eg:
I have created kendo grid (table) by using local data. As soon as I click on "Generate chart" button, above table's filter data should create the Kendo pie chart like below...
As I am new to Kendo, can somebody please suggest me the answer?
Code:
var localData = [
{
Id: 1,
userName: "John",
game: "A",
difficultyLevel: "Easy",
startTime: "25-05-2017",
endTime: "26-05-2017",
score: "210"
},
{
Id: 2,
userName: "Sam",
game: "B",
difficultyLevel: "Hard",
startTime: "04-11-2016",
endTime: "01-12-2016",
score: "4800"
},
];
var dataSource = new kendo.data.DataSource({
data: localData,
schema: {
model: {
fields: {
Id: {
type: "number"
},
userName: {
type: "string"
},
userName: {
type: "string"
},
difficultyLevel: {
type: "string"
},
startTime: {
type: "string"
},
endTime: {
type: "string"
},
score: {
type: "number"
},
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
rowTemplate: $.proxy(kendo.template($("#rowTemplate").html()), dataSource),
scrollable: true,
height: 300,
sortable: true,
filterable: false,
groupable: true,
pageable: true,
columns: [{
field: "Id",
title: "Id",
filterable: true
}, {
field: "userName",
title: "userName"
}, {
field: "game",
title: "game"
}, {
field: "difficultyLevel",
title: "difficultyLevel"
}, {
field: "startTime",
title: "startTime"
}, {
field: "endTime",
title: "endTime"
}, {
field: "score",
title: "score"
}]
});
JsFiddle
You need to prepare your data to the chart's format. Something like:
$chartContainer.kendoChart({
dataSource: {
data: localData,
schema: {
parse: function(data) {
return data.map(x => {
return {
value: Number(x.score),
category: x.userName
}
});
}
}
},
series: [{
type: "pie",
field: "value",
categoryField: "category"
}],
tooltip: {
visible: true,
template: "#= category #: #= value #"
}
});
Updated Fiddle
I am building grid using JSGrid (js-grid.com). I want call back methods to implement validations before adding new record or updating record. Documentation provided on website is not clearly mentioned how to implement one. Please refer http://js-grid.com/docs/#callbacks.
I need help how can i implement callback method cause i am new to JSGrid & Scripting. Following is my sample code. Please guide me where to put callback methods.
$(function() {
$("#jsGrid").jsGrid({
height: "90%",
width: "100%",
filtering: true,
editing: true,
sorting: true,
paging: true,
autoload: true,
pageSize: 15,
pageButtonCount: 5,
deleteConfirm: "Do you really want to delete the client?",
controller: db,
fields: [
{ name: "Name", type: "text", width: 150 },
{ name: "Age", type: "number", width: 50 },
{ name: "Address", type: "text", width: 200 },
{ name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
{ name: "Married", type: "checkbox", title: "Is Married", sorting: false },
{ type: "control" }
]
});
});
Thanks in advanced.
$(function() {
$("#jsGrid").jsGrid({
height: "90%",
width: "100%",
// added for demo
onItemInserting: function(args) {}, // before controller.insertItem
onItemInserted: function(args) {}, // on done of controller.insertItem
onItemUpdating: function(args) {}, // before controller.updateItem
onItemUpdated: function(args) {}, // on done of controller.updateItem
onItemDeleting: function(args) {}, // before controller.deleteItem
onItemDeleted: function(args) {}, // on done of controller.deleteItem
filtering: true,
editing: true,
sorting: true,
paging: true,
autoload: true,
pageSize: 15,
pageButtonCount: 5,
deleteConfirm: "Do you really want to delete the client?",
controller: db,
fields: [
{ name: "Name", type: "text", width: 150 },
{ name: "Age", type: "number", width: 50 },
{ name: "Address", type: "text", width: 200 },
{ name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
{ name: "Married", type: "checkbox", title: "Is Married", sorting: false },
{ type: "control" }
]
});
});
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 using A Kendo Grid, With Server Side Filtering and Server Side Sorting. In my Data Source Transport Read method the field is always null. Any Suggestions?
This my code for initializing the Grid:
var gridDataSource = new kendo.data.DataSource({
transport: {
read: {
url: '#Url.Action("Read", "GridModule")',
type: 'POST',
contentType: 'application/json'
},
parameterMap: function (options) {
options.assignmentFilters = assignmentFilters;
return JSON.stringify(options);
}
},
pageSize: 20,
serverPaging: true,
serverSorting: true,
serverFiltering: true,
schema: {
model: {
fields: {
LastSurveyDate: { type: "date" },
LastNoteDate: { type: "date" }
}
},
data: "data",
total: "totalRows"
}
});
var $grid = $('#gridAssignments');
if (e.firstLoad) {
$grid.kendoGrid({
scrollable: true,
pageable: {
refresh: true,
pageSizes: [20, 50, 100, 500, 1000],
buttonCount: 12,
messages: {
display: "Showing {0}-{1} from {2} Provider Contacts",
empty: "No Contacts Match the Filter Criteria",
itemsPerPage: "Contacts per page"
}
},
reorderable: true,
navigatable: true,
change: gridOnChange,
dataBound: gridOnDataBound,
dataSource: gridDataSource,
columnReorder: gridColumnReorder,
columnHide: gridColumnHide,
columnResize: gridColumnResize,
columnShow: gridColumnShow,
columnMenu: {
sortable: false,
messages: {
columns: "Choose columns",
filter: "Filter",
}
},
resizable: true,
height: '720px',
filterable: {
extra: false,
operators: {
string: {
contains: "Contains",
},
date: {
lt: "Is before",
gt: "Is after",
equal: "On"
}
}
},
selectable: "row",
sortable: {
mode: "single",
allowUnsort: true
},
columns: [ #Html.Raw(Model.GridColumns.Columns) ]
});
} else {
$grid.data('kendoGrid').setDataSource(gridDataSource);
}
For anyone that runs into the same problem...
In my case my code worked fine until I added two fields to the Schema.Model.Fields. Then for some reason the Field in my read method of my Grid Module was NULL. By default it all fields were treated as strings but when I added the two new properties then No default was used.
I had to add all my Grid's fields
schema: {
model: {
fields: {
LastSurveyDate: { type: "date" },
LastNoteDate: { type: "date" },
FirstName: { type: "string" },
LastName: { type: "string" },
HasNewEval: { },
HasCommitmentsToGet: { },
OnPriorityList: { type: "string" },
HasProductsBelowMinimum: { type: "HasProductsBelowMinimum" },
Points: {},
Title: { type: "string" },
Provider: { type: "string" },
Phone: { type: "string" },
TimeZone: { type: "string" },
Touches: { type: "string" },
LastNoteText: { type: "string" },
VerbalAging: { type: "string" }
}
},
That worked for me.