[CLOSED] Trying to validate Grid panel w/ editor, component columns, and input masks

  1. #1

    [CLOSED] Trying to validate Grid panel w/ editor, component columns, and input masks

    Hello, I'm trying to validate some editable cells in a grid panel and it is not working. I have two columns, TimeIn and TimeOut, and want to be sure that TimeIn <= TimeOut.

    I am trying to use the ValidateEdit event:

    Html.X().Column()
                    .Text("Friday")
                    .Flex(1)
                    .Columns(
                        Html.X().ComponentColumn()
                            .Editor(true)
                            .DataIndex("FridayAttend")
                            .Width(60)
                            .Text("Attended")
                            .Listeners(ls =>
                            {
                                ls.BeforeBind.Handler = "if (e.record.get('Friday') == '') e.config[0].disabled = true";
                            })
                            .Component(Html.X().Checkbox()),
                        Html.X().ComponentColumn()
                            .Editor(true)
                            .DataIndex("FridayIn")
                            .Width(60)
                            .Text("In")
                            .Listeners(ls =>
                            {
                                ls.BeforeBind.Handler = "if (e.record.get('Friday') == '') e.config[0].disabled = true";
                            })
                            .Component(
                                Html.X().TextField()
                                    .Plugins(Html.X().InputMask()
                                        .Mask("hi:mn aM")
                                        .AllowInvalid(true)
                                        .MaskSymbols(symbols =>
                                            {
                                                symbols.Add(new MaskSymbol() { Name = "h", Regex = "[01]" });
                                                symbols.Add(new MaskSymbol() { Name = "i", Regex = "[0-9]" });
                                                symbols.Add(new MaskSymbol() { Name = "m", Regex = "[0-5]" });
                                                symbols.Add(new MaskSymbol() { Name = "n", Regex = "[0-9]" });
                                                symbols.Add(new MaskSymbol() { Name = "a", Regex = "[aApP]" });
    
                                            }
                                        )
                                    )
                            ),
                        Html.X().ComponentColumn()
                            .Editor(true)
                            .DataIndex("FridayOut")
                            .Width(60)
                            .Text("Out")
                            .Listeners(ls =>
                            {
                                ls.BeforeBind.Handler = "if (e.record.get('Friday') == '') e.config[0].disabled = true";
                                ls.ValidateEdit.Handler = "alert('test'); return true;";
                            })
                            .Component(
                                Html.X().TextField()
                                    .Plugins(Html.X().InputMask()
                                        .Mask("hi:mn aM")
                                        .AllowInvalid(true)
                                        .MaskSymbols(symbols =>
                                            {
                                                symbols.Add(new MaskSymbol() { Name = "h", Regex = "[01]" });
                                                symbols.Add(new MaskSymbol() { Name = "i", Regex = "[0-9]" });
                                                symbols.Add(new MaskSymbol() { Name = "m", Regex = "[0-5]" });
                                                symbols.Add(new MaskSymbol() { Name = "n", Regex = "[0-9]" });
                                                symbols.Add(new MaskSymbol() { Name = "a", Regex = "[aApP]" });
    
                                            }
                                        )
                                    )
                            )
                    )
    However, the Handler runs as soon as I begin editing the cell, not when done. How can I validate this after they have finished editing TimeOut or TimeIn?

    Thanks,
    Amit
    Last edited by Daniil; Mar 28, 2014 at 11:09 PM. Reason: [CLOSED]
  2. #2

    Any thoughts?

    Any thoughts?
  3. #3
    Hi @AmitM,

    We apologize for the delay.

    Well, while editing with a ComponentColumn, when you type a symbol in a cell, it is considered as edited. So, you should validate on each typed symbol.
    Last edited by Daniil; Mar 27, 2014 at 3:55 PM.
  4. #4

    ValidateEdit

    When I use ValidateEdit, the last keystroke does not trigger the function (which is the opposite of what I would expect).

    When I use Edit, returning false did not prevent the edit.

    Right now, the listener looks like:
    ls.Edit.Handler = "console.log(e.record.get('FridayOut')); if (e.record.get('FridayOut').indexOf('_') == -1 && e.record.get('FridayIn') > e.record.get('FridayOut')) { Ext.Msg.notify('Error', 'No!'); return false; }";
  5. #5
    Quote Originally Posted by AmitM View Post
    When I use ValidateEdit, the last keystroke does not trigger the function (which is the opposite of what I would expect).
    Hmm, ValidateEdit appears to fire for any keystroke. Could you, please, provide a runnable test case and exact steps to reproduce the problem?
  6. #6

    Solved

    Using ValidateEdit, the last keystroke never fired the event. So if you looked in the java console, the last line you would see was: "0500 _M" (I am using a mask edit).

    I ended up just using the Edit event:
    ls.Edit.Handler = "return editAttendenceFn(e.record, 'FridayIn', 'FridayOut');";
    //AttendanceEdit Validator
    var editAttendenceFn = function (record, FieldIn, FieldOut) {
        if (record.get(FieldIn).indexOf('_') == -1 &&
            record.get(FieldOut).indexOf('_') == -1) 
        {
            var tIn = new Date (new Date().toDateString() + ' ' + record.get(FieldIn));
            var tOut = new Date(new Date().toDateString() + ' ' + record.get(FieldOut));
    
            if (tIn > tOut)
            {
                Ext.Msg.notify({title:'Error', html:'Time In must be less than Time Out!', hideDelay:'10000'});
                return false;
            } else return false;
        }
        else return true;
    };

Similar Threads

  1. [CLOSED] Displaying grid panel below text field input
    By MTSI in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 11, 2013, 12:31 PM
  2. [CLOSED] Mousewheel scrolling cause input data lost in grid editor
    By kwcitadmin in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 25, 2013, 2:07 AM
  3. Replies: 0
    Last Post: Aug 23, 2012, 11:55 PM
  4. [CLOSED] Input Grid Panel Row selection in V1.0
    By speedstepmem4 in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Aug 03, 2011, 9:04 AM
  5. Replies: 0
    Last Post: Nov 08, 2010, 9:20 AM

Tags for this Thread

Posting Permissions