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

How to implement readonly-fields?

I have a simple ejGrid with a name-field (editType: ej.Grid.EditingType.String) and a computed field that the user should not be able to update. Searching the forum I found that suggestion to cancel the edit-Event, but I'd rather have this field greyed out and not even appear to be touchable. Is there something like a field-type "readOnly", "disabled", "Label" or similar? (I know I could define a template which does not have that field - but why should it be made so "difficult", when a simple fieldtype would be enough? ;-)

1 Reply

MF Mohammed Farook J Syncfusion Team October 5, 2016 07:39 AM UTC

Hi Michael, 

Thanks for contacting Syncfusion Supports. 

If we want to make read only field , we need to set “allowEditing” as false at field description in column level. Please find the code example. 

        // the datasource "window.gridData" is referred from jsondata.min.js 
        dataSource: window.gridData, 
        allowPaging: true, 
        editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true }, 
                columns: [ 
                 { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, validationRules: { required: true, number: true }, width: 90 }, 
                 { field: "CustomerID", headerText: 'Customer ID', validationRules: { required: true, minlength: 3 }, width: 90 }, 
                 { field: "EmployeeID", headerText: 'Employee ID', editType: ej.Grid.EditingType.Dropdown, textAlign: ej.TextAlign.Right, width: 80, validationRules: { number: true, range: [0, 1000] } }, 
                 { field: "Freight", headerText: 'Freight', textAlign: ej.TextAlign.Right, editType: ej.Grid.EditingType.Numeric, editParams: { decimalPlaces: 2 }, validationRules: { range: [0, 1000] }, width: 80, format: "{0:C}" }, 
          { field: "ShipName", headerText: 'Ship Name', width: 150, allowEditing: false }, 
          { field: "ShipCountry", headerText: 'Ship Country', allowEditing: false, width: 90 } 

For your reference , please find the sample and UG. 

J.Mohammed Farook 

Live Chat Icon For mobile
Up arrow icon