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
600
iggrid angularjs change gridoptions at runtime
posted

Hello,

I use the angular ig-grid directive to create a bound datagrid.

  <ig-grid id="mainCharacters-grid"
             data-source="commicBook.strip.MainCharacters"
             primary-key="Id"
             auto-generate-columns="false"
             width="100%">
        <columns>
            <column key="Id" header-text="ID" width="65px" data-type="number"></column>
            <column key="Name" header-text="Last Name" width="800px" data-type="string"></column>
            <column key="Gender" header-text="Gender" width="100%" data-type="string"></column>
        </columns>
        <features>
            <feature name="Sorting">
            </feature>
            <feature name="Filtering">
            </feature>
            <feature name="Updating">
                <column-settings>
                    <column-setting column-key="Id">
                        <editor-options read-only="{{gridOptions.readOnlyValue}}"></editor-options>
                    </column-setting>
                </column-settings>
            </feature>
        </features>
    </ig-grid>

I would like to set(change) the readonly on the first column based on a value in my controller. The change is triggered by button click.

<button ng-click="OnChangeReadOnlyClicked();" title="Change readonly">Change Readonly</button>

The clickevent changes the value, but the first column remains editable even though the $Scope.gridOptions.readOnlyValue is true.

The content of the controller:

(function () {
    'use strict'

    app.controller('commicBookController', controller);

    function controller($scope, dataServices) {
        var readOnly = false;

        $scope.commicBook = getCommicBook();

        $scope.gridOptions = { readOnlyValue: readOnly };

        function getCommicBook() {

            dataServices.getCommicBook(1)
            .success(function (data) {
                $scope.commicBook = data;
            })
            .error(function (error) {
                alert(error.message);
            });
        }


        $scope.OnChangeReadOnlyClicked = function () {
            readOnly = !readOnly;
            $scope.gridOptions.readOnlyValue = readOnly;
        };

    }

})();

What am I missing to make the change of the value effective, so that the first column becomes readonly?