You don't posted any code, so I tried to use digitalBush masked jQuery plugin for editing of hours myself. It seems good work and I received
in inline editing or
in the form editing.
I implemented this in the following way. First of all I defined two masks: one to enter digits from 0-2 and the next mask to enter digits from 0-5:
$.mask.definitions['2']='[0-2]';
$.mask.definitions['5']='[0-5]';
and used the following definition of 'time' column in the grid:
{name: 'time', index: 'time', width: 70, editable: true,
editoptions: {dataInit: function (elem) { $(elem).mask("29:59"); }},
editrules: {time: true}}
I added time validation with respect of editrules: {time: true} to prevent to enter the time like 27:20. Becease the standard time validation display not perfect error warning
we can improve the results using custom validation:
{name: 'time', index: 'time', width: 70, editable: true,
editoptions: {dataInit: function (elem) { $(elem).mask("29:59"); }},
editrules: {custom: true, custom_func: function (value) {
if (/^([0-1][0-9]|2[0-3]:[0-5][0-9])$/.test(value)) {
return [true, ""];
} else {
return [false, "is wrong time.<br/>Please enter the time in the form <b>hh:mm</b>"];
}
}}}
which changes the validation error message to the following
I am sure that you can improve the visibility with another customization of the mask plugin and validation. In any way my experiments show that one can do use successfully mask plugin in jqGrid.
You can see the demo here.
UPDATED: Sorry Ron, for writing of that, but the code which you posted is really good example how one should not write the program and how one should not use jqGrid. At the beginning I don't wanted to write any comments, but later I do decided to describe you what is wrong in the code and explain how one should modify the code.
The first problem in your code is that you used object class SampleJSObject instead of direct usage of functions. From the syntax how the constructor and the methods of an object should be defined the code is correct, but ...
- Which sense hast to make some general global settings inside of the object constructor. Yo used
$.mask.definitions['5'] = '[0-5]'; for example. Every create of the instance of SampleJSObject the global settings will be set or overwritten. It looks like side effects.
- You defined
function SampleJSObject on the top level of your code and not inside of $(document).ready where you use it, so you defined global class.
- Inside of
$(document).ready you defined uninitialized variable lastSel and try to initialize it inside of function SampleJSObject defined in another scope. So the variable lastSel stay uninitialized in $(document).ready, but you set another global variable lastSel inside of the constructor.
- The methods like
minutesToHours has nothing to do with your class SampleJSObject. Why the function or calculateHoursAndMinutes should be member of the class? It's error in design in my opinion.
- The method
init set only the jqgridParms property. You can do it in the same way in the constructor, but in both cases it is not clear for me why one need and method which defines so specific parameters like you do. I don't think that you will be create more then one instance of such specific class. Why one need have such class where you will have to overwrite almost any method to create the second instance of the class?
- In the list of parameters of jqGrid you use
datatype: "local", but not use gridview: true and data parameter which allows to create the data together with grid. It improve the performance of grid in many times especially for grids with the large number of rows. The usage of addRowData in loadGrid in an example of the most slow method. Moreover in the case the rowNum: 10 will be ignored and no local paging will be done.
the method calculateTotal demonstrate probably the most slowest implementation of the virtual WeekTotal column. The most effective implementation of the feature would be the usage of custom formatter for the WeekTotal column
{ name: "WeekTotal", index: "WeekTotal", width: 55, align: "center" ,
formatter: function (cellvalue, options, rowObject) {
/* here you can access the other columns of the same row just as rowObject.SundayMinutes and return from the function the calculatedWeekTotalvalue as string of HTML fragment */
}}
If you nee to use many columns with the same properties you can define the column template (see here):
var myTimeTemplate = {width: 85, editable: true, edittype: "text", editoptions: { size: 20, maxlength: 30, dataInit: function (elem) { $(elem).mask("29:59"); }}
and then reduce the definition of the column SundayMinutes for example to
{name: "SundayMinutes", template: myTimeTemplate }
