Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
55
Removing readonly property for igGridUpdating Column ?
posted

Hello Infragistics community, 

I'm using an ASP.Net MVC igGrid. I want my grid to have following behavior

I have a igGrid with different columns which are read-only and one column is combo editor, so when i change the values in the combo box i need to remove the read-only property for some columns so that they are editable.

  • 17590
    Offline posted

    Hello Kumar G,

    Thank you for posting in our community.

    What I can suggest for achieving your requirement is handling the selectionChanged event of the combo editor. 

     f.Updating()
                        .EnableAddRow(false)
                        .EditMode(GridEditMode.Row)
                        .ColumnSettings(cs =>
                        {
                            cs.ColumnSetting().ColumnKey("Id").ReadOnly(true);
                            cs.ColumnSetting().ColumnKey("Description").EditorType(ColumnEditorType.Combo).ComboEditorOptions(opts => {
                                opts.DataSource(Url.Action("combo-datasource"));
                                opts.AddClientEvent(ComboClientEvents.SelectionChanged, "selectionChanged");
                            });
                        });

    In this event the newly selected value could be checked and based on this value to set the readOnly property for the desired column. Please keep in mind that you have to change this in the column settings and re-apply these column settings . For example:

        <script>
            function selectionChanged(evt, ui) {

               //get reference to the row ID
                var rowID = parseInt(ui.owner.element.closest("tr").attr("data-id"));
                if (ui.items[0].data.Value == "disable") {

                   //update columnSettings and apply the updated version
                    updatingColumnSettings[1].readOnly = true;
                    $("#igGrid").igGridUpdating("option", "columnSettings", $.extend(true, [], updatingColumnSettings));

                   //since re-applying column settings will exit edit mode you have to enter edit mode manually
                    $("#igGrid").igGridUpdating("startEdit", rowID, "ReadOnly");
                }
                if (ui.items[0].data.Value == "enable") {
                    updatingColumnSettings[1].readOnly = false;
                    $("#igGrid").igGridUpdating("option", "columnSettings", $.extend(true, [], updatingColumnSettings));
                    $("#igGrid").igGridUpdating("startEdit", rowID, "ReadOnly");
                }
            }
          }
        </script>

    Keep in mind that this approach will change the readOnly property for the entire column, not only for the currently edited row.

    Please test this approach on your side and let me know if you need any further assistance with this matter.

    Regards,
    Vasya Kacheshmarova
    Associate Software Developer
    Infragistics