Hi i've been looking for the readOnly property for field in secnhatouch but haven't found it... can some one assist me on this matter
{
xtype: 'textfield',
name: 'ReferenceNumber',
readOnly:true,
label: 'Reference'
}
I ran into the same problem with readOnly: true not working - I was able to fix it by adding an afterrender listener:
{
xtype: 'textfield',
name: 'ReferenceNumber',
label: 'Reference',
listeners: {
afterrender: function(ele) {
ele.fieldEl.dom.readOnly = true;
}
}
}
I think you want the disabled field
{
xtype: 'textfield',
name: 'ReferenceNumber',
**disabled**: true,
value: '12312421',
label: 'Reference'
}
I overload the 'disabledCls' because it grey's out the label more than i want.
I was able to fix this by setting readOnly: null or readOnly: undefined:
{
xtype: 'textfield',
name: 'Website',
label: 'Website',
readOnly: null
}
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 }))
I have the following code in my View using the kendo grid:
<div id="MyGrid"
data-role="grid"
data-editable="true"
data-toolbar='[{ template: kendo.template($("#ToolbarTemplate").html()) }]'
data-columns='[
{ field: "Description" },
{ field: "Value" },
{ command: [{name: "destroy", template: kendo.template($("#DeleteTemplate").html())}], width: 60}
]'
data-bind="source: MyDataSource">
Then in a script section a have:
kendo.bind($("#MyGrid"), MyViewModel)
Everything is working fine. However, now I'm trying to implement a validation to let the user knows that any of the fields inside the Kendo Grid is required. I saw that it can be done in the schema as follow (Kendo doc link):
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
Is there a way to do the same in the div tag as the rest of the attributes? Does data-schema attribute exist?
Thanks in advance
You are missing the kendo validator initialization part in your code. Please refer the following links for documentation and demo
Documentation
Kendo Validator demo
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'
});
I have a jqGrid in MVC setup as:
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#list").jqGrid({
url: '/Home/DynamicGridData/',
datatype: 'json',
mtype: 'POST',
colNames: ['id', 'note', 'tax', 'PaymentType', 'CreatedByUsername', 'Actions'],
colModel: [
{ name: 'id', index: 'id', hidden: true, key: true, editable: true, editrules:{ required:false } },
{ name: 'note', index: 'note', width: 40,align:'center', editable: true, editrules: { required : true } },
{ name: 'tax', index: 'tax', width: 400, align: 'center', editable: true, editrules: { required : true } },
{ name: 'PaymentTypeId', index: 'PaymentTypeId', width: 400, align: 'center', editable: true, edittype:"select",
editoptions: { dataUrl: '/Home/PaymentTypes/' }},
{ name: 'CreatedByUsername', index: 'CreatedByUsername', hidden: true, editable: true, editrules:{ required:false } },
{ name: 'act',index:'act',width:55,align:'center',sortable:false,formatter:'actions',
formatoptions:{
keys: true, // we want use [Enter] key to save the row and [Esc] to cancel editing.
beforeSubmit:function(postdata, formid) {
alert("Hi");
jQuery("#ValidationSummary").show('slow');
},
},}
],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'Id',
sortorder: "desc",
viewrecords: true,
imgpath: '',
caption: 'My first grid',
editurl: '/Home/Save/'
});
jQuery("#list").navGrid('#pager', { edit: false, search: false, add: true });
});
</script>
When creating on submit it goes to the save method on the controller.
As you can see CreatedByUsername and id are hidden for normal view and edit.
When I add new data though I find that ModelState.IsValid = false.
I've managed to make it so that CreatedByUsername does not added an error to the ModelState even though no data is added for it on insert through editrules:{ required:false }.
The problem is this same piece of code doesn't work for the id and is adding an Error to the ModelState of "The id field is required."
Can anyone please tell me how to prevent this from happening for the id field?
The problem is that your id field has the key attribute and besides your validation rule this field is required. A workaround is to define a custom function for validation an always return true
Can you set the id field in your viewmodel to nullable? Like this:
public int? Id { get; set; }
If the id is not nullable, mvc will automatically create a validation error. If you're not using a viewmodel, but just using parameters on your save action, you can set the id parameter to nullable.
Hi im looking for a way to submit a form that contains multiple tabbed forms. The user must be able to submit the entire data from all tabs at a single submit by POST. The major problem is that the data wont submit unless it is explicitly rendered / opened and when submitting it does not include the other un-rendered tab forms. :(
Ive been looking for ways but in futile. Correct me if im wrong is this something to do with data-binding?
Sample code:
var fp = new Ext.FormPanel({
renderTo: 'parti2',
fileUpload: true,
width: 866,
frame: true,
title: ' ',
autoHeight: true,
bodyStyle: 'padding: 10px 10px 0 10px;',
labelWidth: 130,
waitMsgTarget: 'mm_loader',
defaults: {
anchor: '95%',
msgTarget: 'side'
},
{
/**** tab section ****/
xtype:'tabpanel',
plain:true,
activeTab: 0,
autoHeight:true,
defaults:{bodyStyle:'padding:10px'},
items:[{
/**** new tab section ****/
title:'Personal Details',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',
items:[{
xtype: 'textfield',
fieldLabel: 'First Name',
name: 'sec2_ab1',
},{
xtype: 'textfield',
fieldLabel: 'Middle Name',
name: 'sec2_ab2',
},{
xtype: 'textfield',
fieldLabel: 'Last Name',
name: 'sec2_ab3',
},{
xtype: 'textfield',
fieldLabel: 'Nationality',
name: 'sec2_ab4'
},{
xtype: 'textfield',
fieldLabel: 'Height',
name: 'sec2_ab13',
},{
xtype: 'textfield',
fieldLabel: 'Education',
name: 'sec2_ab15',
}]
},{
/**** new tab section ****/
layout:'form',
title: 'Contract info',
autoHeight:true,
defaults: {
anchor: '95%',
msgTarget: 'side'
},
defaultType: 'textfield',
items:[
{
xtype: 'textfield',
fieldLabel: 'Monthly Salary',
name: 'section_ab5',
},{
xtype: 'textfield',
fieldLabel: 'Work span',
name: 'section_ab4',
},{
xtype: 'fileuploadfield',
id: 'form-file',
fieldLabel: 'Photo',
allowBlank: true,
msgTarget: 'side',
name: 'anyfile1',
buttonCfg: {
text: '',
iconCls: 'upload-icon'
}
}]
},{
/**** new tab section ****/
title: 'Knowledge of Languages',
layout:'form',
autoHeight:true,
defaults: {
anchor: '95%',
msgTarget: 'side'
},
items:[combo_kl]
} ] /**** end tabs ****/
},{
html: ' ', autoHeight:true, border: false, height: 50, defaults: { anchor: '95%' }
}
,{
buttons: [{
text: 'Reset Form',
handler: function(){
fp.getForm().reset();
}
},{
text: 'Submit Form',
handler: function(){
if(fp.getForm().isValid()){
fp.getForm().submit({
method:'POST',
url: '?handler/save',
waitMsg: 'Please wait as the Resume is being Send...',
success: function(fp, o){
msg('Success', 'Processed file: "'+o.result.file+'" ');
},
fail: function(fp, o) {
msg('Fail', 'erronious');
}
});
}
}
}] // button end
}]
});
Try adding the following to your TabPanel declaration:
deferredRender: false
This tells the TabPanel to render all of it's child components immediately. Currently your TabPanel is only rendering visible components which is causing problems with the form submit.
Great! That worked perfectly fine now! Thanks! :)
I also found other way to submit the tab panel form's parameters, without deferredRer, altogether by adding:
params: fp.getForm().getFieldValues(true)
on the submit command. :)
fp.getForm().submit({
method: 'POST',
url: '?hander/save',
waitMsg: 'Please wait for the server response...',
params: fp.getForm().getFieldValues(true),
success: function (fp, o) {
msg('Success', 'Processed file: "' + o.result.file + '" ');
},
fail: function (fp, o) {
msg('Fail', 'erronious');
}
});