Hello,
I have a grid which I'm using editMode: "row" to edit the data. We have a requirement where the editable columns are dependent on the data. For example, we are sending an extra Field1Readonly and Field2Readonly fields with the grid data. If Filed1Readonly is true, then Field1 cannot be edited. The same goes for Field2. This can vary from row-to-row.
We had an implementation of this working in version 15.2. We are attempting to upgrade to version 17.1, but we are unable to get this functionality to work in 17.1. I couldn't find anything specifically in the release notes that indicated there was a change to the events we are using. One thing that happens now is that the Done button stays disabled most of the time. This appears to be happening because we are canceling the iggridupdatingeditcellstarting event for the fields that we don't want to edit; however, this wasn't an issue in 15.2.
Here is generally what we are doing in 15.2:
Thanks,
Paul
Hello Paul,
Please send me your grid configuration or at least the column settings, so that I can test your code on my side and be able to give you more relevant answer. Thanks.
Regards,
Tsanna
Hi Tsanna,
I was able to put together an example for your and i've attached it. It appears that this is happening due to the validation. In the attached example, edit the first row, then edit the numeric amount. The Done button is disabled and there is no way to enable it. If you set the NumericEditorOptions.MinDecimals field, then the validation appears to fail without even entering a value (e.g. click the first Filed0 cell and then click the Field1 cell and the Done button is disabled).
As a workaround in our production solution, we will just disabled validation for now.
The workaround you decided to apply is indeed a valid workaround for this scenario, but I would suggest you some modifications in your code in order to keep the validation and along with that to be able to click on Done button, so that you can update the fields that are not readonly. Please note that Updating feature is not aware of the fact that some field is readonly when it has a validation applied and should pass it. Therefore on editRowStarting event at the end after making the required checks, you should set the new columnSettings to the grid Updating using the "columnSettings" API in order grid Updating knows that there are already required fields which should be skipped and not validated, for example:
$(document).delegate("#grid1", "iggridupdatingeditrowstarting", function (evt, ui) { var rowID = ui.rowID, grid = $("#grid1"); var row = grid.igGrid("findRecordByKey", rowID); var updatingFeature = grid.data("igGridUpdating"); if (updatingFeature) { var colSetting; for (var i = 0; i < updatingFeature.options.columnSettings.length; i++) { colSetting = updatingFeature.options.columnSettings[i]; if (colSetting.columnKey === 'Field1') { colSetting.readOnly = row["Field1ReadOnly"]; colSetting.editorOptions.readOnly = row["Field1ReadOnly"]; } else if (colSetting.columnKey === 'Field2') { colSetting.readOnly = row["Field2ReadOnly"]; colSetting.editorOptions.readOnly = row["Field2ReadOnly"]; } } } grid.igGridUpdating("option", "columnSettings", updatingFeature.options.columnSettings); });
$(document).delegate("#grid1", "iggridupdatingeditrowstarting", function (evt, ui) {
var rowID = ui.rowID, grid = $("#grid1");
var row = grid.igGrid("findRecordByKey", rowID);
var updatingFeature = grid.data("igGridUpdating");
if (updatingFeature) {
var colSetting;
for (var i = 0; i < updatingFeature.options.columnSettings.length; i++) {
colSetting = updatingFeature.options.columnSettings[i];
if (colSetting.columnKey === 'Field1') {
colSetting.readOnly = row["Field1ReadOnly"];
colSetting.editorOptions.readOnly = row["Field1ReadOnly"];
}
else if (colSetting.columnKey === 'Field2') {
colSetting.readOnly = row["Field2ReadOnly"];
colSetting.editorOptions.readOnly = row["Field2ReadOnly"];
grid.igGridUpdating("option", "columnSettings", updatingFeature.options.columnSettings);
});
As for the setting the focus to the field next to the readonly one, what you should do is to access the target element of the readonly field through the event argument and then set the focus to the desired field using an instance of the respective editor (not igEditor, because it's deprecated). Attached is your project with some changes for your reference.
Please let me know if you have any questions.
Thanks for your solution. This works nicely and I was able to get validation to work as well. The only issue I'm having now is that when "grid.igGridUpdating("option", "columnSettings", updatingFeature.options.columnSettings);" is called, the scrolling resets to the top for the grid. This appears to be because I'm using virtualization in my main solution.
I couldn't get the solution that you sent me to work (I did integrate this code successfully in our main solution though). To duplicate the scrolling issue, just uncomment the //Virtualization section in the HomeController. I also added 50 more rows to the grid:
In case of virtualization you may return back to your previous code without calling columnSettings setOption and along with that you need to reset the value of the filed you make readonly, preferably after making it readonly.
Sorry, but I can't seem to get this to work. Where should I be adding this logic? If I add it to iggridupdatingeditrowstarting, then I get a console error (I think because the editor is not yet initialized). If I add this to iggridupdatingeditrowstarted, then it doesn't seem to do anything and I still have the same issue with the scrolling.
Attached is a sample for your reference. Also if you didn't notice I modified my previous answer, because I assumed that my explanation wasn't so understandable to you.
If you need further assistance, let me know.
I'm still having issues. Now the Done button remains disabled again when virtualization is used. If you are seeing something different, then please let me know as I had to merge your changes into my solution.
I've been getting an "Could not load file or assembly 'System.Web.WebPages.Deployment, Version=2.0.0.0," error with the solution you sent. I tried fixing it,but it doesn't seem worth it, so I've just been merging your changes (just so you know in case you are seeing something different).
Paul,
The assembly error is probably due to the fact that the version of this assembly in the References folder is different than the version declared in the web.config file. Please check this in your project. Regarding the disabled Done button issue, I'm not able to reproduce it on my side.
If I can help you with something else regarding this matter, please let me know.
I think I see why you are unable to duplicate the disabled Done button. Your loop in ProductList isn't changing the readOnly attribute, so some of the JQuery we put in is not getting called. In the ProductList class, change
product.Field1ReadOnly = false; product.Field2ReadOnly = true;
to something like this:
product.Field1ReadOnly = i % 1 == 0; product.Field2ReadOnly = i % 1 == 1;