Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You don't posted any code, so I tried to use <a href="http://digitalbush.com/projects/masked-input-plugin/" rel="nofollow noreferrer">digitalBush</a> <a href="https://github.com/digitalBush/jquery.maskedinput" rel="nofollow noreferrer">masked jQuery plugin</a> for editing of hours myself. It seems good work and I received</p> <p><img src="https://i.stack.imgur.com/wJhPt.png" alt="enter image description here"></p> <p>in inline editing or</p> <p><img src="https://i.stack.imgur.com/tnF4k.png" alt="enter image description here"></p> <p>in the form editing.</p> <p>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:</p> <pre><code>$.mask.definitions['2']='[0-2]'; $.mask.definitions['5']='[0-5]'; </code></pre> <p>and used the following definition of 'time' column in the grid:</p> <pre><code>{name: 'time', index: 'time', width: 70, editable: true, editoptions: {dataInit: function (elem) { $(elem).mask("29:59"); }}, editrules: {time: true}} </code></pre> <p>I added time validation with respect of <code>editrules: {time: true}</code> to prevent to enter the time like <code>27:20</code>. Becease the standard time validation display not perfect error warning</p> <p><img src="https://i.stack.imgur.com/EjbQI.png" alt="enter image description here"></p> <p>we can improve the results using custom validation:</p> <pre><code>{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.&lt;br/&gt;Please enter the time in the form &lt;b&gt;hh:mm&lt;/b&gt;"]; } }}} </code></pre> <p>which changes the validation error message to the following</p> <p><img src="https://i.stack.imgur.com/KPo3h.png" alt="enter image description here"></p> <p>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.</p> <p>You can see the demo <a href="http://www.ok-soft-gmbh.com/jqGrid/MaskedInputHours.htm" rel="nofollow noreferrer">here</a>.</p> <p><strong>UPDATED</strong>: Sorry Ron, for writing of that, but the code which you posted is really good example how one should <em>not</em> write the program and how one should <em>not</em> 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.</p> <p>The first problem in your code is that you used object class <code>SampleJSObject</code> 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 ...</p> <ul> <li>Which sense hast to make some general <strong>global</strong> settings inside of the object constructor. Yo used <code>$.mask.definitions['5'] = '[0-5]';</code> for example. Every create of the instance of <code>SampleJSObject</code> the global settings will be set or overwritten. It looks like side effects.</li> <li>You defined <code>function SampleJSObject</code> on the <em>top level</em> of your code and not inside of <code>$(document).ready</code> where you use it, so you defined <em>global</em> class.</li> <li>Inside of <code>$(document).ready</code> you defined uninitialized variable <code>lastSel</code> and try to initialize it inside of <code>function SampleJSObject</code> defined in <em>another</em> scope. So the variable <code>lastSel</code> stay uninitialized in <code>$(document).ready</code>, but you set another <em>global</em> variable <code>lastSel</code> inside of the constructor.</li> <li>The methods like <code>minutesToHours</code> has nothing to do with your class <code>SampleJSObject</code>. Why the function or <code>calculateHoursAndMinutes</code> should be member of the class? It's error in design in my opinion.</li> <li>The method <code>init</code> set only the <code>jqgridParms</code> 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. <strong>I don't think that you will be create more then one instance of such specific class</strong>. Why one need have such class where you will have to overwrite almost any method to create the second instance of the class?</li> <li>In the list of parameters of jqGrid you use <code>datatype: "local"</code>, but not use <code>gridview: true</code> and <code>data</code> parameter which allows <strong>to create the data together with grid</strong>. It improve the performance of grid in many times especially for grids with the large number of rows. The usage of <code>addRowData</code> in <code>loadGrid</code> in an example of the most slow method. Moreover in the case the <code>rowNum: 10</code> will be ignored and no local paging will be done.</li> <li><p>the method <code>calculateTotal</code> demonstrate probably the most slowest implementation of the virtual <code>WeekTotal</code> column. The most effective implementation of the feature would be the usage of <a href="http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_formatter" rel="nofollow noreferrer">custom formatter</a> for the <code>WeekTotal</code> column</p> <p><code>{ 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 calculated</code>WeekTotal<code>value as string of HTML fragment */ }}</code></p></li> <li><p>If you nee to use many columns with the same properties you can define the column template (see <a href="https://stackoverflow.com/a/7458069/315935">here</a>):</p> <p><code>var myTimeTemplate = {width: 85, editable: true, edittype: "text", editoptions: { size: 20, maxlength: 30, dataInit: function (elem) { $(elem).mask("29:59"); }}</code></p> <p>and then reduce the definition of the column <code>SundayMinutes</code> for example to</p> <p><code>{name: "SundayMinutes", template: myTimeTemplate }</code></p></li> </ul>
    singulars
    1. This table or related slice is empty.
    1. POjqgrid mask edit
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USCommunity
    1. USOleg
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POjqgrid mask edit
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COwhen you exit the field in your example without filling in a complete entry (ie, enter 20 and leave the minutes blank), the text field displays blank. In my code, it leaves the remainder of the mask so it would be 20:__. When I tab through the field, the mask gets set and left as __:__. That's the issue I need to solve. I think you're solving it by resetting the row data. I need to reset the cell value if no entry is made.
      singulars
      1. PO
      1. USRon
    2. CO@Ron: Could you say how many money I have now in my pocket? You can't? Exactly in the same way nobody can help you to find the error in your code if you don't show the code. You can examine the source code of [my demo](http://www.ok-soft-gmbh.com/jqGrid/MaskedInputHours.htm) and compare with the way how you use it. Do you included any validation rule for example?
      singulars
      1. PO
      1. USOleg
    3. COMy comment is that in your demo, your entry gets blanked out if it is not complete. That's essentially the issue I'm also having - I want it get caught in the validation, but it does not. To recreate, jump into the field, enter "20" (no quotes of course) then tab out of the field. So, to extend your analogy, I'm asking you to count the money in your own pocket.
      singulars
      1. PO
      1. USRon
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload