I have a column named event_date. I want to warn the user if he trys to submit the info without filling up the event_date column and prevent further execution. Here is how I define my column:
header: 'Event_date',
width: 115,
dataIndex: 'event_time',
renderer: this._renderExactDate,
field: {
type: 'textfield'
}
and my render function is:
_renderExactDate: function(date) {
if (date == '0000-00-00 00:00:00' || date == undefined) {
Ext.MessageBox.show({
title: 'New event',
msg: 'You must set a date',
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
else
{
return date;
}
}
but obv. renderer is not the way to do this, yet I haven't found a way to do this.
thanks
Leron
If this is using ExtJS4 then you should make use of the model field validations field to set the accepted format. Write a custom one if any of the standards don't fit the bill. Then you can check if the model is valid before any attempts to sync and flag a warning accordingly.
The event you want to hook into is this one. Then you can get the record/model and check its 'isValid' method before generating your warning.
Link: Ext.grid.plugin.CellEditing validateedit event
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 want to sort by a datetime value, and group by a date string.
I have found the sortProperty on the grouper:
You can set this configuration if you want the groups to be sorted on something other then the group string returned by the groupFn. This serves the same role as property on a normal Ext.util.Sorter.
So I tried the following, which only sorts the date correctly:
grouper:{
sortProperty: 'StartDate',
property: 'StartDateOnly',
direction: 'ASC'
},
and I tried the following, which only sorts the time correctly:
grouper:{
sortProperty: 'StartDate',
property: 'StartDateOnly',
direction: 'ASC'
},
sorters: [{
property: 'StartDate',
direction: 'ASC'
}]
You can try it here:
https://fiddle.sencha.com/#view/editor&fiddle/2cei
What am I doing wrong here?
The problem is that you make a sort on a string type but you have date by changing the code on your sencha fiddle like this :
Ext.application({
name : 'Fiddle',
launch : function() {
var mdl = Ext.define('', {
extend: 'Ext.data.Model',
fields: [{
/** #field {date} StartDate with format: Y-m-d H:i */
name: 'StartDate',
type: 'date',
dateFormat: 'Y-m-d H:i'
},{
name: 'StartDateOnly',
type: 'date', // <= here before it was 'string'
convert: function(v,rec) {
return Ext.Date.format(rec.get('StartDate'), 'D d.m.Y');
}
}]
});
...
Then you run, you can see that the group of date StartDateOnly is now order by ASC.
After that, you can retrieve this data in date format and convert it into a string. But if you make a sort on a string you will always have the first of February last like now.
The problem is that it does an alphabetical sort on the days of the week.
In order: Fri, Sat, Thu.
Sencha support did not provide a full solution, but helped me a bit on my way. They found how to "fix" the problem at hand and told me to change the data type of the StartDateOnly column to date, but neither did this fix prove universal nor did it make any sense that this fixed the problem at all. But it showed some underlying correlations, which helped me to dig into the problem and find a universal solution.
I would say the issue is a bug in ExtJS, but I am awaiting confirmation from Sencha on this. I have to yet find the exact line where the bug is introduced.
Problem description:
When sortProperty is set on the grouper and at least one sorter is added on the store, the "transform" function of the grouper is set to the "transform" function of the first sorter (otherwise, it is null).
Solution:
You can manually override the transform function on the grouper by adding the correct sort type explicitly to the grouper config:
grouper:{
sortProperty: 'StartDate',
property: 'StartDateOnly',
transform: Ext.data.SortTypes.asDate,
direction: 'ASC'
},
I'm using datatables and the yadcf plugin which is working well. However I'm trying to add a custom filter and having no luck getting it to work. It appears it is being ignored.
Basically I want to filter whether a cell is empty or has data
I used this example as a starting point:
http://yadcf-showcase.appspot.com/DOM_source.html
My custom function is:
function filterGroupName(filterVal, columnVal) {
var found;
if (columnVal === '') {
return true;
}
switch (filterVal) {
case 'Groups':
found = columnVal.length > 0;
break;
case 'No Groups':
found = columnVal.length < 1 || columnVal === '';
break;
default:
found = 1;
break;
}
if (found !== -1) {
return true;
}
return false;
}
And here is the part of the script that sets up yadcf:
{
column_number: 3,
filter_container_id: "filter-group-name",
filter_type: "custom_func",
data: [{
value: 'Groups',
label: 'Groups'
}, {
value: 'No Groups',
label: 'No Groups'
}],
filter_default_label: "Select Groups",
custom_func: filterGroupName
}
I've set a breakpoint in the script to see what's happening but it never gets triggered
The page gets the correct select boxes created but selecting either option returns no entries - everything is being filtered out in the datatable.
So, what have I missed in getting the function to work?
Thank you
I'm managed to work out the problem.
During development I modified the data property of yadcf for the column to that above. However I had state save set on datatables so the original filter was being used - ignoring any changes I made to the strucuture of the new filters and the resulting code.
I removed state save and the filter came to life!
How do I get the formatted value of one column in another column in jqgrid.
For eg:
{ name: 'amount', index: 'amount', sorttype: "float", formatter: processAmount, title: false },
{ name: 'netAmount', index: 'netAmount', sorttype: "float", formatter: function (cellvalue, options, rowObject)
{
// How do I get the formatted value of column "amount" here?
}
}
I know that I am posting very little of my requirement or code. But I hope this is sufficient. Please let me know if you need more information on anything.
Thanks,
Sam
Custom formatters will be called before the body of the grid will be placed on the page. So you can't access the formatted value of one column inside of custom formatter of another column. What you can still do is calling of another formatfer. For example you can call processAmount function inside of formatter of netAmount column.
Does anybody have an example of using the date formatter with a server side database, or can you point me to something to help?
You can find information about predefined formatters on the jqGrid wiki.
The following is an example of how date formatting can be used in the grid. The format ShortDate displays the date according to the selected locale. You can use your own formatting instead, for example Y-m-d H:i:s.
srcformat describes the format of the date as sent by the server, newformat describes the desired output format.
This example includes searchoptions which will make sure that your users can select the desired date with the help of a datepicker when performing a search on the grid.
colModel :[
{ name:'startdate', index:'startdate', formatter:'date',
formatoptions: { srcformat:'m/d/Y', newformat:'ShortDate' },
searchoptions: { sopt: ['eq','lt','le','gt','ge'],
dataInit : function (elem) {
$(elem).datepicker({ changeMonth: true, changeYear: true,
dateFormat: 'yy-mm-dd' });
}
}
}
]
We can also take the transient field of the date in pozo class and check in getter methed if date is not null then convert it into datetostring .Also we have to change in jsp where we used this jqgrid we have to take transient field instead of date field.
example :
(Pozo Class)
transient private String indentDate_String;
public String getIndentDate_String()
{
if(indentDate != null)
indentDate_String = DateConversion.dateToString(indentDate);
return indentDate_String;
}
jqgrid (jsp form):
colNames:['Indent Date'],
colModel:[
{name:'indentDate_String',index:'indentDate',autoheight: true, width:100},
]