Editable grid with certain rows not editable based on value in cell

Hi,

I have an editable grid, however, depending on a hidden field value I would like particular rows not to be editable.

Please see the attached sample.

If the value in the Exempt field = “yes” I would like this particular row not to be editable (not to respond to mouse clicks).

Also, as the grid is loading, if the value in the Exempt field is true, instead of displaying a numeric value in the score column I instead would like to display the string “Exempt”.

In summary, if the value in the (hidden) Exempt field = “yes”, display the word “Exempt” instead of a numeric score and prevent the row from being edited.

And one more wrinkle…

There is an “Apply Defaults to All” button at the top that updates all the rows with default values.  I similarly need the “exempt” rows not to be editable by this action.

Many Thanks.

UneditableRows

Hello Rick,

In order to make the rows that contain “Yes” value read-only, you may handle editRowStarting event and cancel it, for instance:

editRowStarting: function(evt,ui){
var rowId=ui.rowID;
var exemptColVal=$(“#grid”).igGrid(“getCellValue”, rowId, “exempt”);
if(exemptColVal==”Yes”)
evt.preventDefault();
}

For changing the value in “Scope” column based on the value in “Exempt” column you may use rowsRendered event (if you want it to be changed initially):

rowsRendered: function(evt, ui) {
for(var i = 0; i < ui.owner.rows().length; i++){
var record = $(“#grid”).data(“igGrid”).options.dataSource[i];
if(record.exempt==”Yes”){
var rowId = $(ui.owner.rowAt(i)).attr(“data-id”);
$(“#grid”).igGridUpdating(“setCellValue”, parseInt(rowId,10), “score”, “Exempt”);
}
}
}

Regarding your last requirement, I believe that my first suggestion resolves it.

I’m attaching a sample for your reference.

If you need further assistance, please let me know.

Regards,

Tsanna

UneditableRows

Hi Tsanna,

That works great for the first two issues (Thanks!) however the last requirement still seems to be an issue. When I click “Apply Defaults to All” (in your sample) it does not “ignore” the Exempt rows but instead updates them like the rest.

A couple of other things…

1) the example you provided seems to only work in Chrome.  In IE11 the grid never populates for some reason.  It would help me to get it working in IE because that is our target development environment and it would help me diagnose some styling issues similar to that below.

2) In your sample, when we are updating the score to display the “Exempt” value, the row appears normal.  However in my development environment, when I introduce your code, when the grid is rendered it shows the text in the rows that were modified (via our rowRendered) in italics.  The styleset that we are using is “infragistics”.  In my environment when a row is edited and “Done” is clicked, it displays the row in italics. So it seems our “rowRendered” modification of the row is causing it to look to the user as if the row has been edited.  This is undesirable as it indicates to the user that this row has been edited when in fact the user has (and could not) make any edits to these rows that we modified (vis rowRendered) to essentially be read-only. Again, your sample does not reproduce this behavior unfortunately which is confusing because you seem also to be using the “infragistics” style.

Please see the attached screenshot.  You can see that the row we modified (vis rowRendered) appears italicized (indicated the row has been edited whereas we just want it to appear normally).  Looking at the styles applied in the DOM it appears to have a “ui-iggrid-modifiedrecord” applied.  Note the css file being used “IgniteUI/css/themes/infragistics/infragistics.theme.css” which should essentially be the same as yours (same “infragistics” style).  You’ll note I have different colored headers etc. but this is because I added some minor css color tweaks in-line in the page (nothing that should effect the above).

Hi Tsanna,

My mistake, use are using "bootstrap" style in your example.  However it shouldn't make a difference.

If you are able to get the sample you provided me running in IE11 you should see the problem. 

Chrome seems to override the tag in css/structure/infragistics.css:

.ui-iggrid-modifiedrecord>td{font-style:italic}

with the tags in css/themes/bootstrap/infragistics.theme.css:

.ui-iggrid-modifiedrecord>td{-webkit-animation-name:addingHighlight;-webkit-animation-timing-function:ease-in-out;-webkit-animation-duration:1s;-moz-animation-name:addingHighlight;-moz-animation-timing-function:ease-in-out;-moz-animation-duration:1s;-o-animation-name:addingHighlight;-o-animation-timing-function:ease-in-out;-o-animation-duration:1s;animation-name:addingHighlight;animation-timing-function:ease-in-out;animation-duration:1s}

.ui-iggrid-modifiedrecord>td{background-color:transparent;color:#999}

In short, in IE11 you should see the italics applied (which illustrate the problem when the grid renders), so please use that for your testing.

Thanks!

Hello Rick,

I'm looking into this and will let you know of any available information.

Please do not hesitate to contact me with any additional questions in the meantime.

Regards,

Tsanna

Hello Rick,

I tested the sample in IE11 and the styles seem to render with regular font, not italic in compare to your image. Also the image that you’ve attached seemed to show your real working application while the sample that you recently sent me is an isolated part of it. Please make sure that both include the same styles and functionality. I’m attaching an image that demonstrates the look and feel of the grid on initial load on my side for your reference.

If you need further assistance, please let me know.

Regards,

Tsanna

Hi Tsanna,

I worked around this by changing the value in the dataset before it reaches the grid.

Thanks,

Rick

Hello Rick,

I'm glad that you were able to resolve this.

If you need further assistance, please let me know.

Regards,

Tsanna