[Data Grid] Using cancel = true with beginningEdit not working

Forge Component
(36)
Published on 17 Mar (2 weeks ago) by OutSystems R&D
36 votes
Published on 17 Mar (2 weeks ago) by OutSystems R&D

Hi All,

I'm sure the problem is due to my misunderstanding but I cant seem to prevent the default behaviour on editable text fields or checkboxes,

I have the need to set text fields and checkboxes to read only programmatically  (both on initial load and when other data on the row changes) the only way I have seen to do this is using the beginningEdit Handler,

from reading the Sample documentation and Wijmo demo site I tried with the following script,

I wasn't sure if I needed to remove the standard handlers first so I tried with and without and it didn't make a difference. I can get the beginningEdit to fire and display the alert and set e.cancel = true,

but even doing this it still continues on and either opens the field in editor or ticks the checkbox

Hoping someone can point me in the right direction, I have logged a support call but so far no response.

Thanks Neil

SyntaxEditor Code Snippet

var beginCellEdit = function(GridId) {
    var _gObj = GridOS.ComponentUtils.getGridObjectById(GridId);
     _gObj.event;
    _gObj.grid.beginningEdit.removeHandler(_gObj.event.beginningEdit);
    _gObj.event.beginningEdit = function(s,e) {
        /* Logic to run when [Event Name] triggers */
        var col = s.columns[e.col];
        if (col.binding == 'NewPriceValue') {    
          e.cancel = true;
          alert('items cannot be edited');
         }
     }; 
      _gObj.grid.beginningEdit.addHandler(_gObj.event.beginningEdit);
} 

Hi Neil,

If you need to programmatically disable the whole column, you can use the property isReadOnly:

theGrid.columns[2].isReadOnly = true;


If you need to disable an specific cell after changing another cell in the same row, you will need some hacking and have an array that will hold the list of lines that are read only. Refer to this jsFiddle to see an example, and see the event handler defined in the line 52:

https://jsfiddle.net/joaomelont/2egszdq7/


Hope this helps.

Hi ,

Thank you for the response,

I was able to use the  beginningEdit event successfully ( as the alert being sent)  but the e.cancel = true wasn't being obeyed.

I have received a call back from support and they are investigating a sample app I have given them and I will post their findings here.

I will note that at times the cancel did work on a text field input then other times it failed but at no stage could I get a checkbox input to be cancelled.

 

Hello Neil,

Rather than allowing edit on the grid and then trying to cancel them by applying cancel=true to edit events like beginningEdit, is there any concern to just make the columns Editable=False?

Hi,

Thank you for your reply no unfortunately what were trying to achieve is to be able to have some cell read only depending on the data in other columns so that single column may have read only cells and editable cells which can change dynamically


Solution

Hi All,

Had a response from support who provided the solution, have added it here with their permission for those who may also wonder how to achieve this




If you define handlers for grid events, they will be overridden by the handlers added by Data Grid (if any), giving you the impression that setting e.cancel to true has no effect.

You may want to customize the functions that raise the events instead.


First, you define the functions that you want to customize in the AdvancedFormat property of the GridContainer, pointing them to new functions.

Code:

"onBeginningEdit: customBeginningEdit,
 onCopying: customCopying" 

Then, you define the new functions in a Javascript property of the Screen or Block.


I have given an example of how you may define the new functions.


Code:

customBeginningEdit = function (e) {
    var currentValue = e.panel.getCellData(e.row, e.col);
    var dataType = e.panel.columns[e.col].dataType;
    // disable edit if cell contains text starting with 'A'
    if (dataType == wijmo.DataType.String) {
        if (currentValue.startsWith('A')) {
            e.cancel = true;
            return;
        }
    }
    // disable checkbox if row contains last name starting with 'C'
    if (dataType == wijmo.DataType.Boolean) {
        if (e.panel.rows[e.row].dataItem.LastName.startsWith('C')) {
            e.data.target.checked = !e.data.target.checked; // disabling checkbox workaround
            e.cancel = true;
            return;
        }
    }
    // continue edit if no conditions are satisfied
    return this.beginningEdit.raise(this, e);
};

// disable copying at all
customCopying = function (e) {
    e.cancel = true;
    return;
};



Solution