jqgrid date formatter example? - jqgrid

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},
]

Related

jqgrid number formatter with separator and scale values

Using the number formatter like below to format the JQgrid number with decimalSeparator(,)& decimalPlaces(2)
formatter: 'number', formatoptions :{decimalSeparator: ',', decimalPlaces:2}
after enter the value as 134,56 in grid it was showing as 'NaN'.
please help me how to resolve this issue.
The easy way to display correct the number in case you save to database is to set reloadAfterSubmit to true in navigator or in editGridRow method like this
$("#jqGrid").navGrid("#jqGridPager",{ edit: true, add: true },
// edit options
{ reloadAfterSubmit : true },
// add options
{ reloadAfterSubmit : true }
);

Custom column filter on a formatted column

I need help using a custom column filter for handling JS objects.
I have a slickgrid table where the values in one column are JS object:
[
{ id: "1234", text: "Batman"},
{ id: "2345", text: "Robin"}
]
I use a custom formatter to smash the object into a string:
// convert [{id:string, text:string}...] to string
const optionFormatter: Formatter = (row, cell, value, columnDef, dataContext: any) =>
value ? value.map(o => o.text).join(', ') : '';
Which displays in slickgrid as
Batman, Robin
my slickgrid options use gridmenu and enables column filtering:
this.gridOptions = {
enableGridMenu: true,
enableFiltering: true,
enableAutoResize: true,
enableColumnReorder: true
};
My columnDef enables filtering for this column:
{
id: 'owners',
name: 'Owners',
field: 'owners',
sortable: false,
formatter: optionFormatter,
filterable: true
}
Everything works if the value in the cell is a string, but the filter doesn't work if the cell is an object. I assume the filter is searching the pre-formatted value.
Is there a way to provide the column with a custom filter function that knows how to search the JS object for the query string? For example if I could just search the JSON.stringify(value), that would be good enough.
Alternatively, this answer describes how I could use the formatter to store the formatted text as a different string property in dataContext. If I do that, how do I specify which property to filter, seeing as it is a different property than the column field?
I found a workaround.
preprocess my data, calling JSON.stringify on all values that are objects:
flattenFeature(f: Feature): any{
var res = {};
for (var prop in f) {
res[prop] = (typeof f[prop] === 'object') ? JSON.stringify(f[prop]) : f[prop];
}
return res;
}
Then in my formatter, I parse the json, before formatting:
// convert [{id:string, text:string}...] to string
const optionFormatter: Formatter = (row, cell, value, columnDef, dataContext) =>
value ? JSON.parse(value).map(o => o.text).join(', ') : '';
This allows the standard string filter to search the stringify'd JSON

How do I get the formatted value of one column in another column in jqgrid

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.

ExtJS checking value of a cell before submitting

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

jQGrid checkbox values

I have an editable checkbox in my jQGrid with the values
editoptions: { value: "Yes:No" }
But whatever the value is i am getting back on controller string value "Yes:No", not single value "Yes" of "No", so i am getting it like that:
When it is checked i am getting this:
form["MyCheckBox"] = "Yes:No".
When it is not checked i am getting this:
form["MyCheckBox"] = "No".
How can i do to make it work?
Or is there any way to get bool values(true/false) instead of string values ?
Need help
Try this:
editoptions: { value:"True:False" }, editable:true, edittype:'checkbox',
formatter: "checkbox", formatoptions: {disabled : false}
It seems to me you describe the bug which is already fixed in the last version of jqGrid from GitHub. I recommend you to download the version from here. See here for the description of the order of the including of the jqGrid moduls.

Resources