I wanted to replace dojox.grid.DataGrid with new Dgrid but I have trouble with it. I'm using Dojo 1.9.1 and here is excerpts of my code:
HTML:
<script type="text/javascript"><!--
require({
baseUrl: "/res/js/",
packages: [
{ name: "dojo", location: "dojo/dojo" },
{ name: "dijit", location: "dojo/dijit" },
{ name: "dojox", location: "dojo/dojox" },
{ name: "put-selector", location: "put-selector" },
{ name: "xstyle", location: "xstyle" },
{ name: "dgrid", location: "dgrid" },
{ name: "allwins", location: "allwins" }
]
},[
"allwins/Admin",
"dojo/parser",
"dojo/domReady!"
],function(admin, Parser){
admin.initUi(/*...*/);
});
</script>
<!-- ... -->
<div data-dojo-id="invoicesTab2"
data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="region: 'center',
title: 'Faktury 2'">
<div id=invoicesGridTab2"></div>
</div>
JavaScript:
request(invoicesDataUrl, {
handleAs: "json"
}).then(function (response) {
var store = new Memory({ data: response });
var grid = new OnDemandGrid({
region: "center",
store: store,
columns: {
invoice_id: { label: "FID" },
user_id: { label: "UID" },
invoice_no: { label: "Číslo" },
user_fullname: { label: "Plátce" },
created_formatted: { label: "Vystavena" },
payment_date_formatted: { label: "Splatnost" },
payment_total: { label: "Částka" }
}
}, "invoicesGridTab2");
grid.startup();
});
I can add few more things:
List item
I have no errors at the JavaScript console
data source is already tested with using older dojox.grid.DataGrid
it seems that main problem is with the rendering
Thanks for any help or advice!
You need to specify the field attribute in your columns that match with the response data object, for example:
request(invoicesDataUrl, {
handleAs: "json"
}).then(function (response) {
var store = new Memory({ data: response });
var grid = new OnDemandGrid({
region: "center",
store: store,
columns: {
invoice_id: { label: "FID", field: "invoice_id" },
user_id: { label: "UID", field: "user_id" },
invoice_no: { label: "Číslo", field: "invoice_no" },
user_fullname: { label: "Plátce", field: "user_fullname" },
created_formatted: { label: "Vystavena", field: "created_formatted" },
payment_date_formatted: { label: "Splatnost", field: "payment_date_formatted" },
payment_total: { label: "Částka", field: "payment_total" }
}
}, "invoicesGridTab2");
grid.startup();
});
I do not know if those field names are correct, but I assume you would. :)
Related
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 want to add another node to the kendotreeview but that would be dynamic unlike the other two being static/Hardcoded.
Here is the code for it:
var inlineDefault = new kendo.data.HierarchicalDataSource({
data: [{
text: "Furniture",
items: [{
text: "Tables & Chairs"
}, {
text: "Sofas"
}, {
text: "Occasional Furniture"
}]
}, {
text: "Decor",
items: [{
text: "Bed Linen"
}, {
text: "Curtains & Blinds"
}, {
text: "Carpets"
}]
}]
});
var treeview = $("#treeview-left").data("kendoTreeView");
treeview.add(new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: ResolveUrl("/Analysis/GetData/"),
dataType: "jsonp",
}
},
}));
$("#treeview-left").kendoTreeView({
dataSource: inlineDefault
});
How I can proceed with this?
There is a API example that shows how to add nodes to the TreeView.
Kendo TreeView API
I want to bind the Local and Remote Datas to the same Kendo UI Control.
Here I am using Kendo treeview.
Here First 2 nodes are Hardcoded(Local data) and the third needs to from Database(Remote Data).So now how to handle this.
$("#AftermarketTreeView").kendoTreeView({
dataTextField: ["text", "text", "MC_ANALYSIS_NAME"],
dataSource: {
data: [
{
text: "Initiate",
items: [
{ text: "Parts Selection", haschildren: false },
{ text: "Assumptions", haschildren: false },
{ text: "Team", haschildren: false },
]
},
{
text: "Analyze",
items: [
{ text: "Part Attributes", haschildren: false },
{ text: "Aftermarket Evaluation", haschildren: false }
]
},
{
text: "Monto Carlo",
items: [
{ text: "Monto Carlo", haschildren: true }
]
}
],
schema: {
model: {
hasChildren: "items",
children: {
schema: {
data: "items",
model: {
hasChildren: "haschildren",
children: {
schema: {
// override the schema.data setting from the parent
data: function (response) {
return response;
}
},
transport: {
read: {
url: ResolveUrl("/CreateMaintainAnalysis/GetMontoCarloData/"),
dataType: "jsonp",
data:onDataSendAnalysisID,
}
},
}
}
}
}
}
}
}
});
So How to bind it using Kendo TreeView ?
You can't have both a local and remote data source on the same element. The best option would be a remote data source only and have it return all of the options you're looking for.
I am trying to create a grid builder object. This grid builder has a method, buildGrid, which I've designed to expect an object defining a bunch of paramaters for a grid:
buildOrdersGrid: function () {
var ordersGrid = buildGrid({
gridElementID: 'OrdersGrid',
gridPagerElementID: 'OrdersGridPager',
colNames: ['Order ID', 'Project Subcode', 'Incident Number', 'Cost Center', 'Name', 'Customer'],
colModel: [
{ name: 'ID', hidden: true },
{ name: 'ProjectSubcode' },
{ name: 'IncidentNumber' },
{ name: 'CostCenter' },
{ name: 'Name' },
{ name: 'Customer' }
],
defaultCaption:'Orders: no filter applied',
});
return ordersGrid;
}
function buildGrid(data) {
var grid = $('#' + data.gridElementID);
var gridPager = $('#' + data.gridPagerElementID);
grid.jqGrid({
datatype: 'local',
colNames: data.colNames,
colModel: data.colModel,
gridview: true,
height: 'auto',
pager: gridPager,
viewrecords: true,
multiselect: true,
defaultCaption: data.defaultCaption,
caption: data.defaultCaption,
shrinkToFit: false
});
return grid;
}
Something like that, but it's really new code, so open to advice on how to improve.
Now, I would like to extend this buildGrid method such that it can take non-predefined properties and give them to the jqGrid. Something like:
buildTaskGrid: function () {
var tasksGrid = buildGrid({
gridElementID: 'TasksGrid',
gridPagerElementID: 'TasksGridPager',
colNames: ['Order', 'Task ID', 'Task #', 'Type', 'Status', 'Assignee', 'Current Location', 'Dest Location', 'Change No', 'Net Patched', 'SAN Patched'],
colModel: [
{ name: 'Order' },
{ name: 'TaskID', hidden: true },
{ name: 'TaskNo' },
{ name: 'Type' },
{ name: 'Status' },
{ name: 'Assignee' },
{ name: 'CurrentLocation' },
{ name: 'DestLocation' },
{ name: 'ChangeNo' },
{ name: 'NetPatched' },
{ name: 'SANPatched' }
],
defaultCaption:'Tasks: no filter applied',
//Decorate with task-specific properties.
grouping: true,
groupingView: {
groupField: ['Order'],
groupColumnShow: [false]
},
ondblClickRow: function (rowid) {
$(this).trigger('taskDoubleClicked', selector.getRowData(rowid));
}
});
return tasksGrid;
}
I'm not sure how I should best 'find' the unanticipated properties and give them to the grid. Any ideas?
I think you can use this http://api.jquery.com/jQuery.extend/
The Store
var timesheet = new Ext.data.JsonStore(
{
root: 'timesheetEntries',
url: 'php/scripts/timecardEntry.script.php',
storeId: 'timesheet',
autoLoad: true,
fields: [
{ name: 'id', type: 'integer' },
{ name: 'user_id', type: 'integer' },
{ name: 'ticket_number', type: 'integer' },
{ name: 'description', type: 'string' },
{ name: 'start_time', type: 'string' },
{ name: 'stop_time', type: 'string' },
{ name: 'client_id', type: 'integer' },
{ name: 'is_billable', type: 'integer' }
]
}
);
A section of my GridPanel code:
columns: [
{
id: 'ticket_number',
header: 'Ticket #',
dataIndex: 'ticket_number'
},
{
id: 'description',
header: 'Description',
dataIndex: 'description'
},
{
id: 'start_time',
header: 'Start',
dataIndex: 'start_time',
renderer: Ext.util.Format.dateRenderer('m/d/Y H:i:s')
}
...
From the server, I receive this JSON string:
{
timesheetEntries:[
{
"id":"1",
"user_id":"1",
"description":null,
"start_time":"2010-11-13 11:30:00",
"stop_time":"2010-11-13 15:50:10",
"client_id":null,
"is_billable":"0"
}
My grid panel renders fine. However, my start and stop time columns read 'NaN/NaN/NaN NaN:NaN:NaN' and I don't know why.
If your data has "2010-11-13 11:30:00" shouldn't your format be 'Y-m-d H:i:s'?
EDIT: Sorry, the grid config should be OK -- I was referring to the dateFormat value in your store's field definition, which should be 'Y-m-d H:i:s' so that your incoming data can be properly mapped to your column model. You should also include type: 'date'. You're not showing your store config, but the problem is likely one of those things being wrong.
Try this
function renderDate(v,params,record)
{
var dt = new Date(v);
if (!isNaN(dt.getDay())) {
return dt.format('d/m/Y');
}
return '-';
}
A very simple way to do it:
return Ext.util.Format.date(val,'m/d/Y');