I am stuck here - last thing to get done before going production.
The date coming from oracle is on the following format: "8/14/2012 10:46:48 AM"
I am using the following on the jqgrid:
{ name: 'CreationDate', index: 'CreationDate', formatter: 'date', formatoptions: { 'srcformat': 'ISO8601Long', 'newformat': 'm/d/Y - g:i A' }, sorttype: 'date', width: 95, align: 'right', resizable: false },
I have the following displaying on the grid: "08/14/2012 - 10:46AM"
The problem is when I try to use the advanced filter it doesn't work. My guess is because of the time, any suggestions on how to solve this?
UPDATE
Oleg, I copied the code you posted with your changes and still nothing. I am using the advanced filter. Thanks for all your help, I really, really appreciate it. I wish I could send you some beer to Germany :o)
I think the main problem is that you use g format inside of newformat which are not currently supported in jqGrid for the local filtering/searching. You can try to use H format instead. Alternatively you can use the fix which is described in the answer.
UPDATED: The demo shows that one can use Advanced Searching dialog with formatter: 'date', formatoptions: { 'srcformat': 'ISO8601Long', 'newformat': 'm/d/Y - g:i A' } after applying the fix which I referenced. You can just try the demo and input the same data (10/04/2012 - 5:55 PM) which I used on the picture below. You have to see the following results:
UPDATED 2: During preparing of another demo for you I found one more bug in internal parseDate function. The problem is that the current implementation of parseDate function works correct only if the date which are need be parsed contain the same elements as specified the format. For example the date 10/04/2012 will be incorrect parsed using 'm/d/Y - g:i A' format. To fix the bug one can include the line
if(typeof date[k] === "undefined") { continue; }
as the first line of the body of the loop. The fixed version of jquery.jqGrid.src.js you can get here.
In the demo I use multipleSearch: true option of jqGrid searching. As the result one can specify the interval of dates like
10/04/2012 <= x <= 10/05/2012
The corresponding Searching Dialog will look like on the picture below and you will be able to filter by intervals of dates
Related
This is probably an easy one for those who know this thing. :)
Given this:
$(this).fullCalendar('renderEvent',
{
title: 'Class',
start: date,
end: date.setHours(2),
allDay: false
}, true );
Which doesn't work... what's the syntax for setting the end time to two hours past the time that was clicked on? So if the user clicks on 8 AM, I want it to automatically end two hours later, at 10 AM.
And... is it possible to make it so the event length cannot be resized? As in, remove the little UI thing that they can click on to increase or decrease the size?
Thanks!
I figured it out (mostly). in the above example, end: date.setHours(2) of course doesn't work. Upon inspecting the date object passed into dayClick, I found fromNow and when I tried date.fromNow(2), it worked!
The only issue I have now (unrelated to my original question) is that it's prompting me for the event name even though I'm specifying it in the code. Here's the final, working version of what I posted above:
$('#calendar').fullCalendar('renderEvent',
{
id: 0,
title: 'Class',
start: date,
end: date.fromNow(2),
allDay: false
}, true );
In my jqGrid I have a column that has this format: '1.234,678'. I want to sort this column, and I am using this code:
{name:'ZMENG_SOR_VRKME', index:'ZMENG_SOR_VRKME', width:'5', align:'right', sorttype:'number' }
Sorting doesn't work. I think that it is not considering .(dot) as thousands, for examples if I have 21,000 - 991,000 - 1.188,000. The results is: 991,000 - 21,000 - 1.188,000.
How can I solve this?
If I understand your problem correctly you should change the format of data filled in the grid. You should use pure numbers as the input and use formatter: "number" to include thousands separator in the number. It will be the best way to solve your problem in my opinion. You can use correct language file grid.locale-XX.js the thousands separator will be used corresponds the locale. Alternatively you can use decimalSeparator and thousandsSeparator of formatoptions to specify your custom decimal and thousand separators.
Alternatively you can either provide unformatter (unformat function described here) which converts the text displayed in the cell to the number. I think it should work.
One more possibility is usage of custom sorting. You need define sorttype as function which would be return "normalized" version of the data. The "normalized" data will be used instead of original data during sorting. See the answer and this one for code examples.
UPDATE: Free jqGrid provides some standard templates like template: "integer", number: "number", template: "integerStr", number: "numberStr" and other. Thus one can use
{name: "ZMENG_SOR_VRKME", width: 50, template: "numberStr" }
which would be equivalent to the usage of
{name: "ZMENG_SOR_VRKME", width: 50,
formatter: "number", align: "right", sorttype: "number",
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"] } }
I am trying to build a webpage where I have 2 scrollers to pick a range of dates. Both text inputs are the same class, so i am setting the 2 scrollers like so:
$('.datetime').scroller({
preset: 'datetime', minDate: new Date(now.getFullYear(), now.getMonth(), (now.getDate() - 7)), theme: 'default', display: 'modal', timeFormat: 'HH:ii', timeWheels: 'HHii', stepMinute: 5, mode: 'scroller'
});
What I'd like to do is to get the 2nd scroller to set as its minDate the value set by the first scroller.
I tried setting up the scrollers separately, using the eq() function & setting the minDate of the second to $('.datetime').eq(0).val(). I found 2 problems with that: the value that is set by mobiscroll in the text input is not recognized as a date; & the value doesn't appear to change, but that may be due to the first error.
Does mobiscroll have a way of parsing the date that it loads into the text input? I'd rather not add another plugin like date.js just to get this one to work how I need it.
You can use the getDate method of mobiscroll:
$('.datetime').eq(0).scroller('getDate');
This returns a date object, not a string.
There is also a parseDate utility function
$.scroller.parseDate(format, strValue);
For more information see http://docs.mobiscroll.com/datetime-preset
When I am using multiple grids on the same page, or over my entire website, is there any way to abstract out the setup of common grid components? Ex the colModel section, or other components that would be the same between two grids, while giving me the option to make each grid unique, Ex in name, caption, etc.
Basically what this comes down to is I want to avoid the wall of text that comes with the setup of multiple grids that are highly similar.
I was able to achieve some of what I was looking for.
I was able to take the largest chunk of repeated code, the colModel:[..] and turn that into a variable and then call on it.
Ex
var colModelForReuse = [{name: 'exName', index: 'exIndex' ..... },
{.......................................}];
and then later in my Grid setup
colNames: [ 'exName', .....],
colModel: colModelForReuse,
pager: pagerName,
...
Yes, you could create a function that creates your actual grid, and then pass options to it to control the aspects that are different between each grid. A nice way to pass the arguments is to use jQuery.extend, which allows you to easily provide default argument values.
For example:
function myFunction(options) {
options = jQuery.extend(
{
myOption1: 'Default Vaule',
myOption2: 'Default Vaule',
},
options || {});
...
}
After having exported data using jqGridExport we import using jqGridImport. First problem was that the bottom bar options did not come back so I added that code after. So code looks like:
$("#list").jqGridImport({imptype: 'jsonstring', impstring: gridSettings})
.jqGrid('navGrid','#pager', { edit: false, add: false, del: false, search: true, refresh:true },
{},{},{},{closeOnEscape: true, multipleSearch: true, closeAfterSearch: true},{});
The critical part of the gridSettings string is:
"postData":{"_search":true,
"nd":1301031279941,
"rows":20,
"page":1,
"sidx":"a.ID",
"sord":"asc",
"filters":{"groupOp":"AND","rules": [{"field":"fname","op":"bw","data":"T"}]}
}
Everything comes up fine except for the search. The one line of search from postData above is correct but there is a second search line, which I can only describe as the default search line. If I go in and remove that line from the multiple search box everything is as it should be.
So my question is first, why does multipleSearch not come back up when I restore using jqGridImport?
Second is there a way to programmatically remove the second search line?
The behavior of the bottom bar with the navigator is correct because it is implemented not as the part of grid. So you really have to set it additionally. You can write you own export and import of the settings.
The situation with the additional last line which will be added in the searching dialog is really a small problem which can be fixed with the following code:
var grid = $("#list");
...
grid.searchGrid(prmSearch);
if (typeof(grid[0].p.postData.filters) === "string" &&
grid[0].p.postData.filters.length>0) {
$("#fbox_"+grid[0].id).searchFilter().del();
}
$("#fbox_"+grid[0].id).searchFilter().close();
You can see the corresponding demo here. It is a small modification of the demo from my another old answer.
By the way the new filter which will be used in the next version of jqGrid will not have the problem (see the demo here).