Can I have multiple inputs for any given type?
I am trying to customize the query builder by adding two date range pickers (from date and to date) to each rule.
filters: [
{
id: 'category',
label: 'Category',
type: 'integer',
input: 'select',
values: {
1: 'Books',
2: 'Movies',
3: 'Music',
4: 'Tools'
},
{
id: 'date',
label: 'Date Range Picker',
type: 'date',
validation: {
format: 'YYYY/MM/DD'
},
plugin: 'datepicker',
plugin_config: {
format: 'yyyy/mm/dd',
todayBtn: 'linked',
todayHighlight: true,
autoclose: true
}
}
after select Category I want to display from Date & to Date input picker
Related
I am using jquery.maskedinput-1.3.js
In column 1, are the phone types. In column 2 the phone numbers.
{ name: 'PhoneTypeId', index: 'PhoneTypeId', hidden: true, editable: true, sortable: true},
{ name: 'Phone', index: 'Phone', width: 150, editable: true, editoptions: { dataInit: function (elem) { $(elem).mask("(999) 999-9999"); }, dataEvents: [{ type: 'change', fn: function (e) { hasChanges=true } }]}, editrules:{required: true}, sortable: true },
I'd like to dynamically change the mask based on the type of phone. Is this possible?
My data is json serialized objects:
datatype: "local",
data: #Html.Raw(ViewBag.Phones)
editurl: 'clientArray'
Thanks,
Gen
You can add change event (using dataInit) of the phone type and based on this you can change the mask (if this plugin allows this). Initially when you start editing (depending on the edit type - form edit or inline edit) you can use some events before editing by example beforeShowForm for form edit or beforeEditRow for inline edit. If you use Guriddo jqGrid JS you can look at the documentation here
EDIT:
In case the field phonetype is not editable by the user then
{ name: 'Phone', index: 'Phone', width: 150, editable: true,
editoptions:{
dataInit: function (elem, options) {
// use the id of the row
var id = options.rowId;
// content of the phonetype cell
var phonetypeval = $(this).jqGrid('getCell', id, 'PhoneTypeId')
if( phonetypeval === 'something') {
mask = 'mask1';
} else {
mask = 'mask2';
}
$(elem).mask(mask);
},
dataEvents: [{
type: 'change', fn: function (e) { hasChanges=true } }
]}
, editrules:{required: true},
sortable: true}
Note that this code is valid for inline and form edit.
I am having table in which date column is in extreme right position.
When i click on it i can't see whole calendar.
hot = new Handsontable(container, {
data: getCarData(),
colHeaders: ['Car', 'Model', 'Registration test', 'Price', 'Registration date'],
columns: [
{
type: 'autocomplete',
source: ['Audi', 'BMW', 'Chrysler', 'Citroen', 'Mercedes', 'Nissan', 'Opel', 'Suzuki', 'Toyota', 'Volvo'],
strict: false
},
{
// 2nd cell is simple text, no special options here
},
{
type: 'text'
},
{
type: 'numeric',
format: '$ 0,0.00'
},
{
type: 'date',
dateFormat: 'MM/DD/YYYY',
correctFormat: true,
defaultDate: '01/01/1900'
}
]
});
Please check the js fiddle.
http://jsfiddle.net/hemantmalpote/Lc8r4n6z/
My CKEDITOR plugin needs to create <select size="15"><option ...></select>, but the size attribute is not directly supported by the creation mechanism. I have tried various ways of adding the size attribute after creation, but so far no joy. Here is what I have; the select is created but it does not get the size attribute.
CKEDITOR.dialog.add('macrosDialog', function(editor) {
return {
// Basic properties of the dialog window: title, minimum size.
title: 'Cadenza Macros',
resizable: CKEDITOR.DIALOG_RESIZE_BOTH,
minWidth: 400,
minHeight: 200,
// Dialog window contents definition.
contents: [
{
// Definition of the Basic Settings dialog tab (page).
id: 'tab-basic',
label: 'Basic Settings',
// The tab contents.
elements: [
{
type: 'select',
id: 'groups',
name: 'groups',
label: 'Groups',
style: "height: 300",
items: [ [ 'Core Scala' ], [ 'Create Courses with Micronautics Cadenza' ], [ 'Java / Scala Interoperability' ], [ 'Play Framework' ] ],
'default': 'Play Framework'
},
{
// Text input field for the macro title (explanation).
type: 'text',
id: 'macroComment',
label: 'Comment',
validate: CKEDITOR.dialog.validate.notEmpty("Explanation field cannot be empty")
}
]
}
],
onLoad: function(e) {
var groups = editor.document.getElement("groups");
groups.setAttribute("size", 15);
//$("#groups").setAttr("size", 15);
},
onChange: function(e) {
alert('Group: ' + this.getValue());
},
// This method is invoked once a user clicks the OK button, confirming the dialog.
onOk: function() {
// The context of this function is the dialog object itself.
// http://docs.ckeditor.com/#!/api/CKEDITOR.dialog
var dialog = this;
// Creates a new <abbr> element.
var abbr = editor.document.createElement('abbr');
// Set element attribute and text, by getting the defined field values.
abbr.setAttribute('title', dialog.getValueOf('tab-basic', 'title'));
abbr.setText(dialog.getValueOf('tab-basic', 'abbr'));
// Finally, inserts the element at the editor caret position.
editor.insertElement(abbr);
}
};
});
I used the html element to insert whatever I wanted:
contents: [
{
id: 'macrosDialog',
label: 'Basic Settings',
// The tab contents.
elements: [
{
type: 'hbox',
id: 'lists',
//style: "vertical-align: top",
widths: [ '25%', '25%', '25%', '25%' ],
children: [
{
type: 'html',
id: 'groups',
name: 'groups',
html: '<select size="15"></select>'
},{
type: 'html',
id: 'courses',
name: 'courses',
html: '<select size="15"></select>'
},{
type: 'html',
id: 'sections',
name: 'sections',
html: '<select size="15"></select>'
},{
type: 'html',
id: 'lectures',
name: 'lectures',
html: '<select size="15"></select>'
},
],
onLoad: function(data) {
var dialog = this.getDialog();
var groups = dialog.getContentElement('macrosDialog', 'lists', 'groups');
console.log(groups);
var courses = dialog.getContentElement('macrosDialog', 'lists', 'courses');
console.log(courses);
var sections = dialog.getContentElement('macrosDialog', 'lists', 'sections');
console.log(sections);
var lectures = dialog.getContentElement('macrosDialog', 'lists', 'lectures');
console.log(lectures);
}
}
]
}
]
I am very new to sencha touch, and i am using Architect. I have a controller "RegisterUser"(controlleractiontap) which has a function.. when i fill in some user data and I click register button in my formview it will write the user to my local database.
I have a model called "userModel" which contains the following:
fields: [
{
name: 'Username',
type: 'string'
},
{
name: 'Password',
type: 'string'
},
{
name: 'Firstname',
type: 'string'
},
{
name: 'Lastname',
type: 'string'
},
{
name: 'Phonenumber',
type: 'string'
},
{
name: 'Email',
type: 'string'
}
],
validations: [
{
type: 'presence',
field: 'Username'
},
{
type: 'email',
field: 'Email'
},
{
type: 'length',
field: 'PhoneNumber',
max: 10,
min: 10
}
the problem: how do i call my validators in the controller so it will validate the fields in my form?
if i missing some information to make it more clear just let me now.
Thanks in advance!
var val=Ext.create('talkbag.model.Registration',new Ext.getCmp("registration").getValues());
where "registration" is the id assigned to the view that extends Ext.form.Panel
var check=val.validate();
now you can check like this if (!check.isValid())
Am I just missing something simple here? Without going into custom formatting, I'd just like to use my ID values for the ID parameter in the showlink formatter. Here is an example of my sub-grid:
subGridRowExpanded: function (subgrid_id, row_id) {
var subgrid_table_id = subgrid_id + '_t';
$('#' + subgrid_id).html('<table id="' + subgrid_table_id + '" class="scroll" />');
$('#' + subgrid_table_id).jqGrid({
datatype: 'local',
colNames: ['Order Number', 'Request Type', 'Owner', 'Order Status', 'Status Date'],
colModel: [{
name: 'orderid',
index: 'orderid',
width: 150,
key: true,
formatter: 'showlink',
formatoptions: { baseLinkUrl: 'AOFOrderFacilities.aspx', idName: 'orderid' }
}, {
name: 'type',
index: 'type',
width: 100
}, {
name: 'owner',
index: 'owner',
width: 200
}, {
name: 'status',
index: 'status',
width: 150
}, {
name: 'date',
index: 'date',
width: 150
}],
sortname: 'num',
sortorder: 'asc',
height: 'auto'
});
// TODO: Make this into an AJAX call. This is just for demo.
var mysubdata = [
{ orderid: 'O00001234', type: 'Data', owner: 'Melanie Martin', status: 'Saved', date: '2/4/2011 11:48:18 AM' },
{ orderid: 'O00001235', type: 'Voice', owner: 'Billy Solomon', status: 'Submitted to TC', date: '2/4/2011 12:03:47 PM' }
];
for (var i = 0; i <= mysubdata.length; i++)
jQuery('#' + subgrid_table_id).jqGrid('addRowData', i + 1, mysubdata[i]);
}
When the links in the first column of the grid are rendered, they correctly display the orderid value as the text of the column (the pre-pended "O" is intentional, and should be passed through the system like that), but the resulting links are:
http://localhost/somestuff/AOFOrderFacilities.aspx?orderid=1
http://localhost/somestuff/AOFOrderFacilities.aspx?orderid=2
And so on, where the ID parameter value is the ordinal index of the grid row rather than the desired value from the data. Is there an easy way to use the value from the data instead?
The format option idName of the formatter showlink say only that the name the parameter in the url which you need. The value of the id is always the rowid. In your example you use
var mysubdata = [
{ orderid: 'O00001234', type: 'Data', owner: 'Melanie Martin',
status: 'Saved', date: '2/4/2011 11:48:18 AM' },
{ orderid: 'O00001235', type: 'Voice', owner: 'Billy Solomon',
status: 'Submitted to TC', date: '2/4/2011 12:03:47 PM' }
];
for (var i = 0; i <= mysubdata.length; i++)
jQuery('#' + subgrid_table_id).jqGrid('addRowData', i + 1, mysubdata[i]);
which give as the rowid of the rows the values 1,2, mysubdata.length. The setting key:true for the column orderid will be ignored by the method addRowData. You can verify in Developer Tools or in Firebug which id has <tr> elements of your grid.
I recommend you to modify the above code or just use data:mysubdata as a additional parameter of jqGrid instead of the usage more slow old method addRowData. Because you defined key:true all should work correct. You can also use localReader:{id:'orderid'} as additional jqGrid parameter.
Not sure if you guys have solved this yet BUT I got it to send across the id of my choice by setting the json reader as follows:
jsonReader: {
repeatitems: false,
id: "[property whose value you want to pass]"
},
Rich