date column is editable even after giving allowEditing=false

[Venkatesh Babu S N]

hi,

i have date columns in my grid and those columns should not be editable.

so i have given allowEditing=false. but still ican edit date columns and change those values.

can you guys please help me with this.

below is my samle code

if(column.columnTechnicalDataType === 'Date'){

          colmnObj.type = 'date';

          colmnObj.allowEditing = false;

          colmnObj.format = this.state.dateFormat;

          columnDateTypeMap.set(column.columnAlias,true);

          colmnObj.edit = {

            create : (args) => {

              args.element = document.createElement('input');

              return args.element;

            },

            destroy:()=>{

              

            },

            read:(args)=>{

              return args.value;

            },

            write : (args)=>{

              args.element.datePickerObj = new DatePicker({

                  floatLabelType: 'Never',

                  format:this.state.dateFormat,

                  value: new Date(args.rowData[args.column.field])

                });

                args.element.datePickerObj.appendTo(args.element);

            }

          };

        }

[Balaji Sekar]

Hi Venkatesh, 

 

Greetings from the Syncfusion support 

 

We checked your query with provided the information and we can bind the custom input component in the Grid edit mode using cellEditTemplate since we cannot prevent that editing option using column.allowEditing as false it is default behavior. 

 

Based on your query we suggest you to use column.isIdentity property it is read only state while editing it will overcome the reported problem in your sample. 

 

Please refer the below code example and sample for more information. 

[index.js] 

  <GridComponent 

            dataSource={employeeData} 

            editSettings={this.editSettings} 

            toolbar={this.toolbar} 

            allowSorting={true} 

          > 

            <ColumnsDirective> 

               .    .     .    . 

              <ColumnDirective 

                field="HireDate" 

                headerText="Hire Date" 

                width="135" 

                isIdentity={true} 

                format="yMd" 

                editType="datepickeredit" 

                edit={this.shipCityParams} 

                textAlign="Right" 

              /> 

              .   .    .   . 

            </ColumnsDirective> 

 

Sample link: https://stackblitz.com/edit/react-pyjy3h-jfnok2 

 

Please get back to us, if you need further assistance. 

 

Regards, 

Balaji Sekar