I have a Ext.grid.Panel with Ext.grid.plugin.RowEditing plugin.
It's working fine, but I need to limit the size of 2 string fields to avoid insert/update exceptions coming from DB.
I have tried maxLength property in Grid column and validations: [ {type: 'length', field: 'no_fornecedor', max: 49} ] in the Ext.data.Model. But none worked, ExtJS still lets user type as many text as he wants and update with no warning.
Got it!
In the column we must add the following editor property:
{
header: 'name',
dataIndex: 'id',
flex: 1,
editor: {
allowBlank: false,
maxLength: 49
}
}
Related
I like to change the Type field drop down option depending on the inputs of Year and Level fields.
I am able to trigger an event when Level is change.
But how do I get the value of the Year field?
Portion of the code are as follows
colModel:[
{name:'Year',index:'Year', width:70,sortable:false,editable:true,align:'center',editoptions:{size:15, maxlength:4}, formoptions:{ rowpos:1, label: "Year (*)"},editrules:{required:true}},
{name:'Level',index:'Level', width:70,sortable:false,editable:true,align:'center',edittype: "select", editoptions: { value: '1:1;2:2;3:3;4:4;5:5;6:6', defaultValue:'1', dataEvents : [
{
'type' : 'change',
'fn' : function ( el ) {
// get the newly selected value from the user
var levelz = $(el.target).val(), yearz ;
var row = $(el.target).closest('tr.jqgrow');
var rowid = row.attr('id');
//yearz = ??
if (parseInt(levelz)==5 || parseInt(levelz)==6)
{
if (parseInt(yearz)>2017)
{
$("#gridmain").jqGrid('setColProp','Term', {editoptions: { value: '1:Sem 1;4:Sem 2;6:EY;9:OVR', defaultValue:'Sem 1'}} );
}else{
$("#gridmain").jqGrid('setColProp','Term', {editoptions: { value: '', defaultValue:''}} );
}
}else{
$("#gridmain").jqGrid('setColProp','Term', {editoptions: { value: '1:TA1/CT1;2:TA2-before 2013;3:MY/TA2/CT2;4:TA3/CT3;5:TA4-before 2013;6:EY/TA4/CT4;9:OVR;D:CW1;E:CW2;F:CW3;G:CW4', defaultValue:'TA1'}} );
}
}
}]}, formoptions:{ rowpos:2, label: "Level (*)"},editrules:{required:true}},
{name:'Term',index:'Term', width:70, sortable:false,editable: true,align:'center',edittype: "select", editoptions: { value: '1:TA1/CT1;2:TA2-before 2013;3:MY/TA2/CT2;4:TA3/CT3;5:TA4-before 2013;6:EY/TA4/CT4;9:OVR;D:CW1;E:CW2;F:CW3;G:CW4', defaultValue:'TA1'}, editrules: { required: true }, formoptions:{ rowpos:3, label: "Type"}},
The codes are from piecing together what I read from google search...
I face 2 issues:
1) I don't know how to get the Year value
2) The drop down option list doesn't seems to change. - hmm it seems that if I close the edit form and open again, the Type field drop down option changes. What I need is to change the option on the fly - wonder how this can be done...
After much googling, managed to get the ans from Oleg's post as shown here
Also from his example, I derive the year value:
var yearz = $("#Year.FormElement", form[0]).val();
I am trying to make a grid groupable on columns field but the columns are object.
{
Gestionnaire :
{ id: 4, nom:'nomgestionnaire'},
{..},
..
}
I have success for sortable:
columns: [
field: "Gestionnaire"
title: "Gestionnaire"
sortable:
compare: (a,b) =>
#compareColumnFields(a.Gestionnaire.Nom, b.Gestionnaire.Nom)
]
with #compareColumnFields function is :
if a is b
return 0
else if a > b
return 1
else
return -1
and for groupable?
groupable : ...
I think you're wanting to allow the user to actively group columns.
In that case, all you need is:
groupable: true
in the main structure of the grid.
For example:
$('#grid').kendoGrid({
columns: [
{
fields: "Guestionaire",
title: "Guestionaire",
sortable:
compare: (a,b) =>
#compareColumnFields(a.Guestionaire.Nom, b.Guestionaire.Nom)
},
{...placeholder for other columns...}
],
groupable: true
});
Kendo has a sample of this at http://dojo.telerik.com/ejehe
Ignore the SelectRow and Expand/Collapse stuff and that ought to be the same as what you're trying to accomplish.
For those in the same situation as me , I completely change solution. Instead of making me a function that returns true and false , it giving it the object in full, I just give the string .
For my example I give directly a.Gestionnaire.Nom and b.Gestionnaire.Nom, and THEN you can call :
groupable: true
In fact it was obvious.
I want to add the concept of loop in my jsp file
I work with extjs 4
I have a textField , in this field I should enter a text ,
my goals is after the caractere number five , a query will be runned and will retreive a data from database ( this data is the list of emplyees which corresponds to entered data in the textfield
so the textfield will be like a combobox ( meaning that will contain a list of emplyees )
I think that this concept will work with Ajax
currently I have this code :
xtype: 'textfield',
fieldLabel: 'test',
id: 'nameEmployee',
flex: 1,
margin: '5 5 5 5',
allowBlank : false,
blankText: ' champs oligatoire',
but I think that the type will be combobox like :
xtype: 'combobox',
store: employerComboStore,
displayField: 'label',
valueField: 'value',
queryMode: 'local',
fieldLabel: 'test',
id: 'nameEmployee',
allowBlank : false,
margin: '5 5 5 5',
blankText: 'champs obligatoire',
flex: 1
So I should develop a code in ajax which run a query a retreive a data according to data entered in the textField
In this case it would be much easier to just use a ComboBox and set the hideTrigger config. It looks exactly like a text field, but behaves with the drop down list like the Combo.
Looking at the Kendo UI grid demos (ASP.NET MVC CSHTML flavor), when editing a cell that is bound to an numeric value, the input becomes a numerictextbox, but I can't seem to reproduce that behavior (on my side in stays a plain input). There must be something that assigns it the data-role attribute or something, but what is it ?
Thanks,
In order to use the model binding and have Kendo automatically assign the respective control, you need to setup a MVC editor template (http://coding-in.net/asp-net-mvc-3-how-to-use-editortemplates/) , i.e. Views/Shared/EditorTemplates. e.g. to render a Kendo NumericTextBox, create an editor template along these lines:
#model int
#(Html.Kendo().NumericTextBox())
Define the field type as numeric in the schema.
Example: Check UnitPrice or UnitsInStock
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 } }
}
}
}
Kendo provides some templates under shared/EditorTemplates => here is Integer.cshtml template is ther. we can use that to show numeric value in a column. We need to set the EditorTemplateName property on column of the Grid.
EditorTemplateName("Integer") on column.Bound for that column.
I've built a grid as the code bellow:
colModel: [
{ name: 'price',
label: 'price',
index: 'price',
jsonmap: 'price',
formatter: 'number',
formatoptions: {decimalSeparator:",", thousandsSeparator: ".", decimalPlaces: 2, defaultValue: '0,00'},
editable: true
}
]
The format of field is correctly on grid, for instance: 10,32, but the form created to edit the field fills one with 10.32 instead of 10,32.
Someone knows why this is going on? Do I need to use properties as edittype and editoptions (this one using formmater and formatoptions) as well? if yes, How I need set up these properties?
I've fixed the problem using the the function afterShowForm to handle the formating of field on form generated from grid.
In fact, I was expecting that jQGrid could do that automatically, i.e, using the configuration provided to column to apply on field generated, or if i could apply the configurion on JSON message, for instance:
editoptons: { formatter = "number", formatteroptions = { .... } ...
anyway, it's working now.