[CLOSED] Convert RowEditing Plugins to CellEditing CellEditing

  1. #1

    [CLOSED] Convert RowEditing Plugins to CellEditing CellEditing

    Dears,

    I hope everybody good day.

    I used RowEditing Plugin in my GridPanel and as you know that this Plugin call the updateOwners method after clicking update button while row editing:

    var updateOwners = function (editor, e) {
    
        /*
            "e" is an edit event with the following properties:
    
                grid - The grid
                record - The record that was edited
                field - The field name that was edited
                value - The value being set
                originalValue - The original value for the field, before the edit.
                row - The grid table row
                column - The grid Column defining the column that was edited.
                rowIdx - The row index that was edited
                colIdx - The column index that was edited
        */
        
    };

    <Plugins>
    	<ext:RowEditing runat="server" ClicksToMoveEditor="1" AutoCancel="true">
    		<Listeners>
    			<Edit Fn="updateOwners">
    
    			</Edit>
    		</Listeners>
    	</ext:RowEditing>
    </Plugins>
    Click image for larger version. 

Name:	UpdateSnapshot.jpg 
Views:	31 
Size:	89.2 KB 
ID:	24711

    Now, my users are not comfortable with RowEditing Plugin as they prefer to use Tab Button to move between cells without the need to click on update button after editing the row, they want to move to next row directly.

    I changed the RowEditing Plugin to CellEditing Plugin, and I got exactly what my users prefer, except that I faced problem with the method updateOwners as it is being called after the cursor leave each edited cell.

    <Plugins>
    	<ext:CellEditing ClicksToEdit="2" >
    		<Listeners>
    			
    			<Edit Fn="updateOwners">
    
    			</Edit>
    		</Listeners>
    	</ext:CellEditing>
    </Plugins> 
    Click image for larger version. 

Name:	CellEditSnapshot.jpg 
Views:	33 
Size:	58.4 KB 
ID:	24712

    Now, I'm facing problem with many changes required to be done for this little change, my questions are:

    1. Is there anyway to get rid of update button in row editing, so the changes will be accepted when user tab out from last column?
    2. Is there anyway to convert RowEditing Plugins to CellEditing Plugin without performing many changes in code behind and JavaScript?
    3. Any suggestions to solve my problem?

    Note that, for some cases, I'm using input information from user in column 1 to retrieve information into column 2 and column 3 (i.e. if the user input CPR, then English Name and Arabic Name will be shown directly while row editing). can I implement this concept while using the CellEditing Plugin?

    Regards,
    Alaswad
    Last edited by fabricio.murta; Aug 23, 2016 at 10:27 PM.
  2. #2
    Hello @Alaswad!

    I'm afraid that, if changing from row editor to cell editor, it can't be helped but you'll need to change it everywhere.

    About changing the rowEditor behavior & look, I am pretty confident this thread covers the topic: Gridpanel - RowEditor - Autosave.

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hi @fabricio.murta

    I have put this code in my page:

        Ext.ux.grid.RowEditor.override({
            onRender : function () {
                Ext.ux.grid.RowEditor.superclass.onRender.apply(this, arguments);
                this.el.swallowEvent(['keydown', 'keyup', 'keypress']);
            }
        });
    I got the following error:

    Click image for larger version. 

Name:	EditRowError.jpg 
Views:	24 
Size:	46.0 KB 
ID:	24713

    Click image for larger version. 

Name:	EditRowErrorMsg.jpg 
Views:	27 
Size:	41.0 KB 
ID:	24714

    how to proceed?
  4. #4
    Hello @Alaswad!

    The ExtJS namespace for rowEditor is now Ext.grid.plugin.RowEditing.
    Fabrício Murta
    Developer & Support Expert
  5. #5
    I'm afraid the onRender override does not help with the auto saving.

    To hide the update/cancel buttons, this is enough:

    <style type="text/css">
        .x-grid-row-editor-buttons {
            display: none
        }
    </style>
    But it will only save then when the user hits <enter> in the fields.
    Fabrício Murta
    Developer & Support Expert
  6. #6
    Thank You.
    Mark it as closed.

Similar Threads

  1. [OPEN] [#387] CellEditing ValidateEdit with Ext.Msg.Show
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Nov 20, 2013, 8:11 PM
  2. [CLOSED] CellEditing Plugin tab key
    By softmachine2011 in forum 2.x Legacy Premium Help
    Replies: 14
    Last Post: Jun 05, 2013, 7:03 AM
  3. [CLOSED] V2.1 CellEditing validate
    By Aurelio in forum 2.x Legacy Premium Help
    Replies: 12
    Last Post: Dec 29, 2012, 8:34 AM
  4. CellEditing not recognized in GridPanel
    By stebag in forum 2.x Help
    Replies: 0
    Last Post: Oct 07, 2012, 5:48 AM
  5. [CLOSED] CellEditing plugin
    By Kev in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Sep 13, 2012, 8:06 PM

Posting Permissions