Related
Using ExtJS 4.2.3. Have form with treecolumn xtype field which contains string value with number in begin. Column has 3 lvls of structure. On first lvl sort needs to be in order like (2, 3, 5, 40, 100 and etc).
After picking third lvl value in selection form, value in box will look like:
3.ABC.<BR>3.23.ABCCDD.<BR>3.23.5. ABCC
Sample of code:
enter Picker = new Project.Picker({
title: "Title1",
proxyCfg: {
url: Ext.state.Manager.get("url") + "TreeList",
type: "ajax"},
idProperty: "id",
defaultRootId: "NULL",
nodeParam: "parent_Code",
PickerCfg: [
{ name: "id", type: "string", isSC: false },
{ xtype: "treecolumn", name: "Fieldname", header: "Header1", type: "string", isSC: true, isHC: true },
{ name: "name2", type: "string" },
{ name: "code", header: "Header3", type: "string", isSC: true}],
viewConfig: {
listeners: {
itemdblclick: function (view, record) {
Order_Form.getComponent("Grid").selModel.getSelection()[0].set("id", record.get("id"));
Order_Form.getComponent("Grid").selModel.getSelection()[0].set("Fieldname", record.get("Fieldname"));
Order_Form.getComponent("Grid").selModel.getSelection()[0].set("code", record.get("code"));
trigger.setValue(record.get("name2"));
this.up().up().destroy();
}
}
},
sorters: [{
property: "code",
direction: "ASC"
}]
}).show(this, function () { this.getComponent(0).DMS_search(); Picker.getComponent(0).getView().refresh(); });
}
},
tpl: "<table class='Gridd' style='border-collapse: collapse; border: medium none;'><tr><td><b>[Header1]: </b></td><td style='width:100%;'>{Name2}</td></tr><tr><td><b>[Header3]: </b></td><td>{code}</td></tr></table>"
Asking for help with sorting in selection form.
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
This is a jQuery code of my sample project to get details from application side to display in front in a grid which is build by jsGrid.
$("#part_table").jsGrid({
height: "auto",
width: "100%",
autoload: true,
editing: true,
sorting: true,
paging: true,
pageSize: 10,
inserting: true,
loadIndication: false,
filtering: true,
headerRowClass: 'table-green-header',
controller: {
loadData: function (filter) {
function.....
},
updateItem: function (item) {
function.....
}
},
fields: [
{ name: "Id", type: "number", visible: false },
{
name: "CatalogueId", type: "select", **items**: catalouges, valueField: "Id", textField: "CatalougeName", selectedIndex : -1 , title: "Catalouge Name", align: "center"
},
{ name: "DistributorPrice", type: "number", title: "Distributor Price", align: "center", filtering: false, sorting: false },
{ name: "IsActive", type: "checkbox", filtering: false, sorting: false },
{ type: "control" }
],
rowClick: function (args) {
return false;
},
});
Can anyone say how to get a list of items to field by calling to application side via AJAX call ?
Thanks
Load items in advance and then use result in the grid field config, e.g.:
$.ajax({
type: "GET",
url: "/countries/"
}).done(function(countries) {
countries.unshift({ id: "0", name: "" });
$("#jsGrid").jsGrid({
...,
fields: [
...
{ name: "country_id", title: "Country", type: "select", width: 100, items: countries, valueField: "id", textField: "name" }
]
});
});
You can find an example in the jsgrid sample project
You can do multiple simultaneous requests before the grid launches
$.when(
$.get("/api/v1/clients", function(clients) {
db.clients = clients;
}),
$.get("/api/v1/owners", function(owners) {
db.owners = owners;
})
).then(function() {
$("#jsGrid").jsGrid({
...,
fields: [
{ name: "client", title: "Client", type: "select", items: db.clients, valueField: "name", textField: "name" },
{ name: "owner", title: "Owner", type: "select", items: db.owners, valueField: "short_name", textField: "short_name" },
]
});
});
you write the ajax call in loadData of the controller.. something like:
controller: {
loadData: function(filter) {
return $.ajax({
type: "GET",
url: "/api/data",
data: filter,
dataType: "json"
});
}
}
further reference https://github.com/tabalinas/jsgrid-webapi
I'm having trouble trying to get my KendoUI Scheduler resources to populate correctly. I haven't found a good example of how to bind a nested JSON object (in this case Task and User listed in the screenshot) to resources that are fetched.
Also while running Fiddler, it seems like the resources listed below aren't even fetched from the web service. The documentation is super unclear on some of the specifics and I'm having a hard time finding the problem.
The schedule actually pulls back all the SchedulerEvents (the JSON fetched below) and shows me events bound to the Schedule properly, just they have no resources attached. Right now all of my webservice calls are running off localhost so JSONP shouldn't be required yet as my service calls are all calling "localhost".
I did find something similar to what I'm trying to do with projection of data here via Telerik's documentation, but I haven't been able to figure out a good solution yet.
Edited : updated my question with individual DataSource code
Edited 2 : I should also mention since posting this, the JSON screenshot isn't entirely accurate anymore as I've taken ScheduledTaskId and UserId (the two identifying properties of my Task and User resources I'm trying to add to appointments) and made that property available directly from my SchedulerEvent class to avoid nesting objects.
Javascript
//Datasources code has been moved to here. Explicitly fetching data and assigning to Resources datasource properties
$("#scheduler").kendoScheduler({
date: new Date("#DateTime.Now.ToShortDateString()"),
timezone: "Etc/UTC",
views: [
"day",
{ type: "week", selected: true },
"month",
"agenda"
],
dataSource: {
batch: true,
transport: {
read: {
url: "ServiceURI/Schedule/Get",
dataType: "json"
},
update: {
url: "",
dataType: "json"
},
create: {
url: "",
dataType: "json"
},
destroy: {
url: "",
dataType: "json"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
resources: [
{
field: "userId",
title: "User",
dataTextField: "displayName",
dataValueField: "userId",
dataSource: userDataSource
}
{
field: "scheduledTaskId",
title: "Task",
dataTextField: "taskName",
dataValueField: "scheduledTaskId",
dataSource: taskDataSource
}
],
schema: {
model: {
id: "shiftId",
fields: {
shiftId: {
from: "ShiftId",
type: "number"
},
title: {
from: "Title",
validation: { required: true }
},
start: {
from: "Start",
type: "date",
validation: { required: true }
},
end: {
from: "End",
type: "date",
validation: { required: true }
},
scheduledTaskId: {
from: "ScheduledTaskId",
type: "number"
},
userId: {
from: "UserId",
type: "number"
},
description: {
from: "Description"
},
recurrenceId: { from: "RecurrenceID" },
recurrenceRule: { from: "RecurrenceRule" },
recurrenceException: { from: "RecurrenceException" },
isAllDay: { type: "boolean", from: "IsAllDay" }
}
}
}
}
});
Datasources
var userDataSource = new kendo.data.DataSource({
transport: {
read: {
//This should be a customized list of users, or all users fetched from the datastore
url: "ServiceURI/UserProfile/Get/",
dataType: "json"
},
},
schema: {
model: {
id: "userId",
fields: {
userId: {
from: "UserId",
type: "number"
},
displayName: {
from: "DisplayName"
}
}
}
}
});
userDataSource.fetch();
var taskDataSource = new kendo.data.DataSource({
transport: {
read: {
//This should be the entire list of tasks fetched from the datastore
url: "ServiceURI/ScheduledTask/Get?companyId=1",
dataType: "json"
}
},
schema: {
model: {
id: "scheduledTaskId",
fields: {
scheduledTaskId: {
from: "ScheduledTaskId",
type: "number"
},
taskName: {
from: "TaskName"
}
}
}
}
});
taskDataSource.fetch();
JSON returned
Problem
The resources object is inside of the dataSource object as I thought it was supposed to be per the documentation
views: [
"day",
{ type: "week", selected: true },
"month",
"agenda"
],
dataSource: {
resources: [
{
field: "userId",
title: "User",
dataTextField: "displayName",
dataValueField: "userId",
dataSource: userDataSource
}
{
field: "scheduledTaskId",
title: "Task",
dataTextField: "taskName",
dataValueField: "scheduledTaskId",
dataSource: taskDataSource
}
]
}
Answer
Just need to move the resources array outside of the DataSource... works as expected without any explicit .fetch() statements either
views: [
"day",
{ type: "week", selected: true },
"month",
"agenda"
],
resources: [
{
field: "userId",
title: "User",
dataTextField: "displayName",
dataValueField: "userId",
dataSource: userDataSource
}
{
field: "scheduledTaskId",
title: "Task",
dataTextField: "taskName",
dataValueField: "scheduledTaskId",
dataSource: taskDataSource
}
],
dataSource: {
}
DataSource + Scheduler Creation
var userDataSource = new kendo.data.DataSource({
transport: {
read: {
//This should be a customized list of users, or all users fetched from the datastore
url: "ServiceURI/UserProfile/Get/",
dataType: "json"
},
},
requestEnd: function(e) {
//Start Fetching Task Data Source
taskDataSource.fetch();
},
schema: {
model: {
id: "userId",
fields: {
userId: {
from: "UserId",
type: "number"
},
displayName: {
from: "DisplayName"
}
}
}
}
});
Task DataSource declaration.
var taskDataSource = new kendo.data.DataSource({
transport: {
read: {
//This should be the entire list of tasks fetched from the datastore
url: "ServiceURI/ScheduledTask/Get?companyId=1",
dataType: "json"
}
},
requestEnd: function(e) {
//Once Task and User DataSource have been fetched, create the Scheduler
createScheduler(e);
},
schema: {
model: {
id: "scheduledTaskId",
fields: {
scheduledTaskId: {
from: "ScheduledTaskId",
type: "number"
},
taskName: {
from: "TaskName"
}
}
}
}
});
function createScheduler(e){
$("#scheduler").kendoScheduler({
date: new Date("#DateTime.Now.ToShortDateString()"),
timezone: "Etc/UTC",
views: [
"day",
{ type: "week", selected: true },
"month",
"agenda"
],
dataSource: {
batch: true,
transport: {
read: {
url: "ServiceURI/Schedule/Get",
dataType: "json"
},
update: {
url: "",
dataType: "json"
},
create: {
url: "",
dataType: "json"
},
destroy: {
url: "",
dataType: "json"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
resources: [
{
field: "userId",
title: "User",
dataTextField: "DisplayName",
dataValueField: "UserId",
dataSource: userDataSource
}
{
field: "scheduledTaskId",
title: "Task",
dataTextField: "TaskName",
dataValueField: "ScheduledTaskId",
dataSource: taskDataSource
}
],
schema: {
model: {
id: "shiftId",
fields: {
shiftId: {
from: "ShiftId",
type: "number"
},
title: {
from: "Title",
validation: { required: true }
},
start: {
from: "Start",
type: "date",
validation: { required: true }
},
end: {
from: "End",
type: "date",
validation: { required: true }
},
scheduledTaskId: {
from: "ScheduledTaskId",
type: "number"
},
userId: {
from: "UserId",
type: "number"
},
description: {
from: "Description"
},
recurrenceId: { from: "RecurrenceID" },
recurrenceRule: { from: "RecurrenceRule" },
recurrenceException: { from: "RecurrenceException" },
isAllDay: { type: "boolean", from: "IsAllDay" }
}
}
}
}
});
}
Start the DataSources fetching from User Source then Task Source and finally creation of the Scheduler.
userDataSource.fetch();
I have never tried this before, but I think above would work as per your requirement.
I think your issue is binding Case. In your Datasources for the resource Objects, you have a model definition, taking items from your JSON data and transforming it into a Model:
var userDataSource = new kendo.data.DataSource({
transport: {
read: {
//This should be a customized list of users, or all users fetched from the datastore
url: "ServiceURI/UserProfile/Get/",
dataType: "json"
},
},
schema: {
model: {
id: "userId",
fields: {
userId: {
from: "UserId",
type: "number"
},
displayName: {
from: "DisplayName"
}
}
}
}
});
In your scheduler Binding, you are setting the dataTextField and dataValueField to:
{
field: "userId",
title: "User",
dataTextField: "DisplayName",
dataValueField: "UserId",
dataSource: userDataSource
}
Notice that your model is displayName and userId, but your resource Bindings are DisplayName and UserId - By the time you are binding into the Scheduler resource collection, the data has been transformed into your model schema, and casing is important.
If you correct the casing, that should solve your issue. You will also need to ensure that both Datasources are populated prior to creating the Scheduler object.
I'm trying to create a grid (Ext.grid.Panel) and fill it with data. But something is going wrong so the grid shows empty rows without data.
Model is:
Ext.define('Order', {
extend: 'Ext.data.Model',
fields: [
{
name: 'id',
type: 'int'
},
{
id: 'companyId',
type: 'int'
},
{
id: 'amount',
type: 'int'
},
{
id: 'dealDate',
type: 'date'
},
{
id: 'complete',
type: 'int' //boolean imitation
}
],
idProperty: 'id'
});
Grid & Store code is:
var orders = Ext.create('Ext.data.Store', {
model: 'Order',
proxy: Ext.create('Ext.data.proxy.Ajax', {
url: 'service/orders-data.php?',
reader: Ext.create('Ext.data.reader.Json', {
root: 'orders'
})
}),
sorters: [{
property: 'name',
direction: 'ASC'
}]
});
orders.load();
var ordersGrid = Ext.create('Ext.grid.Panel', {
width: 400,
height: 300,
store: orders,
columns: [
{
text: 'Amount',
dataIndex: 'amount',
width: 120
},
{
text: 'Deal date',
dataIndex: 'dealDate',
width: 120
},
{
text: 'Complete',
dataIndex: 'complete',
width: 120
}
]
});
JSON-response from server is:
{
"orders":[
{
"id":1,
"amount":5000,
"dealDate":"2012-01-05",
"complete":0
},
{
"id":2,
"amount":6850,
"dealDate":"2012-01-07",
"complete":0
},
{
"id":5,
"amount":7400,
"dealDate":"2012-01-09",
"complete":0
}
]
}
Why does the grid display empty rows?
All your model's fields but the first are being declared with 'id' properties where they should instead be using 'name':
{
name: 'id',
type: 'int'
},
{
name: 'companyId',
type: 'int'
},
{
name: 'amount',
type: 'int'
},
{
name: 'dealDate',
type: 'date'
},
{
name: 'complete',
type: 'int' //boolean imitation
}