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.
Unfortunately, activation email could not send to your email. Please try again.

Set to readOnly a cell based on a column

Thread ID:

Created:

Updated:

Platform:

Replies:

124228 May 25,2016 10:33 AM Jun 1,2016 01:05 AM JavaScript 5
loading
Tags: ejGrid
Kéki Richárd
Asked On May 25, 2016 10:33 AM

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

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On May 26, 2016 01:39 AM

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. 


Kéki Richárd
Replied On May 26, 2016 02:38 AM

Hi,

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

Regards,
Richard

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On May 27, 2016 02:05 AM

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. 


Kéki Richárd
Replied On May 31, 2016 09:57 AM

Hi,

Thank you for the solution, it works perfectly. 

Regards, 
Richard

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On June 1, 2016 01:05 AM

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;