move away from cell on button click

[shawnParticipant]

I have a grid with editable fields in it.
Also on each row is a “save” button, that saves that row’s data when clicked.
My problem, is that if the user is in the middle of editing a cell (hasn’t moved off or away from the cell), and they click “save”, that cell’s values do not change.

How can I force the focus away from the edited cell when the save button is clicked, so that the changes are committed?

// prepare the data
var source =
{
    datatype: "json",
    datafields: [
        { name: 'rID', type: 'string' },
        { name: 'rName', type: 'string' },
        { name: 'rTitle', type: 'string' },
        { name: 'rPhone', type: 'string' },
        { name: 'rEmail', type: 'string' }       
    ],
    localdata: jc
};

// init the grid	          
var dataAdapter = new $.jqx.dataAdapter(source);
$("#roster").jqxGrid(
{
    width: 800,
    height: 300,
    source: dataAdapter,
    editable: true,
    columns: [
      { text: 'ID', datafield: 'rID',width: "7%",editable: false},
      { text: 'name', datafield: 'rName',width: "21%",editable: true},
      { text: 'title', datafield: 'rTitle',width: "19%",editable: true},				        
      { text: 'phone', datafield: 'rPhone',width: "17%",editable: true},				         
      { text: 'email', datafield: 'rEmail',width: "20%",editable: true},
			{ text: 'save', datafield: 'edit', width: "8%",  columntype: 'button', 
				     cellsrenderer: function () {
             		return "Save";
          	}, buttonclick: function (row) { 
          		var dataRecord = $("#roster").jqxGrid('getrowdata', row);		            		
          		saveRoster(dataRecord.rID,dataRecord.rName,dataRecord.rTitle,dataRecord.rPhone,dataRecord.rEmail);
          	}
       },
			{ text: 'delete', datafield: 'delete', width: "8%",  columntype: 'button', 
				     cellsrenderer: function () {
             		return "Delete";
          	}, buttonclick: function (row) { 
          		var dataRecord = $("#roster").jqxGrid('getrowdata', row);		  
          		var ndx=selectedrowindex = $('#roster').jqxGrid('selectedrowindex'); 
          		delRoster( dataRecord.rID,ndx);      		
          	}
       }			    				          
    ]
});	

[adminKeymaster]

Hi shawn,

You will probably need to use the Grid’s events about editing and end the editing before you save.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts