Using jsGrid I am attempting to display information from my server. The format that I receive the data is thus:
{
"Response": [
{
"this": "1",
"that": 42,
"theOtherThing": "2016-01-28T19:45:19.093Z"
},
{
"this": "2",
"that": 49,
"theOtherThing": "2016-01-28T19:45:19.093Z"
}
]
}
How can I pull this information out of the object Response so that I can display it in my jsGrid fields?
fields: [
{name: 'this', type: 'text', width: 100},
{name: 'that', type: 'number', width: 100},
{name: 'theOtherThing', type: 'text', width: 100}
]
So I just needed to alter the format of my ajax call:
controller: {
loadData: function () {
var deferred = $.Deferred();
$.ajax({
type: 'GET',
url: 'ThisGoesSomewhere',
dataType: 'json',
success: function(res){
deferred.resolve(res.Response);
},
error: function(res){
console.log('error ' + res);
}
});
return deferred.promise();
}
}
Related
I want use my api in angular js by kendo,but it error me.
my code is:
scope.mainGridOptions = {
dataSource: {
type: "odata",
transport: {
read: {
dataType: "json",
headers: {
"accept": "application/json; odata=verbose",
"Authorization": ""
},
url: "http://localhost:35143/api/" + "Kiosks?isActive=false"
}
},
sort: {
field: "CreationTime",
dir: "desc"
},
schema: {
data: 'results',
total: 'count',
model: {
Id: "Id",
fields: {
Id: { type: "number" },
MobileNumber: { type: "number" },
CreationTime: {},
Description: {},
OrderStatus: { type: "int" },
IsConvertToArea: { type: "boolean" },
Customer: {
Id: {},
FirstName: {},
LastName: {},
EmailAddress: {},
IsActive: { type: "boolean" },
UserId: {}
}
}
}
},
pageSize: 5,
serverPaging: true,
serverSorting: true,
serverFiltering: true
},
};
my error in console web browser is:
http://localhost:35143/api/Kiosks?isActive=false&%24inlinecount=allpages&%24top=5&%24orderby=CreationTime%20desc
%24 %20 is extra,how i fix it?
These two are encoded characters. %24 means $ and %20 indicates space.
ASCII Encoding Reference
Check why it is appending $ character in request parameter in your kendo grid datasource definition.
You can decode these characters by using decodeURIComponent() in javascript.
I want to load data dynamically in a graph.
If my data is:
"data": [
{
"A": "11",
"DATE": "2018-02-07",
"B": "100"
},
{
"A": "12",
"DATE": "2018-03-04",
"B": "1"
}
]`
And the view part is
loadChart: function () {
var cha = this.down('#charid');
var iii = null;
Ext.Ajax.request({
url: utils.createUrl('api', 'dashboard-read'),
async: true,
callback: function(opts, success, response) {
try {
if (success) {
var fields = ['A', 'B'];
cha.series.clear();
for(var i=0;i<fields.length;i++){
cha.series.add({
type: 'line',
axis: 'left',
xField: 'DATE',
border: false,
flex: 1,
title: fields[i],
yField: fields[i],
markerConfig: {
radius: 4
},
}
What I need is instead of defining var fields = ['A', 'B']; in view have to push the data from the back end to the fields array dynamically. Because the backend may send different companies in different times. So can't hard coded them.
Use the following approach:
...
callback: function(opts, success, response) {
if (success) {
responseText.data.forEach(function(o){
cha.series.add({
type: 'line',
axis: 'left',
xField: 'DATE',
border: false,
flex: 1,
title: o.A,
yField: o.B,
markerConfig: {
radius: 4
}
});
});
}
}
...
I use a kendo ui scheduler with AngularJS. When the scheduler initially is loaded, the application does not use any filters. When the scheduler is shown to the user, the user must be able to set some filters and submit these filters to the web api. But I'm not able to receive the parameters.
The value of requestStatus can be populated by a multi select:
<select ng-model="requestStatus" id="requestStatus" name="requestStatus" class="form-control" multiple>
<option value="0" label="Open">Open/option>
<option value="1" label="Closed">Closed</option>
<button ng-click="filterPlanboard()" class="btn btn-primary">Submit</button>
My angularjs Controller is like this:
var requestStatus = "";
$scope.filterPlanboard = function () {
console.log($scope.requestStatus);
var requestStatus = $scope.requestStatus;
console.log(requestStatus); //shows: Array ["0","1"] when all items are selected
$scope.schedulerOptions.dataSource.read({
"Status": requestStatus,
"Type": ["70"]
});
//$scope.schedulerOptions.refresh();
};
$scope.$watch("planboardId", function () {
var schedulerDs = new kendo.data.SchedulerDataSource({
//batch: true,
transport: {
read: {
url: "http://localhost:51714/api/Events/Read/" + $scope.planboardId,//"//demos.telerik.com/kendo-ui/service/tasks",
type: "POST",
dataType: "json",
//data: kendo.stringify({"Color": "Green"}),
contentType: "application/json; charset=utf-8"
},
update: {
url: "http://localhost:51714/api/Events/Update",//"//demos.telerik.com/kendo-ui/service/tasks/update",
dataType: "json",
type: "PUT",
contentType: "application/json"
},
create: {
url: "//demos.telerik.com/kendo-ui/service/tasks/create",
dataType: "jsonp"
},
destroy: {
url: "//demos.telerik.com/kendo-ui/service/tasks/destroy",
dataType: "jsonp"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
}
else if (operation === "update") {
return kendo.stringify({ planboardId: $scope.planboardId, planboardEvent: options });
}
return kendo.stringify(options);
}
},
schema: {
model: {
id: "taskId",
fields: {
taskId: { from: "Id" },
title: { from: "Title", defaultValue: "No title", validation: { required: true } },
start: { type: "date", from: "Start" },
end: { type: "date", from: "End" },
//startTimezone: { from: "StartTimezone" },
//endTimezone: { from: "EndTimezone" },
description: { from: "Description" },
//recurrenceId: { from: "RecurrenceID" },
//recurrenceRule: { from: "RecurrenceRule" },
//recurrenceException: { from: "RecurrenceException" },
ownerId: { from: "OwnerID", defaultValue: 1 },
eventColor: { from: "EventColor", defaultValue: "#333333" }
//isAllDay: { type: "boolean", from: "IsAllDay" }
}
}
});
$scope.schedulerOptions = {
date: new Date("2016/6/26"),
startTime: new Date("2016/6/26 07:00 AM"),
height: 600,
views: planboardViewService.getViews(),
timezone: "Etc/UTC",
eventTemplate: $('#event-template').html(),
ataSource: schedulerDs,
resources: [
{
field: "ownerId",
name: "Owner",
title: "Owner",
dataSource: [
{ text: "Alex", value: 1, color: "#f8a398" },
{ text: "Bob", value: 2, color: "#51a0ed" },
{ text: "Charlie", value: 3, color: "#56ca85" }
]
}
]
};
My Web Api is like this:
[HttpPost]
public IEnumerable<PlanboardEventViewModel> Read(int id, [FromBody] FilterModel filterModel)
{
return _peRepo.GetEvents(id);
}
And my FilterModel:
public class FilterModel
{
public string Status {get;set;}
public string Type {get;set;}
}
When I press the submit button, I can see in fiddler the following json string is shown (in TextView) :
{"Status":["0","1"],"Type":["70"]}
I am not able to update record in localStorage by id. I get the exception :
Uncaught TypeError: Cannot read property 'type' of undefined WebStorage.js:391Ext.define.getIds WebStorage.js:391Ext.define.update WebStorage.js:190Ext.define.runOperation Batch.js?_dc=1423751003307:251Ext.define.start Batch.js?_dc=1423751003307:178Ext.define.batch Proxy.js?_dc=1423751002203:456Ext.define.sync AbstractStore.js?_dc=1423751002173:810Ext.define.afterEdit AbstractStore.js?_dc=1423751002173:906Ext.define.callStore Model.js?_dc=1423751003310:1814Ext.define.afterEdit Model.js?_dc=1423751003310:1773Ext.define.set Model.js?_dc=1423751003310:1175(anonymous function) Main.js?_dc=1423751002786:26(anonymous function) VM3763:6wrap
My model is simple:
Ext.define('AM.model.Points', {
extend: 'Ext.data.Model',
idProperty: {
name: 'UUID',
type: String,
isUnique: true
},
fields: [
{
name: 'NO',
type: "string"
},
{
name: 'Y',
type: "int"
},
{
name: 'ROW',
type: 'int'
},
{
name: 'SEAT',
type: 'string'
},
{
name: 'PROCEEDED',
type: 'int'
},
{
name: 'X',
type: "int"
},
{
name: "CurrentPlace",
type: "int",
defaultValue: 0
}
],
});
My controller class init function:
init: function(){
// метод getStore контроллера возвращает экземпляр хранилища,
// если он уже создан - или создаёт его
console.log('Main controller init function()');
var changingImage = Ext.create('Ext.Img', {
src: '/is-bin/intershop.static/WFS/EnterpriseOrg-MainChannel-Site/ProductStore/ru_RU/kzch.jpg',
renderTo: Ext.get('canv1')
});
Ext.get('canv1').on('click', function(eventObj, elRef) {
var index = Ext.StoreMgr.lookup("LocalStore").findExact('UUID',AM.util.Utilities.CurrentPlace);
var rec = Ext.StoreMgr.lookup("LocalStore").getAt(index);
console.log('Ext.StoreMgr.lookup("LocalStore") ' + Ext.StoreMgr.lookup("LocalStore"));
console.log('index' + index);
console.log('rec' + rec);
var uuid = rec.get('UUID');
console.log('uuid is: '+uuid);
**rec.set('X', window.event.offsetX);**
});
The logic is that I click on canvas and pass X coordinate of the click to method on click. I retrieve model from store by previously saved id to update it. But I cant update record. What should be done? Version 4.2.1 Thanx in advance.
My problem consists of not being able to retrieve data through associations.
After running setup() from console i would expect firstTurbine.getPlant() to return the associated plant, yet it returns undefined.
I've spent alot of time looking for a solution I'm probably not looking the right place.
Relevant code is attached below:
Ext.regApplication({
name: "app",
launch: function() {
//app.views.viewport = new app.views.Viewport();
}
});
app.models.Plant = Ext.regModel("Plant", {
fields: [
{name: "id", type: "int"},
{name: "name", type: "string"},
{name: "notes", type: "auto"}
],
proxy: {type: 'localstorage', id:'plantStorage'}
});
app.models.Turbine = Ext.regModel("Turbine", {
fields: [
{name: "id", type: "int"},
{name: "plant_id", type: "int"},
{name: "name", type: "string"},
{name: "notes", type: "auto"}
],
proxy: {type: 'localstorage', id:'turbineStorage'},
belongsTo: 'Plant'
});
app.stores.plants = new Ext.data.Store({
model: "Plant",
autoLoad: true,
data : [
{id: 1, name: 'Plant1', notes: ["Note1", "Note2"]},
{id: 2, name: 'Plant2', notes: ["Note1", "Note2"]},
{id: 3, name: 'Plant3', notes: ["Note1", "Note2"]}
]
});
app.stores.turbines = new Ext.data.Store({
model: "Turbine",
autoLoad: true,
data: [
{id: 11, "plant_id": 1, name: "T41", notes: ["Turbine note 1", "Turbine note 2"]},
{id: 12, "plant_id": 1, name: "T13", notes: ["Turbine note 1", "Turbine note 2"]}
]
});
function setup(){
firstPlant = app.stores.plants.getAt(0);
if(!firstPlant){
firstPlant = Ext.ModelMgr.create({name:"TestPlant1", id: 1}, "Plant");
app.stores.plants.add(firstPlant);
app.stores.plants.sync();
}
firstTurbine = app.stores.turbines.getAt(0);
if(!firstTurbine){
firstTurbine = Ext.ModelMgr.create({name:"T31", id: 30, plant_id: 1}, "Turbine");
app.stores.turbines.add(firstTurbine);
app.stores.turbines.sync();
}
return {firstTurbine: firstTurbine, firstPlant: firstPlant};
}
The getter function created by the belongsTo association takes a callback function as argument. The callback function will have the related object as its first argument.
turbine.getPlant(function(Plant){
console.log(Plant);
});
I will attach a full working example since this have cost me alot of headache and might have aswell for others.
first the json data:
{
"plants": [{
"id": 1,
"name": "Plant1",
"notes": ["Note1", "Note2"]
}],
"turbines": [
{
"id": 11,
"plant_id": 1,
"name": "T41",
"notes": ["Turbine note 1", "Turbine note 2"]
}]
}
And the javascript:
Ext.regApplication({
name: "app",
launch: function() {}
});
app.models.Plant = Ext.regModel("Plant", {
fields: ["id", "name", "notes"],
proxy: {
type: 'ajax',
url: 'data.json',
reader: {
type: 'json',
root: 'plants'
}
}
});
app.models.Turbine = Ext.regModel("Turbine", {
fields: ["id", "plant_id", "name", "notes"],
proxy: {
type: 'ajax',
url: 'data.json',
reader: {
type: 'json',
root: 'turbines'
}
},
belongsTo: 'Plant'
});
app.stores.plants = new Ext.data.Store({
model: "Plant"
});
app.stores.turbines = new Ext.data.Store({
model: "Turbine",
autoLoad: {
callback: function(records) {
var turbine = records[0];
turbine.getPlant(function(Plant){
console.log(Plant);
});
}
}
});