Our blazing fast Grid component built with pure JavaScript


Post by tasnim »

Please check the code snippet to achieve it

	listeners : {
		beforeFinishCellEdit({ editorContext }) {
			MessageDialog.alert({
                title : 'No way!',
                message : 'You can not edit this',
                okButton : {
                    listeners : {
                        click : () => {
                            editorContext.editor.inputField.setError('You can not edit this');
                        }
                    }
                }
            });
			return false
		}
	},

Post by thejas.pateel »

Hi,
Sorry not in dialog box .i am telling in custom button click event and showing of invalid rows at the top of the grid .


Post by joakim.l »

Hi!

If I understand correctly, you want the user to edit data in multiple rows/cells and when they are done, they will click a Save-button. Before data is synced to back-end (or what-ever) you want to do a validity check?

There is no built-in functionality that will do this for you. But it should only be a matter of looping through the records, check for invalid values (according to your own logic) and then highlight these cells/records.

Pseudo-code below

onSaveClick(){
	const invalidRecords = [];
	grid.store.forEach(record => {
		if(customRecordValidator(record) === false){
			invalidRecords.push(record);
		}
	}
	new InvalidRecordsPopup(invalidRecords).show();
}

I hope this helps you going forward.

Regards
Joakim


Post by thejas.pateel »

Hi,
Yes i need to check validity before sync to backend But . how to access editor context in above save event to highlight the cell and also i need all these invalid record at the top of the grid


Post by joakim.l »

The editor context is only available while editing. You could start editing a single cell, but not multiple.

You could get each cell and add som CSS to it, but then you would have to keep track of cell rendering.
So I think I would do the highlighting in the renderer. Styling a cell in the renderer is done in a bunch of Grid demos, like this one.

You could use https://bryntum.com/docs/grid/api/Core/data/Model#property-isValid config to apply your validity check.
To get the invalid records at top, you would sort the store accordingly.

Something like this:

class myModel extends Model {
   get isValid(){
      // Your validation logic
   }
}

const gridConfig = {
   store : {
     modelClass : myModel,
      data : myData,
      sorters : [
         { field : 'isValid' }
      ]
   }
   columns : [
      {
         text : 'Column header text,
         field : 'fieldName',
         renderer({record, cellElement}){
              cellElement.classList.toggle('my-invalid-class', !record.isValid)
         }
      }
   ]
};

Regards
Joakim


Post Reply