how to implement uppercase conversion in jqgrid

Question

Producr codes can contain only uppercase charcters. If lowercase characters are enterd, jqgrid does not convert them to upper case, there is not such option. How to force uppercase conversion of entered characters in jqgrid in inline and form edit modes for text fields ?

Update

I found code in How can I force input to uppercase in an ASP.NET textbox? last answer . This code changes entered character in uppercase in keypress. Is it reasonable to use this by adding keyprees event handler to jqgrid editing controls?

function ToUpper() { 
        // So that things work both on FF and IE 
        var evt = arguments[0] || event; 
        var char = String.fromCharCode(evt.which || evt.keyCode); 

        // Is it a lowercase character? 
        if (/[a-z]/.test(char)) { 
            // convert to uppercase version 
            if (evt.which) { 
                evt.which = char.toUpperCase().charCodeAt(0); 
            } 
            else { 
                evt.keyCode = char.toUpperCase().charCodeAt(0); 
            } 
        } 

        return true; 
    }

Used like so:

   <asp:TextBox ID="txtAddManager" onKeyPress="ToUpper()" runat="server"  
         Width="84px" Font-Names="Courier New"></asp:TextBox>

I want regular expression validation in add form of JQgrid. How can I do that ? — Bhavik Ambani, Jul 26 '12 at 10:09

score 1 · Accepted Answer · answered Nov 06 '11 at 13:35

1

First of all you can use CSS style text-transform: uppercase to display the data typed by the user in uppercase:

editoptions: { dataInit: function (el) { $(el).css('text-transform', 'uppercase'); }}

The setting will not change the data itself. So you have to make the corresponding modification additionally. In case of form editing you can use beforeSubmit. For example, let us you have column 'name' which you need to hold uppercase. Then you first add the setting of text-transform: uppercase in dataInit (see above) and add

beforeSubmit: function (postData) {
    postData.name = postData.name.toUpperCase();
    return [true, ''];
}

In case of inline editing there are no beforeSubmit callback function. so you can use serializeRowData if you have remote data:

serializeRowData: function (postData) {
    postData.name = postData.name.toUpperCase();
    return postData;
}

In case of usage editurl: 'clientArray' you can fix the data in aftersavefunc parameter of editRow and saveRow:

aftersavefunc: function (rowid) {
    var $grid = $(this),
        newName = $grid.jqGrid("getCell", rowid, 'name');
    $grid.jqGrid("setCell", rowid, 'name', newName.toUpperCase());
}

See the demo.

answered Nov 06 '11 at 13:35

Oleg

220,925
34
403
798

Thank you. I expected that there was a way to add keydown event handler for input element in all edit modes and convert lowercase to upper in this event. User can set uppercase option at runtime. Your answer requires to generate editoptions,beforeSubmit,serializeRowData code at runtime. Please confirm that using keydown to convert is not reasonable, so I can try your answer. Or maybe to implement conversion in server instead. – Andrus Nov 06 '11 at 18:06
@Andrus: I can't full follow you. What you mean with "set uppercase option at runtime" and "generate ... code at runtime". If you has an option (or a variable) which the user can set at runtime you can test the option (the variable) in the code of `dataInit`, `beforeSubmit` or `serializeRowData` and activate or not activate the uppercase conversion. What is the problem. you other question "Please confirm that using keydown to convert is not reasonable" I can't understand at all. I can't grantee that you can't find an implementation with `keydown` only. – Oleg Nov 06 '11 at 18:18
I updated question about using keypress. Is this reasonable. Use can set uppercase option for column definition in database. Application code should examine this value and generate appropirate jqgrid definition at runtime. This involves generating coded in 3 different places while using keypress required adding only keypress event handler. Not sure that keypress handler works if uses pastes text using ctrl+V command but maybe paste command can also handled in input element some event – Andrus Nov 06 '11 at 18:23
@Andrus: Do you tested the code which you posted? In my tests in pure JavaScript environment **it doesn't work**. I posted you a way to solve the problem. If you would post another code which work with any keyboard event it would be interesting for me. I don't know any solution which hold cursor caret and can modify the keyboard events on the fly. – Oleg Nov 06 '11 at 21:39
According to code author in referenced answer it should work. Which testcase you used? Maybe I should ask pure javascript question about that. There are possibilities: using your great answer, trying to put keypress to work, implementing this in C# in server in BeforeSave and BeforeInsert entity methods, creating insert and update triggers in database server. Which is best way? – Andrus Nov 06 '11 at 22:04
In http://stackoverflow.com/questions/202368/how-can-i-force-input-to-uppercase-in-an-asp-net-textbox about 5 answers recommend to use keyUp and in keyup simply convert whole value to uppercase. This does not require modifying the keyboard events so it should work. – Andrus Nov 06 '11 at 22:12
@Andrus: If you read the answers carefully you will find in all questions the code like `input.value += char.toUpperCase();` or `$("#txt").val($("#txt").val().toUpperCase());` So the `value` of `` control will be reset. This changes the caret position of the `` control, which is not needed in my solution. Just changing of event properties of any keyboard event seems be not enough to modify the key on the fly so that the modified value will be placed in the `` control. If you know a way - post it me. – Oleg Nov 06 '11 at 22:33
Thank you very much. I missed the caret change issue. Is it reasonable to place value reset code to blur event? In this case caret position reset is acceptable since some other control receives focus. – Andrus Nov 07 '11 at 08:59
@Andrus: If one uses `editoptions: { dataInit: function (el) { $(el).css('text-transform', 'uppercase'); }}` which I suggested the user don't see that the data in the `` control are saved not in uppercase. So it is important to convert data to uppercase only at the end of editing (on submitting) of data. So converting of the data an every `blur` event is not really needed. You should in any way choose the way which is the best on your environment. – Oleg Nov 07 '11 at 09:09
I want regular expression validation in add form of JQgrid. How can I do that ? – Bhavik Ambani Jul 26 '12 at 10:09
@BhavikAmbani: You can use custom rules (see [here](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#custom_checking_example)). Some time before I suggested to introduce regex validation (see [here](http://www.trirand.com/blog/?page_id=393/feature-request/new-editrule-regex/#p22277)), but Tony thought that everyone who knows how to use RegEx are able to use existing custom validation rule. – Oleg Jul 29 '12 at 15:18

score 0 · Answer 2 · answered Nov 06 '11 at 10:55

0

try:

 $(document).ready(function(){
          $("div").text("lower case.");
          var UCASE =  $("div").text($("div").text().toUpperCase());
          alert(UCASE);
    });

or

$(document).ready(function(){    
   var strVal = 'lowerCase!!' ;  
   alert(strVal.toUpperCase()); 
});

answered Nov 06 '11 at 10:55

4b0

21,981
30
95
142

thank you. I asked about converting entered or pasted characters to uppercase. I updated question and provided sample code which according to Oleg does not work. How to make this to work or any other idea? – Andrus Nov 06 '11 at 22:00
I want regular expression validation in add form of JQgrid. How can I do that ? – Bhavik Ambani Jul 26 '12 at 10:09

how to implement uppercase conversion in jqgrid

2 Answers2

Linked