BUG with delete on grid

Suite and Optimus Suite 5
#1

I am totally frustrated this must be a bug no other way around it. Delete provided by the code given doesn’t work. Method getSelectedId() always returns null when being called in the delete function. I think it has something to do with the event on clicking in the grid. For a work around I tried setting a global variable to get the row ID in the method doOnRowSelected() and then using that variable in the delete function for the method mygrid.deleteRow(id). If I add an alert() method before the delete method it works but when I remove it it doesn’t. :question: I was using the alert to check the value and its seems that is the only time the deleteRow() method will work.

NOTE**
It seems to be a timing issue because when I add
setTimeout(function(){mygrid.deleteRow(id);}, 2000);
the deleteRow() then seems to work. What is the real issue at hand I can leave the delay in but it seems kind of hackish… Any help would be a great help.

var id = null; <----- GLOBAL I AM USING
  		
 $('#add_user').live('click', function(){
  	var newId = (new Date() ).valueOf();
        mygrid.addRow(newId,"*-NAME-*,*-ADDRESS-*,*--*,*-*,***,***,***,***",mygrid.getRowsNum());
        mygrid.selectRow(mygrid.getRowIndex(newId),false,false,true);
 });
  		
 $('#clients').live('click', function(){
   	 mygrid = new dhtmlXGridObject('gridbox');
	 mygrid.setImagePath("dhtmlxSuite/dhtmlxGrid/codebase/imgs/");
	 mygrid.setHeader('<h2 style="text-align:center;">Name</h2>,<h2  style="text-    
                align:center;">Addess</h2>,<h2  style="text-align:center;">Town</h2>,
                    <h2>Phone</h2>,<h2>Cell</h2>,
                   <h2>Contact Pref</h2>,<h2>Email</h2>,<h2>Grant Site Usage</h2>,<h2>User     
                    Name</h2>,<h2>Password</h2>,<h2>Smart Phone</h2>');
	mygrid.setInitWidths("120,153,100,100,117,140,120,100,100,100");
	mygrid.setColAlign("left,left, left,center,right,center,right,center,right,center,right");
	mygrid.setColTypes("ed,ed,ed,ed,ed,ed,ed,ch,ro,ed,ed");
        mygrid.setColSorting("db_connector,connector,connector,connector,connector,
                                            connector,connector,connector");
	mygrid.setSkin("dhx_blue");//set grid skin
        mygrid.attachHeader('#connector_text_filter,#connector_text_filter,#connector_text_filter,
                         <button  id="delete_row">Delete Client</button>,<button id="add_user" >
                              Add    Client</button>');
	mygrid.attachEvent("onEditCell", doOnCellEdit);
	mygrid.attachEvent("onRowSelect",doOnRowSelected);
	mygrid.init(); 
	mygrid.loadXML('db_connector.php'); 
  	var dp = new dataProcessor('db_connector.php');
	dp.init(mygrid);
});
		
$('#delete_row').live('click',function(){
			//alert(mygrid.getSelectedId()); <-- THIS RETURNS NULL
  			//alert(id);  <---------------- ONLY WORKS IF THIS IS CALLED ?????
                        setTimeout(function(){mygrid.deleteRow(id);}, 2000); //<-- Timing issue WORKS when delay is used.
  			mygrid.deleteRow(id);
        		return true;
  		});
		
		function doOnRowSelected(rowID,celInd){
        		id = mygrid.getSelectedId();  <------- MY WORK AROUND
 		 return true;
 
    		};
    		


                 function doOnCellEdit(){
			var cell = mygrid.getSelectedCellIndex();
			if(cell === 6){
				var row = mygrid.getSelectedId();
			  	var value = mygrid.cells(row, cell).getValue();
			 	mygrid.cells(row, 8).setValue(value);
			}
			return true;
		
		};
#2 
// alert(mygrid.getSelectedRowId());
#3

The following function deletes row well for us:

var selectedId=mygrid.getSelectedRowId(); mygrid.deleteRow(selectedId);

#4

getSelectedId command must return ID of currently selected element in grid

Not quite sure, but seems in your case order of events is the next

  • click on “delete” button
  • button is in header, so it processed as header click by grid
  • there is a server side sorting for that column, so grid DELETES all data and starts loading of new one
  • jQuery handler fires, but in this moment old data is already remove, so getSelectedId returns null

To fix issue, you can block sorting calls for second header line, by next code

dhtmlxEvent(mygrid.hdr.rows[2], "click", function(e){ (e||event).cancelBubble = true; })
#5

Hi

Where exactly do I insert this line of code?

#6

anywhere after mygrid object creation ( after “mygrid = new dhtmlxGrid” line )

#7

I might be missing something but it throws an exception:

Uncaught TypeError: Cannot read property ‘addEventListener’ of undefined

I placed the code after the grid object creation.

#8

Probably I’m was wrong :frowning:, sorry for inconvenience
Please move that line after grid init.

When setting event handlers for top level grid areas it doesn’t matter when command executed, but if you are setting it on specific lines in header - it need to be executed after related attachHeader command, and after grid.init

mygrid.init(); dhtmlxEvent(mygrid.hdr.rows[2], "click", function(e){ (e||event).cancelBubble = true; }) mygrid.loadXML('db_connector.php');

#9

Hi Stanislav,

I don’t quite understand. I have it working but it was the work around that I mentioned. I am just going to move the buttons outside of the header since it works when I do that.

:question:
thanks for your help.