Our blazing fast Grid component built with pure JavaScript


Post by gregc »

So in my pre bryntum grid I can tab into a cell and it shows me a dojo combobox from which I can enter a value that is not in the list and it is still saved.

I would like the same functionality, seems like the options are perhaps
1) Finding the source code for your combo box and customizing it so that it allows not in list entries. I would have to also either update the columns editors store dynamically, or change the combo to use a URL for its list content.

2) Have it so my own control displays in the grid, which I have done before but seems like it needs a lot of custom work to make it display properly and edit at the right times.

3) Sponsor you guys to do the work, but might well be outside my budget.

What do you think is easiest? thanks

Last edited by gregc on Sat Apr 24, 2021 7:34 pm, edited 1 time in total.

Post by alex.l »

Hi gregc,

To save values which are not in the list, please set https://www.bryntum.com/docs/grid/#Core/widget/Combo#config-validateFilter to false.

To use remote data, please set https://www.bryntum.com/docs/grid/#Core/data/AjaxStore as a https://www.bryntum.com/docs/grid/#Core/widget/Combo#config-store of your combobox.

To see how to update an editor dynamically, please check this thread: viewtopic.php?f=52&t=17157

All the best,
Alex

All the best,
Alex


Post by gregc »

I finally got around to trying to implement this. I define my column

,editor : { 
		valueField   : 'refId', 
        displayField : 'display',  
type : 'combo', validateFilter: false, store : { readUrl : 'Welcome.do?crud=r&actionRefId=1166&planId=11716704', createUrl : 'Welcome.do?crud=c&actionRefId=1166&planId=11716704', updateUrl : 'Welcome.do?crud=u&actionRefId=1166&planId=11716704' }, multiSelect : false
}

My readURL returned

{ 
  "success" : "true", 
  "data" :  [ {"id": "","refId": "","display": ""},
{"id": "Activity","refId": "Activity","display": "Activity"},
{"id": "Backload","refId": "Backload","display": "Backload"},
{"id": "Communication","refId": "Communication","display": "Communication"},
{"id": "Operations","refId": "Operations","display": "Operations"},
{"id": "Technical","refId": "Technical","display": "Technical"},
{"id": "Validation","refId": "Validation","display": "Validation"}] , 
  "total" : "7" 
}

This looks good, I am able to get the drop down list

Image

However if I type "something new" it does not update trigger an AJAX update on the grids record.

Do I need to add another listener to capture when I type a new valule? I just this one so far

window.genericgrid.addListener('startCellEdit', (event) =>  {
	  event.editorContext.editor.inputField.store.load();
});

Doesn't look like it calls finishCellEdit by default. Perhaps I can add a listener to the combo to capture the new value?

Last edited by gregc on Sat Apr 24, 2021 8:41 pm, edited 1 time in total.

Post by gregc »

I was able to get it working with this hack, might not work forever but seems to be ok.

window.genericgrid.addListener('startCellEdit', (event) =>  {
	try {
	  if (event.editorContext.column.field === 'category' && !event.editorContext.editor.loadedFromServer) {
         event.editorContext.editor.inputField.store.load(); 
         event.editorContext.editor.loadedFromServer = true; 
		      // add a listener when you tab out
		      event.editorContext.editor.inputField.addListener('focusout', (fevent) =>  {
			  // get the last combo typed value
			  try {
				  let lastTypedValue = fevent.fromWidget.lastQuery;
				  if (lastTypedValue) { // this is null when picking from the list
				     let currentRowid = fevent.toWidget.lastFocusedCell.id;
				     // update the column (customize the column name as needed)
				     fevent.toWidget.store.getById(currentRowid).category=lastTypedValue;
          			 event.editorContext.editor.loadedFromServer = false; 
				  }
			    } catch (ex2) {
				  console.log(ex2);
			    }
		      }); 
	      }
	} catch (ex1) {
		console.log(ex1);
	}
});
  

Post Reply