how to fix my api in kendo grid in angularjs - angularjs

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.

Related

How do I update individual fields in nested objects that are in arrays in MongoDB using Mongoose?

This is my first post so please bear with me. I am building a LinkedIn clone and I am trying to keep track of the work experience, projects and courses of the users, and those will be kept in an array of objects inside of the User schema. Now let's say a user will try to add or update one of the elements in one of those arrays, I have the user ID and I am passing it to findOneAndUpdate() as the filter.
Here is my User schema:
const userSchema = new mongoose.Schema({
user_id: {
type: String,
required: [true, 'User ID required.'],
unique: true,
immutable: true,
},
name: {
type: String,
required: [true, 'Name required.'],
},
email: {
type: String,
required: [true, 'Email required.'],
unique: true,
lowercase: true,
immutable: true,
},
title: {
type: String,
},
location: {
type: String,
},
phone_number: {
type: String,
},
contact_email: {
type: String,
},
photo: {
type: String,
},
website: {
type: String,
},
backdrop: {
type: String,
},
summary: {
type: String,
},
work: {
type: String,
},
connections: {
type: Number,
},
projects: [
{
title: {
type: String,
},
description: {
type: String,
},
start_date: {
type: Date,
},
end_date: {
type: Date,
},
technologies: {
type: String,
},
picture: {
type: String,
},
},
],
skills: [{
skill: {
name: {
type: String,
},
level: {
type: String,
},
},
}],
experience: [
{
company: {
type: String,
},
logo: {
type: String,
},
title: {
type: String,
},
location: {
type: String,
},
start_date: {
type: Date,
},
end_date: {
type: Date,
},
description: {
type: String,
},
},
],
education: [
{
school: {
type: String,
},
logo: {
type: String,
},
degree: {
type: String,
},
location: {
type: String,
},
start_date: {
type: Date,
},
end_date: {
type: Date,
},
description: {
type: String,
},
},
],
languages: [
{
name: {
type: String,
},
level: {
type: String,
},
},
],
awards: [
{
title: {
type: String,
},
date: {
type: Date,
},
awarder: {
type: String,
},
summary: {
type: String,
},
},
],
courses: [
{
title: {
type: String,
},
number: {
type: String,
},
school: {
type: String,
},
start_date: {
type: Date,
},
end_date: {
type: Date,
},
description: {
type: String,
},
},
],
});
And in my UserController.ts file, I tried using this:
const updateUser = async (req: Request, res: Response) => {
try {
const filter = { user_id: req.body.user_id };
const update = req.body;
const updatedUser = await User.findOneAndUpdate(filter, update, {
new: true,
upsert: true,
});
res.status(201).json({
status: 'success',
data: {
user: updatedUser,
},
});
} catch (err) {
res.status(400).json({
status: `ERROR: ${err}`,
message: 'error updating user',
});
}
};
And in my request using the format of the schema but that didn't work out as expected. I know mongoose will automatically give it an _id field to each of the individual objects in the array, but again, I have had no luck updating them. I tried sending a PATCH request with this as the body to add a skill like so:
{
"user_id": "xxxxxxxxxxxxxxxx",
"title": "Mr.",
"skills" : {
"name": "Flute",
"level": "Novice"
}
}
And this was the response I got. It created a skill but didnt add the data in the skill object:
{
"status": "success",
"data": {
"user": {
"_id": "63d3715f2ef9698667230a53",
"user_id": "xxxxxxxxxxxxxxxx",
"name": "Jonathan Abitbol",
"email": "yoniabitbol1#gmail.com",
"projects": [],
"skills": [
{
"_id": "63d4068d2df30c9e943e4608"
}
],
"experience": [],
"education": [],
"languages": [],
"awards": [],
"courses": [],
"__v": 0,
"title": "Mr."
}
}
}
Any help on how to add/edit the nested objects would be appreciated.

Advanced search with mongoose

I have an query object
const query = {
brand : BMW,
yearFrom : 2000,
yearTo : 2003,
price : 7000,
};
I am trying to find every BMW which is made between 2000 and 2003 included.
I am trying in this way but it doesn't work
if (query.yearFrom) {
return offerModel.find({query,year : {$gte : query.yearFrom }}, function(err,arr) {console.log(err,arr)}).skip(offset).limit(12);
}
Here's the mongoose schema
const mongoose = require('mongoose');
const offerSchema = new mongoose.Schema({
brand: {
type: String,
required: true,
},
model: {
type: String,
required: true,
},
year: {
type: Number,
required: true,
},
color: {
type: String,
required: true,
},
power: {
type: Number,
required: true,
},
mileage: {
type: Number,
required: true,
},
populatedState: {
type: String,
required: true,
},
price: {
type: Number,
required: true,
},
condition : {
type: String,
required: true,
},
doors: {
type: Number,
required: true,
},
description: {
type: String,
required: true,
},
transmission: {
type: String,
required: true,
},
engineType: {
type: String,
required: true,
},
category: {
type: String,
required: true,
},
imageURLs : [],
imageIds : [],
creator: {
type: mongoose.Types.ObjectId,
ref: 'user'
},
})
module.exports = mongoose.model('offers', offerSchema);
Sample data from database
_id:60fe98301b76642e04a31c45,
imageURLs:[],
imageIds : [],
brand:BMW,
model:335,
year:2000,
color:White,
doors:4,
power:130
mileage:30000,
populatedState:Sofia,
price:7000,
condition:Used,
description:qweqweqweqe,
transmission:Automatic gearbox,
engineType:Petrol,
category:Sedan,
creator:60fe97d11b76642e04a31c44,
__v:0,
If i put only query it find brand,model and etc.But it doesn't get year search correctly.
I will be glad if you guys have some ideas how can i fix that
Thanks !
Try this
offerModel.find({
$and: [
{ brand :query.brand },
year : {
$gte: query.yearTo,
$lt: query.yearFrom
}
]
}, function (err, results) {
...
}

I want to update kendo grid after update

$scope.AnomalyGrid = {
dataSource: new kendo.data.DataSource({
//data: AnomaliesList,
transport: {
read: {
url: logstar.url(getAnomalyItemUrl + '?id=' + id),
dataType: "json",
},
update: {
url: logstar.url(UpdateAnomalyItemUrl),
type: "POST",
dataType: "json"
This will update the value in server after that i want to refresh kendo grid or call read method of kendo grid. In the responce i am sending updated model .
................... Is there Any success function available after responce in kendo grid.
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
pageSize: 10,
autoSync: true,
batch: true,
schema: {
model: {
id: "CallID",
fields: {
equiptmentno: { editable: false, nullable: true },
currentposition: { validation: { required: true } },
isocode: { validation: { required: true } }
}
}
}
}),
columns: [
{ field: "equiptmentno", title: "Equiptment No" },
{ field: "currentposition", title: "currentposition" },
{ field: "isocode", title: "isocode" }
{ command: ["edit"] }
],
editable: {
mode: "popup",
}
};
update: { url: logstar.url(UpdateAnomalyItemUrl),
type: "POST",
dataType: "json",
complete: function (e) {
var gridEl = angular.element('#AnomalyGrid');
gridEl.data('kendoGrid').dataSource.read();
gridEl.data('kendoGrid').refresh();
}
}
It works responce come at complete segment of code

How to filter a kendo ui datasource serverside

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"]}

Kendo update scheduler options dynamically

I am using KendoUI scheduler with AngularJS.
I am declaring the scheduler options in accordance with the documentation, pretty standard stuff. See below:
What I would like to do is be able to update $scope.schedulerOptions and have those changes reflected in the UI. When I make changes to $scope.schedulerOptions nothing changes in the UI.
Any ideas on how to do this?
$scope.schedulerOptions = {
date: new Date("2013/6/13"),
startTime: new Date("2013/6/13 07:00 AM"),
height: 600,
views: [
"day",
{ type: "workWeek", selected: true },
"week",
"month",
],
eventTemplate: "<span class='custom-event'>{{dataItem.title}}</span>",
allDayEventTemplate: "<div class='custom-all-day-event'>{{dataItem.title}}</div>",
timezone: "Etc/UTC",
dataSource: {
batch: true,
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/tasks",
dataType: "jsonp"
},
update: {
url: "http://demos.telerik.com/kendo-ui/service/tasks/update",
type: "PUT"
},
create: {
url: "http://demos.telerik.com/kendo-ui/service/tasks/create",
type: "POST"
},
destroy: {
url: "http://demos.telerik.com/kendo-ui/service/tasks/destroy",
type: "DELETE"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
schema: {
model: {
id: "taskId",
fields: {
taskId: { from: "TaskID", type: "number" },
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 },
isAllDay: { type: "boolean", from: "IsAllDay" }
}
}
},
filter: {
logic: "or",
filters: [
{ field: "ownerId", operator: "eq", value: 1 },
{ field: "ownerId", operator: "eq", value: 2 }
]
}
},
resources: [
{
field: "ownerId",
title: "Owner",
dataSource: [
{ text: "Alex", value: 1, color: "#f8a398" },
{ text: "Bob", value: 2, color: "#51a0ed" },
{ text: "Charlie", value: 3, color: "#56ca85" }
]
}
]
};
According to this post at telerik forum you can change the values after initialization modifying HTML to <div kendo-scheduler="sched" k-options="options"></div> and the accessing sched as a model variable $scope.sched.setOptions(...);

Resources