I'm developing an application with jaydata, OData and web api. Source code is given below:
$(document).ready(function () {
$data.Entity.extend('$org.types.Student', {
Name: { type: 'Edm.String', nullable: false, required: true, maxLength: 40 },
Id: { key: true, type: 'Edm.Int32', nullable: false, computed: false, required: true },
Gender: { type: 'Edm.String', nullable: false, required: true, maxLength: 40 },
Age: { type: 'Edm.Int32', nullable: false, required: true, maxLength: 40 }
});
$data.EntityContext.extend("$org.types.OrgContext", {
Students: { type: $data.EntitySet, elementType: $org.types.Student },
});
var context = new $org.types.OrgContext({ name: 'OData', oDataServiceHost: '/api/students' });
context.onReady(function () {
console.log('context initialized.');
});
});
In above JavaScript code, I defined an entity named Student. In context.onReady() method, I'm getting the following error:
Provider fallback failed! jaydata.min.js:100
Any idea, how I could get rid of this error??
As per suggested solution, I tried to change the key from required to computed. But sadly its still giving the same error. Modified code is given below.
$(document).ready(function () {
$data.Entity.extend('Student', {
Id: { key: true, type: 'int', computed: true },
Name: { type: 'string', required: true}
});
$data.EntityContext.extend("$org.types.OrgContext", {
Students: { type: $data.EntitySet, elementType: Student },
});
var context = new $org.types.OrgContext({
name: 'OData',
oDataServiceHost: '/api/students'
});
context.onReady(function () {
console.log('context initialized.');
});
});
I thinks the issue is with Odata provider because I tried the same code with indexdb provider and its working properly.
The issue is caused by the value oDataServiceHost parameter. You should configure it with the service host, not with a particular collection of the service. I don't know if the provider name is case-sensitive or not, but 'oData' is 100% sure.
For WebAPI + OData endpoints the configuration should look like this:
var context = new $org.types.OrgContext({
name: 'oData',
oDataServiceHost: '/odata'
});
Related
I'm trying to correctly define OpenAPI spec for the purposes of generating api client from that spec. I've encoutered a problem where we have a complex query object with nested objects and arrays of objects for get a GET route.
Lets take these classes as an example.
class Person {
#ApiProperty()
name!: string
#ApiProperty()
location!: string
}
class CompanyDto {
#ApiProperty()
name!: string
#ApiProperty({
type: [Person],
})
employees!: Person[]
}
And a get request with #Query decorator.
#Get('test')
async testing(#Query() dto: CompanyDto): Promise<void> {
// ...
}
What I'm getting is.
{
get: {
operationId: 'testing',
parameters: [
{
name: 'name',
required: true,
in: 'query',
schema: {
type: 'string',
},
},
{
name: 'name',
in: 'query',
required: true,
schema: {
type: 'string',
},
},
{
name: 'location',
in: 'query',
required: true,
schema: {
type: 'string',
},
},
],
responses: {
'200': {
description: '',
},
},
tags: ['booking'],
},
}
I've also tries to define Query params by adding #ApiQuery decorator and it almost works.
#ApiQuery({
style: 'deepObject',
type: CompanyDto,
})
--
{
get: {
operationId: 'testing',
parameters: [
{
name: 'name',
required: true,
in: 'query',
schema: {
type: 'string',
},
},
{
name: 'name',
in: 'query',
required: true,
schema: {
type: 'string',
},
},
{
name: 'location',
in: 'query',
required: true,
schema: {
type: 'string',
},
},
{
name: 'name',
in: 'query',
required: true,
schema: {
type: 'string',
},
},
{
name: 'employees',
in: 'query',
required: true,
schema: {
type: 'array',
items: {
$ref: '#/components/schemas/Person',
},
},
},
],
responses: {
'200': {
description: '',
},
},
tags: ['booking'],
},
}
However now I'm getting duplicate query definitions mashed in to one. Is there a way to prevent or overwrite #Query definition? Or just a better way to define complex #Query in general?
Ended up creating a custom decorator to extract query without generating OpenAPI Spec.
export const SilentQuery = createParamDecorator(
(data: string | undefined, ctx: ExecutionContext) => {
const request = ctx.switchToHttp().getRequest()
if (data) {
return request.query[data]
} else {
return request.query
}
},
)
So now you can use #ApiQuery with deepObject style.
Also if your're using ValidationPipes with class-validator for example. Make sure to set validateCustomDecorators to true
#SilentQuery(new ValidationPipe({ validateCustomDecorators: true }))
This is a little mystifying to me.
I have a custom type defined on the client as such:
var store = manager.metadataStore;
store.addEntityType({
shortName: "ItemContainer",
autoGeneratedKeyType: AutoGeneratedKeyType.Identity,
dataProperties: {
id: { dataType: DataType.Int32, isNullable: false, isPartOfKey: true },
type: { dataType: DataType.Int32, isNullable: false },
isViewed: { dataType: DataType.Boolean, isNullable: false },
itemCount: { dataType: DataType.Int32, isNullable: false }
}
});
store.setEntityTypeForResourceName('Container', 'ItemContainer');
and this is what's passed from the server as an anonymous type (Fiddler):
[{"$id":"1","$type":"<>f__AnonymousType1`4[[System.Int32,mscorlib],
[System.Int32, mscorlib],
[System.Boolean, mscorlib],
[System.Int32, mscorlib]], XYZ",
"Id":43,"Type":1,"IsViewed":true,"ItemCount":19}]
When I examine the returned result on the client thru a breeze query, all the data is correct except the itemCount. The server code generating the type looks like this:
var c = Items.GroupBy(x => new { x.Item.ItemTypeID, x.IsViewed })
.Select(g => new { Id = ID, Type = g.Key.ItemTypeID, IsViewed = g.Key.IsViewed, ItemCount = g.Count() });
the g.Count() (LINQ Count Method) seems to be the culprit here. If I pass a plain integer, it works just fine. Maybe this function gets lazily evaluated, and breeze is not getting the value at the right time?
Thanks
I am using the free Kendo web controls. I have used the grid view in several places before and decided to use the popup style editing for my current project.
I have most of it working. I have three combo boxes for category, bank account and payee and when I edit an existing item, the model object passed back to my MVC action has the correct values in it. However, when I click on the create button, the three combo box values are returned as null to the controller.
Here is the CSHTML code for this view:
#using System
#using System.Linq
#{
ViewBag.Title = "Transactions";
}
#section Head
{
<link href="~/Content/kendo/kendo.common.min.css" rel="stylesheet" />
<link href="~/Content/kendo/kendo.default.min.css" rel="stylesheet" />
<script src="~/Scripts/kendo/kendo.web.min.js"> </script>
}
#section featured
{
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1>#ViewBag.Title</h1>
</hgroup>
</div>
</section>
}
<div id="grid"></div>
<script>
$(function() {
$("#grid").kendoGrid({
height: 350,
toolbar: [{ name: "create", text: "Create New Transaction" }],
columns:
[
{ field: "Date", width: "100px", template: '#= kendo.toString(Date,"MM/dd/yyyy") #' },
{ field: "Amount", format: "{0:c}", width: "100px" },
{ field: "Category", width: "80px", editor: categoryDropDownEditor, template: "#=Category.Name#" },
{ field: "BankAccount", title: "Account", width: "80px", editor: bankAccountDropDownEditor, template: "#=BankAccount.Name#" },
{ field: "Payee", width: "80px", editor: payeeDropDownEditor, template: "#=Payee.Name#" },
{ command: ["edit", "destroy"], title: " ", width: "160px" }
],
editable: { mode: "popup", confirmation: "Are you sure you want to delete this transaction?" },
pageable:
{
refresh: true,
pageSizes: true
},
sortable: true,
filterable: false,
dataSource:
{
serverPaging: true,
serverFiltering: true,
serverSorting: true,
pageSize: 7,
schema:
{
data: "Data",
total: "Total",
model:
{
id: "Id",
fields:
{
Id: { editable: false, nullable: true },
Date: { type: "Date" },
Amount: { type: "number", validation: { required: true, min: 0 } },
Category: { validation: { required: true } },
BankAccount: { validation: { required: true } },
Payee: { validation: { required: true } },
Note: { validation: { required: false } }
}
}
},
batch: false,
transport:
{
create:
{
url: "#Url.Action("Create", "Transaction")",
contentType: "application/json",
type: "POST"
},
read:
{
url: "#Url.Action("Read", "Transaction")",
contentType: "application/json",
type: "POST"
},
update:
{
url: "#Url.Action("Update", "Transaction")",
contentType: "application/json",
type: "POST"
},
destroy:
{
url: "#Url.Action("Delete", "Transaction")",
contentType: "application/json",
type: "POST"
},
parameterMap: function(data)
{
return JSON.stringify(data);
}
}
}
});
function categoryDropDownEditor(container, options)
{
$('<input required data-text-field="Name" data-value-field="Id" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList(
{
autoBind: true,
dataValueFileld: "Id",
dataTextField: "Name",
dataSource:
{
type: "json",
transport: { read: "#Url.Action("GetCategories", "Transaction")" }
}
});
}
function bankAccountDropDownEditor(container, options)
{
$('<input required data-text-field="Name" data-value-field="Id" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList(
{
autoBind: true,
dataValueFileld: "Id",
dataTextField: "Name",
dataSource:
{
type: "json",
transport: { read: "#Url.Action("GetBankAccounts", "Transaction")" }
}
});
}
function payeeDropDownEditor(container, options)
{
$('<input required data-text-field="Name" data-value-field="Id" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList(
{
autoBind: true,
dataValueFileld: "Id",
dataTextField: "Name",
dataSource:
{
type: "json",
transport: { read: "#Url.Action("GetPayees", "Transaction")" }
}
});
}
});
</script>
The binding to the kendo combo box must be working, otherwise the edit would fail as well. All I can think is that the object is not created correctly. Also, it selects the first item in the combo box by default, but even so, does not bind the value.
Following is the code for my create and update actions:
[HttpPost]
public ActionResult Create(TransactionModel transactionModel)
{
var transaction = _moneyBO.CreateTransaction();
Mapper.Map(transactionModel, transaction);
_moneyBO.UpdateTransaction(transaction);
return Json(Mapper.Map<TransactionModel>(transaction));
}
public ActionResult Update(TransactionModel transactionModel)
{
var transaction = _moneyBO.Transactions.SingleOrDefault(x => x.Id == transactionModel.Id);
if (transaction == null)
return View("NotFound");
Mapper.Map(transactionModel, transaction);
_moneyBO.UpdateTransaction(transaction);
return Json(Mapper.Map<TransactionModel>(transaction));
}
I have not found a good example using the popup custom edit. The example on the Kendo site works inline, but if you change the example to popup it does not work.
I have a same problem. Write, if you solve it, please
I found, that Kendo think that "null" (default for int?) is ObservableObject (while initialization of ComboBox), thats why it can't be parsed to "number". If you edit item (not create), value id not "null" and model bindind work's fine
Not sure if it's the only issue here but in your code example it looks like the initialization of your dropdown isn't quite correct. You have written dataValueFileld which should be dataValueField
kendoDropDownList({
autoBind: true,
dataValueFileld: "Id", <-- Incorrect spelling
dataTextField: "Name",
dataSource:
{
type: "json",
transport: { read: "#Url.Action("GetPayees", "Transaction")" }
}
});
I need some help from you in using igTree when LoadOnDemand is set to true.
I have a WCF REST Service which is giving me data to populate in igTree.
Please find the sample code..
$.ajax(
{
type: "GET",
url: "AssessmentProcWCFService.svc/GetAllEntities",
contentType: "application/json; charset=utf-8",
dataType: 'json',
data: '{}',
cache: false,
success: OnGetAllEntitiesSuccess,
error: OnGetAllEntitiesFailure
});
==================================================
function OnGetAllEntitiesSuccess(categoryList) {
$("#APTreeView").igTree({
animationDuration: 0,
dataSourceType: 'json',
dataSource: categoryList.d,
initialExpandDepth: false,
loadOnDemand: true,
dataSourceUrl: "AssessmentProcWCFService.svc/GetAllCategories?EntityID=primaryKey:id",
bindings: {
textKey: 'text',
valueKey: 'id',
primaryKey: 'id',
expanded: 'expanded',
childDataProperty: 'children'
}
});
}
=========================================================
Questions:-
How could I send the selected node ID to the Service when any node of the tree is expanding?
The way I am sending in the above example it is not working when I am retrieving it in the service “public List GetAllCategories()” like
“string entityID = HttpContext.Current.Request.QueryString["EntityID"];”
I am getting entity id as null.
How the tree get rendered when any node get expanded if LoadOnDemand is true?
Please help me on this I have spend lot of time in it.
Basically you can encode anything you like in the request made to the service:
Here are the default request parameters explained: http://www.infragistics.com/community/forums/t/65356.aspx
And here is how you can add a request parameter:
function OnGetAllEntitiesSuccess(categoryList) {
$("#APTreeView").igTree({
animationDuration: 0,
dataSourceType: 'json',
dataSource: categoryList.d,
initialExpandDepth: false,
loadOnDemand: true,
dataSourceUrl: "AssessmentProcWCFService.svc/GetAllCategories?EntityID=primaryKey:id",
bindings: {
textKey: 'text',
valueKey: 'id',
primaryKey: 'id',
expanded: 'expanded',
childDataProperty: 'children'
},
nodePopulating: function (event, ui) {
var node = '&SelectedNodeID=' + $("#APTreeView").igTree('selectedNode').element.attr('data-value'),
myNewUrl = 'AssessmentProcWCFService.svc/GetAllCategories?EntityID=primaryKey:id' + node;
$('#myTree').igTree('option', 'dataSourceUrl', myNewUrl);
}
});
}
My application grid is loading data using the webservice URL to fill grid with coming data. When Im giving URL like
function gridSectionResources()
{
Ext.define('Person', {
extend: 'Ext.data.Model',
fields: ['EmployeeID', 'FirstName', 'LastName','Designation','Role','BillingRate','SignedOn','SignedOff']
});
var store = Ext.create('Ext.data.Store', {
autoLoad: true,
//autoSync: true,
model: 'Person',
proxy: {
type: 'rest',
url:'http://localhost:2012/HBWebService/ws/employees',
// url:'js/Manager/data.json',
reader: {
type: 'json',
root: 'Project'
},
writer: {
type: 'json'
}
}
});
Working fine but
If I'm giving url:'http://172.166.11.9:2012/HBWebService/ws/employees'. It is not working
You must use JsonP proxy for getting data from another domain.
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.proxy.JsonP
Ext.define('Person', {
extend: 'Ext.data.Model',
fields: ['EmployeeID', 'FirstName', 'LastName','Designation','Role','BillingRate','SignedOn','SignedOff']
});
var store = Ext.create('Ext.data.Store', {
autoLoad: true,
//autoSync: true,
model: 'Person',
proxy: {
type: 'jsonp',
url:'http://localhost:2012/HBWebService/ws/employees',
// url:'js/Manager/data.json',
reader: {
type: 'json',
root: 'Project'
},
writer: {
type: 'json'
}
}
});