So I just got the latest update and I can no longer make updates. The I try to update my code I get this attached look. I do my updates a bit different so I'd rather just like to know what this is and how to turn it off.
Hello seang,
Thank you for posting in our forums!
Please answer the following questions so I may have a better understanding of this issue:
a.) What is the version and build you are upgrading to? e.g. 13.2.20132.2212
b.) You say you handle updates differently. Could you please provide more details on how you are updating the grid?
c.) When does this popup box appear? During row editing mode, when the grid renders, or some other time?
Looking forward to hearing from you.
a) version 20141.2031
b) not really, I have had many complications dealing with primary keys. Some of your staff is familiar with how I do updates and there are a lot of forum posts about it. In short I have to by pass all the normal events. Like hitting enter after a cell is updated or double clicking to enter update mode. To update cells I use something like this
var text = this.gridIDMap.cellAt( cell.index, cell.rowIndex )
text.innerHTML = ...
c) seems to only happen when I'm editing the primary key column. Maybe its during the call to editCellEnding.
I was hoping you could just tell me what would make that box pop up? Looks like you possibly do not know? Thus I maybe on my own to figure it out here.
I just got some more info hope it help, not sure how to recreate this in a small version yet. but here is what I see
enter function editCellEnding
the input boxes then moves over to the right and down. Boarder is black thin
text in the box is updated
the input box moves more to the right boarder is blue bottom green top thinker ( 2px)
text is emptied box stay were it last was.
no errors.
Ok I tracked down the issue
this is what I do. Fist I read the cell's innerHTML if my cell has the value 1 I get
* I had to use (<) to stop your forum from reading the code
(<) span="" style="display: inline-block; margin-left: -4px; margin-top: -5px; width: 76px; height: 24px;" class="ui-igedit ui-state-default ui-widget ui-corner-all ui-igedit-container ui-iggrid-editor ui-igedit-hover ui-state-hover" data-mce-style="display: inline-block; margin-left: -4px; margin-top: -5px; width: 76px; height: 24px;">(<)input style="width: 72px; height: 22px;" class="ui-igedit-field" tabindex="1" data-mce-style="width: 72px; height: 22px;">1
Now I was pretty sure that 1 was in the span before? because this does not make sense? how can the 1 be outside the span?
If I by pass the editing of innerHTML the issue is gone, so its got to be something with that. looks like its adding an input in the input. This white box is a result of that. I'm not sure what was change from the last source I had but something was changers cause all of this.
Hi seang,
Without being able to reproduce this, I would not know the cause of the box popping up. I tried several methods using the code you provided to edit the innerHTML, and I was unable to reproduce the box popping up. If you have a sample that reproduces it that you can provide for me, I would be able to offer you some more information. If you have any further questions I can assist you with, please let me know.
I think the reason you dont see the problem is because of that primary key thing.
I modified one of your samples. Just double click on any cell and see what I did in the code ( sorry its messy I know ). The second row is the only one that enter edit mode but it does so on the wrong row?
<!DOCTYPE html><html><head> <title></title> <!-- Ignite UI Required Combined CSS Files --> <link href="../../css/themes/infragistics/infragistics.theme.css" rel="stylesheet" /> <link href="../../css/structure/infragistics.css" rel="stylesheet" /> <script src="../js/modernizr.min.js"></script> <script src="../js/jquery.min.js"></script> <script src="../js/jquery-ui.min.js"></script> <!-- Ignite UI Required Combined JavaScript Files --> <script src="../../js/infragistics.core.js"></script> <script src="../../js/infragistics.lob.js"></script></head><body> <table id="grid"></table> <script> //Readey the column data to sort correctly. $( document ).dblclick( function ( e ) { var cell = $( "#grid" ).data( 'igGrid' ).activeCell(); $( "#grid" ).data( 'igGridUpdating' ).startEdit( cell.rowIndex, cell.index, true ); return false; } ); var columns = []; var agc = true;inData = [{"Coolant Temp at Start":"25.4","Delay":"1"},{"Coolant Temp at Start":"25.4","Delay":"1"},{"Coolant Temp at Start":"25.4","Delay":"1"},{"Coolant Temp at Start":"25.4","Delay":"1"},{"Coolant Temp at Start":"25.4","Delay":"1"},{"Coolant Temp at Start":"-40","Delay":"1"}] if ( 1 )//sort for tables { var fr = inData[0], pmin = -2, cmin, rkey, count = 0; agc = false; for ( i in fr ) { count++; cmin = 1000000; $.each( fr, function ( key ) { var keyNumber = key === "_" ? -1 : parseFloat( key ); if ( keyNumber < cmin && keyNumber > pmin ) { cmin = keyNumber; rkey = key; } } ); columns.push( { key: rkey, headerText: rkey, dataType: "string" } );//dont mess with first collumn //columns.push( { key: rkey, headerText: rkey, dataType: "number", format: "000.000###########" } );//ensures 3 but displays more if they exist ); pmin = cmin; } } else //add a data type to all columns for any other types. $.each( inData[0], function ( colName ) { columns.push( { headerText: colName, key: colName, dataType: "string" } ); } ); //presission will be done on the back end. //fix for this primary key stuff for ( i in inData[0] ) { var priK = i; } this.priKey = priK; $(function () { $("#grid").igGrid ( { primaryKey: priKey, height: 600, width: 700, columns: columns, fixedHeaders: true, autoFormat: "mumber", dataSourceType: "array", dataSource: inData, features: [ { name: "Updating", editMode: "none",//no longer use this. enableAddRow: false, enableDeleteRow: false, editCellStarted: function ( evt, ui ) { var input = $( "input.ui-igedit-field" ); setTimeout( function () { //if we have a keypress in the buffer replace the text otherwise delete the input.val( "test" ); input.prop( "selectionStart", input.val().length ).select(); }, 150 ); return false; }, editCellStarting: function ( evt, ui ) { }, editCellEnding: function ( evt, ui ) { return false; }, editCellEnded: function ( evt, ui ) { return false; } }, { name: "Selection", mode: "cell", multipleSelection: true, } ] } ) }); </script> <script src="../data-files/northwind.js"></script></body></html>
Oh sorry forgot to mention this bug seems to be somewhat similar to the left over box problem. I believe they are one in the same.
Also wanted to comment that I get the same issue ( with auto generate off ) when destroying.
this.gridIDMap.destroy(); <--- gives me that error.
Hi Sean,
This appears to be due to jQuery thinking a new element id is going to be provided. Since jQuery uses the '#' to denote a new ID selector for an element, this is causing problems for jQuery.
If you normally define your own columns, this shouldn't be a problem and when AutoGenerateColumns is enabled it makes its best guess for a column name, which in this case includes the #.
I would recommend defining your own columns to avoid this in the future.
change autoGenerateColumns to true and re-run your script.
I dont recall why I had that in there as I do all my column construction now but that seems to cause the error.
Thank you for the information.
I referenced the same script versions as you have with a simple version of the igGrid using your data. I do not receive the error you are seeing, but my rows do not show until the page is resized in IE10. I also run into this issue when the ROW# column is renamed to remove the "#".
I have attached the sample project I used to test this. Please test this project on your PC and let me know what results you are getting. If you are seeing the same results as usual, this indicates either a problem possibly specific to your environment.
If the sample does show the product feature working correctly, or with rows that are hidden until the windows resizes, this indicates a possible problem in the code of your application. It will help if you can provide a small, isolated sample application that demonstrates the behavior you are seeing.
Or, if this sample project is not an accurate demonstration of what you're trying to do, please feel free to modify it and send it back, or send a small sample project of your own if you have one.
Please let me know if I can provide any further assistance.
jquery-1.8.2.jsjquery-ui-1.9.1.jsmodernizr-2.5.3.js
infragistics.core.js -- 13.2.20132.2212infragistics.lob.js -- 13.2.20132.2212
The code I had has been changed to fix the bugs discussed here. Though the data going in I provided has not changed. If there is anything you need from my just let me know and ill provided it.