1. #1
    Sencha User
    Join Date
    Jul 2008
    Posts
    96
    Vote Rating
    0
    ritcoder is on a distinguished road

      0  

    Question Validating Grid Data on the client side

    Validating Grid Data on the client side


    Hi,
    I'm mostly using the editable grid for my editing - adding, deleting and updating records. How to I do client side validations like required fields and key violations?
    Is there a standard way of doing it or a custom solution is required?

    PS: I have set most of the constraints on the gridEditors but I do not seem to see if any effect when I move to another record.

    Thank you.

  2. #2
    Ext JS Premium Member saJoshua's Avatar
    Join Date
    Nov 2007
    Location
    South Africa
    Posts
    521
    Vote Rating
    5
    saJoshua is on a distinguished road

      0  

    Default


    listen for the update event of your grid's store.

  3. #3
    Sencha User
    Join Date
    Jul 2008
    Posts
    96
    Vote Rating
    0
    ritcoder is on a distinguished road

      0  

    Default


    After looking at the api for the update event, the parameters are
    ( Store this, Ext.data.Record record, String operation )

    Since each column in the grid has its own grid editor width different validation codes, how do I apply it to the record received with the event?

    Thank you.

  4. #4
    Ext JS Premium Member saJoshua's Avatar
    Join Date
    Nov 2007
    Location
    South Africa
    Posts
    521
    Vote Rating
    5
    saJoshua is on a distinguished road

      0  

    Default


    I stored an external reference to the "currentlyEditedField" of the grid, as follows:

    Code:
    new Ext.grid.EditorGridPanel({
        ...
        ...
        ...
        listeners   : {
            beforeedit : function(e) {
                /// the Fires before cell editing is triggered. The edit event object has the following properties
                //    * grid - This grid
                //    * record - The record being edited
                //    * field - The field name being edited
                //    * value - The value for the field being edited.
                //    * row - The grid row index
                //    * column - The grid column index
                //    * cancel - Set this to true to cancel the edit or return false from your handler.
                
                applicationNamespace.currentlyEditedRecord = e.record;
                applicationNamespace.currentlyEditedField = e.field;
            }
        }
    })
    then I could interrogate which field was being edited in the store.update method.

    Code:
    new Ext.data.JsonStore({
        listeners   : {
            /****************************************
            /   This is where a lot of the client side logic pertaining to the grid is contained.
            ********************/
            update     : function(store, record, operation) {
                switch(applicationNamespace.currentlyEditedField){
                    case "Field1":
                        ...
                        ...
                        break;
                    case "Field2":
                        ...
                        ...
                        break;
                }
            }
        }
    })
    hope it helps your solution.

    Joshua

  5. #5
    Ext User
    Join Date
    Jul 2007
    Posts
    3,128
    Vote Rating
    0
    devnull has a little shameless behaviour in the past

      0  

    Default


    you can do validation in the afteredit event too, which happens in each field rather than each row.

  6. #6
    Ext JS Premium Member saJoshua's Avatar
    Join Date
    Nov 2007
    Location
    South Africa
    Posts
    521
    Vote Rating
    5
    saJoshua is on a distinguished road

      0  

    Default


    afteredit is valid, but it won't be fired for checkbox and other updates to the store that bypass the editor.

    my method is per field, not per row.

Thread Participants: 2