We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Set to readOnly a cell based on a column

Hi,

I have a Grid, and I have to set to readOnly a cell in a specific column based on an other column.

For example:
Columns: Id, name and editable

Records: 
1, John, true
2, Bill, false
3, Carl, false
4, Elise, true

The name has to be modifiable, if editable property is true. How can I achieve this?

Thank for any help you provide!

Regards,
Richard

5 Replies

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team May 26, 2016 05:39 AM UTC

Hi Richard, 

You would like to disable and prevent the record from editing based on the Boolean column in the Grid. In the actionBegin event of Grid, while the requestType is “beginedit” and based on value of the current editing record prevent the corresponding record from performing further action (args.cancel = true). Refer to the following code example and Help Document.  
    <div id="GridEdit"></div> 
    <script type="text/javascript"> 
        $(function () { 
 
            var data = [ 
                { Id: 1, name: "John", editable: true }, 
                { Id: 2, name: "Bill", editable: false }, 
                { Id: 3, name: "Carl", editable: true }, 
                { Id: 4, name: "Elise", editable: false } 
            ] 
 
            $("#GridEdit").ejGrid({ 
                dataSource: data, 
                 . . .  
                actionBegin: function (args) { 
                    if (args.requestType == "beginedit") { 
                        var obj = this.model.currentViewData[args.rowIndex]; 
                        if (!ej.getObject("editable", obj)) 
                            args.cancel = true; 
                    } 
                }, 
                columns: [ 
                    { field: "Id", isPrimaryKey: true }, 
                    { field: "name" }, 
                    { field: "editable", editType: ej.Grid.EditingType.Boolean } 
                ] 
            }); 
        }); 
    </script> 


We have prepared a sample that can be referred from the following location. 


Regards, 
Seeni Sakthi Kumar S. 



KR Kéki Richárd May 26, 2016 06:38 AM UTC

Hi,

Thanks the answer. 
Can I use your solution with batchEditing, editTemplate, stackHeaders, summaryRows in AngularJS?

Regards,
Richard


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team May 27, 2016 06:05 AM UTC

Hi Richard, 

Yes,  the solution provided in the previous update will work with the summaryRows and Stackedheader rows. But for the batch edit mode, we have separate events. In batch edit mode, you requirement “Prevent editing based on another column“ can be achieved using the cellEdit event. In the cellEdit event, check the value of the current editing record and based on that prevent the record from performing further action (args.cancel=true). Refer to the following code example. 

    <div class="cols-sample-area"> 
        <div id="Grid" ej-grid e-datasource="data" e-allowsorting="true" e-allowpaging="true" 
             e-celledit="celledit" 
              . . . 
            <div e-columns> 
                <div e-column e-field="Id" e-headertext="ID"></div> 
                <div e-column e-field="name" e-headertext="Name" e-edittemplate="editTemp"></div> 
                <div e-column e-field="editable" e-headertext="Verified" e-edittype="boolean"></div> 
            </div> 
        </div> 
    </div> 
 
    <script> 
        var gridData = [ 
               { Id: 1, name: "John", editable: true }, 
               { Id: 2, name: "Bill", editable: false }, 
               { Id: 3, name: "Carl", editable: true }, 
               { Id: 4, name: "Elise", editable: false } 
        ] 
        angular.module('listCtrl', ['ejangular']) 
        .controller('PhoneListCtrl', function ($scope) { 
            $scope.data = gridData; 
            $scope.celledit = function (args) { 
                if (!args.rowData.editable) 
                    args.cancel = true 
            } 
            . . . . 
                . . . 
            $scope.editTemp = { 
                create: function () { 
                    return "<input>"; 
                }, 
                read: function (args) { 
                    args.ejAutocomplete('suggestionList').css('display', 'none'); 
                    return args.ejAutocomplete("getValue"); 
                }, 
                write: function (args) { 
                    var data = ej.DataManager(gridData).executeLocal(new ej.Query().select("name")); 
                    args.element.ejAutocomplete({ width: "100%", dataSource: data, showPopupButton: true, enableDistinct: true, value: args.rowdata !== undefined ? args.rowdata["name"] : "" }); 
                } 
            }; 
        }); 
    </script> 
 
Refer to the following sample. 
 
 
Refer to the following Help Documents for Grid APIs and events 
 
 
Regards, 
Seeni Sakthi Kumar S. 



KR Kéki Richárd May 31, 2016 01:57 PM UTC

Hi,

Thank you for the solution, it works perfectly. 

Regards, 
Richard


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team June 1, 2016 05:05 AM UTC

Hi Richard, 

We are happy to hear that your issue has been resolved. Get back to us if you need any further assistance on this. 

Regards, 
Seeni Sakthi Kumar S. 


Loader.
Live Chat Icon For mobile
Up arrow icon