I've just started working with extjs 4 and I'm trying to use it alongside asp.net MVC 3. I'm having trouble setting up a typical form for editing a record where one of the fields uses a ComboBox. I cant seem to find an elegant way to bind the initial selected value to the value of a property on my model. Does anyone have any suggestions. I would think this should be simple to accomplish. Here's my form so far... Thanks in advance.
{
xtype: 'form',
items: [
{
xtype: 'combobox',
fieldLabel: 'Group',
displayField: 'Name',
valueField: 'GroupId',
store: 'GroupStore',
allowBlank: false,
forceSelection: true,
editable: false,
queryMode: 'local'
},
{
xtype: 'textfield',
name: 'Description',
fieldLabel: 'Description'
}
]
}
Related
i currently building a react app with ant-design UI. I have a problem regarding form. So far, i already able to create and submit normal form. But as i tried to create a more complex form, i faced these problem:
I want to create a form with input like this:
code: string,
name: string,
order: {
itemid: number,
qty: number
}
the 'order' part is an array, which means i can have more than 1 order in one form. I want to create that part of the form by using component in antd, where i can render the column like this:
{ title: L('Item Id'), width: 150, render: (text: string, item: any, index: any) => (
<Form.Item {...formItemLayout}>
{getFieldDecorator('order[' + index + '].itemid', {
rules: [{
required: true, message: 'Please select id!'
}]
})(
<ItemIdSelectInput/>
)}
</Form.Item>
) }
Can i use the table like that?
Also, as far as i know, component must have a 'datasource' in order to be used, while i want to create a 'Create' form where has no initial value (empty). Is there any reference or a better way to create this kind of form in antd? Thanks in advance!
I have 2 select tags, the first is Teams and the second is for member ! I want the second select tag to be filled depending on the selection of the Team.
Example :
Team1 has user1 and user2
Team2 has user3 and user4
I want if if I select the team1 the second select tag would have only the values of its members which will be user1 and user2.
PS: I know how to invoke ajax and pass them to controller and deal with params, I just want to know if there is any way I can get the current value in view and pass to the next select tag
You can do by ajax calls and select2 option population, firstly write a change event like(expecting that you already included select2 in js source)
$('#first-select').change(function(event) {
var first_element;
first_element = $(this);
$.ajax({
beforeSend: function() {
$('#second-select').empty();
},
url: 'your ajax url',
type: 'GET',
dataType: 'JSON',
data: {
role_id: first_element.val()
},
success: function(data) {
$('#second-select').select2({
data: data,
placeholder: 'Select User',
allowClear: true
});
}
});
});
create a action to deliver the users list for a given team id in format json.
And it's done.
Complete newbie to web2py... I want to make the check box at the bottom of the form appear conditionally only if a user is an admin-user. How can I address the name of the field so that I can change if a a non admin user doesn't see it?
I'm using a for loop to have a looping variable to reference, not sure that i need it...
## create all tables needed by Technical Request Form
db.define_table('technical_request',
Field('uuid', 'string', default=uuid.uuid4(), readable=False, writable=False),
Field('firstname', requires=IS_NOT_EMPTY(error_message='All Fields are Required!'), label="First Name"),
Field('lastname', requires=IS_NOT_EMPTY(error_message='All Fields are Required!'), label="Last Name"),
Field('phone', requires=IS_NOT_EMPTY(error_message='All Fields are Required!'), label="Phone Number"),
Field('email', requires=IS_NOT_EMPTY(error_message='All Fields are Required!'), label="Email"),
Field('issue_name', requires=IS_NOT_EMPTY(error_message='All Fields are Required!'),label="Subject"),
Field('about_issue', 'text', requires=IS_NOT_EMPTY(error_message='All Fields are Required!'), label="Description of issue "),
Field('issue', 'upload', label="Attach Files "),
Field('request_processed', 'boolean', default=False, readable = False),
auth.signature)
for field in db.technical_request:
if field.name == 'request_processed' and auth.has_group_membership("systemadmin"):
field.readable = True
This is the check box I want to hide ....
Follow up question *
Is there a way I can conditionally add the Field?
No need to loop -- you can just access the field directly via its name:
db.technical_request.request_processed.readable = auth.has_group_membership("systemadmin")
Or just do it when defining the field:
Field('request_processed', 'boolean', default=False,
readable=auth.has_group_membership("systemadmin"))
I've created a JIRA gadget that has a multiselect field which by default (isConfigured == "false") has no field selected. Is it possible to have the default, when the gadget is first added to the dashboard that multiselect items are selected?
You can do this. Apply these changes to your gadget.xml file:
...
<UserPref name="projectId" display_name="Project" datatype="select" default_value="My def value"/>
...
fields: [
{
userpref: "projectId",
label: "Project",
type: "select",
selected: this.getPref("projectId"),
options: projects
},
...
More code you can find here: JIRA - list projects in configuration and remember selection
I have a jqGrid:
$('#jqgFileInfoList').jqGrid({
url: '#Url.Action("GetFiles", "File")',
datatype: 'json',
mtype: 'POST',
colNames: ['Id', 'Name', 'Interface', 'Amount', 'Type', 'Created', 'Status'],
colModel: [
{ jsonmap: 'Id', name: 'Id', formatter: 'integer', align: 'right', hidden: true },
{ jsonmap: 'Name', name: 'Name', align: 'right', hidden: true },
{ jsonmap: 'InterfaceName', name: 'InterfaceName', align: 'left', width: '100%', sorttype: 'text', frozen: true, search: true },
{ jsonmap: 'Amount', name: 'Amount', formatter: 'currency', align: 'right', width: '100%', sorttype: 'number', search: true },
{ jsonmap: 'Type', name: 'Type', align: 'right', width: '100%', sorttype: 'text', search: true },
{ jsonmap: 'RunDate', name: 'RunDate', formatter: 'date', align: 'right', width: '100%', sorttype: 'date', search: true },
{ jsonmap: 'Status', name: 'Status', align: 'right', width: '100%', sorttype: 'text', formatter: formatStatus, search: true }
],
sortname: 'RunDate',
sortorder: 'desc',
pager: $('#jqgPagerFileInfoList'),
rowNum: 5,
viewrecords: true,
height: '100%',
autowidth: true,
refresh: true,
ignoreCase: true,
jsonReader: {
repeatitems: false,
root: "rows"
},
altRows: true,
altclass: 'jqGridAltRow',
loadComplete: function () {
$("tr.jqgrow:odd").addClass('jqGridAltRow');
}
});
$('#jqgFileInfoList').jqGrid('filterToolbar', { searchOnEnter: false, enableClear: true, stringResult: true });
Filtering is working, except for a couple columns I want to modify.
The Created/RunDate column I would like to filter a range somehow. Picking a single date is not useful.
The Interface, Type and Status columns I would like to use drop downs. What's the best way to do this?
I find the jqGrid documentation VERY difficult to follow, there are just so many options. It took me an hour to figure out that I needed stringResult: true to get my filter options into the GridSettings.Where property in the controller.
And if it matters, it's a .Net 4.0, MVC app.
EDIT: Bonus Question: How do I make it case insensitive.
I agree that the official documentation can be used only more as reference and not as the introduction for developer who start to use it, especially not for .NET developer.
To your questions:
1) There are no simple way to implement searching by range of dates. One could make some tricks like the trick described here. The usage of beforeSearch callback of filterToolbar or onSearch callback of advanced searching allows to "pre-process" searching filter before it will be applied, but all together is very tricky. In case of usage server side sorting you can implement the same on the server side directly.
2) There are many ways to implement drop downs in jqGrid. The main alternatives are the usage of value or dataUrl properties of searchoptions. The best choice depend on your exact requirements.
The usage of value is very practical if the column have some small set of values which are more static as dynamic. For example if you use formatter: "checkbox" in the grid to display boolean data as checkboxes you would like sure to use drop downs in the filter for the column. In the case the usage of settings like below
stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":All;true:Yes;false:No" }
will be very practical. By the way you can use value in the object form
value: {"": "All", true:"Yes", false: "No"}
In other cases if you have small number of values you can use value to implement dropdowns in the searching filter.
The usage of dataUrl one should use if the list of the values you get dynamically from the database. I can address you to the answer which explains the main idea of the corresponding implementation.
The answer shows simple pure JavaScript code which demonstrate how one can implements selects and autocomplete on the client side only. In case of server side paging and filtering one should choose another implementation way. The answer shows how one can implement jQuery UI Autocomplete in ASP.NET MVC solution.
I think that jQuery UI Autocomplete could be good alternative to select in some cases, especially if the number of possible options is very large.
UPDATED: There are many ways to make searching case insensitive. In case of usage local searching (usage datatype other as "json" or xml" or usage of loadonce: true) one should just use ignoreCase: true option of jqGrid. In case of server side searching you should make searching insensitive on the server side. I use personally just COLLATE during filtering. For example instead of constructs like
WHERE Name LIKE ('%' + #s + '%')
I use
WHERE Name COLLATE SQL_Latin1_General_CP1_CI_AS LIKE ('%' + #s + '%')
One more small remarks about the code which you posted:
use always gridview: true option. See the answer for more details.
specify the pager always in the form pager: "#jqgPagerFileInfoList" instead of the form pager: $("#jqgPagerFileInfoList").
don't use non-existing options like refresh: true
I recommend you to use autoencode: true option to force interpret the data returned from the server as text and not as HTML fragments. Without the options you could have problems to display textes having <, & etc.
I recommend you examine default values of colModel properties (see the documentation). you will see that you can remove from your code align: 'left', sorttype: 'text', search: true etc.
You should use permitted vales for properties of colModel. For example width: '100%' is incorrect and will be interpreted as default value width: 150.
all values which you use for jsonmap are the same as the value of name property. So you can remove the values.
I recommend you remove hidden column name: 'Id'. jqGrid use id attribute of <tr> which represent rows of grid. You use repeatitems: false inside of jsonReader. You can add in jsonReader the property id: "Id" to specify that jqGrid should use "Id" property of items from the row data for rowids.