1. Home
  2. Forum
  3. Vue
  4. Disable Drop down list in edit mode in Data Grid in Vue

Disable Drop down list in edit mode in Data Grid in Vue

Hello,

I want to disable the dropdown list in edit mode in the Data grid in Vue.
Edit Mode:

Display Mode:

Add Mode:

1) Country Code is the primary key
2) Country Code is Drop Down list
3) In Add mode and display mode its works Good.
     when I go for edit records at that time country code is set to disable.
 field='CountryCode' :headerText='localizedArray.Lbl.countryCode' :isPrimaryKey="true" :validationRules='countryCodeRules' editType= 'dropdownedit' :edit='countryParams' >countryParams: {
        create: () => {
          countryElem = document.createElement("input");
          return countryElem;
        },
        read: () => {
          return countryObj.value;
        },
        destroy: () => {
          countryObj.destroy();
        },
        write: () => {
          countryObj = new DropDownList({
            dataSource: this.countriesList,
            fields: { value: "CountryCode", text: "CountryName" },
            placeholder: "Select a country",
          });
          countryObj.appendTo(countryElem);
        }
      } 

 onActionBegin: function(args) {
      if (args.requestType == "beginEdit") {
         }
}


I can not see country Code value and on edit mode, I don't want to drop down list as it is the primary key and can not editable.
If possible please share an example

7 Replies 1 reply marked as answer
TS Thiyagu Subramani Syncfusion Team June 15, 2020 11:04 AM UTC

Hi Shivani, 
 
Greetings from Syncfusion. 
 
Query: I don't want to drop down list as it is the primary key and cannot editable. 
 
By default in EJ2 Grid the CRUD operation will be based on the primaryKey column. So, the primary column will be disabled in the edit mode and it will be in editable mode in when you add row. It is the default behaviour of an EJ2 Grid. 
 
So, we suggest you to define isPrimarykey to another column which contains unique value and remove the isPrimaryKey from the dropdown column to make the dropdown column as editable one while editing the row.  
 
Query: I cannot see country Code value and on edit mode. 
 
Based on the query we have shared the code example for your requirement so please refer the code example for your reference. 
 
Code Example: 
App.vue 
    create: () => { 
          countryElem = document.createElement("input"); 
          return countryElem; 
        }, 
        read: () => { 
          return countryObj.value; 
        }, 
        destroy: () => { 
          countryObj.destroy(); 
        }, 
        write: () => { 
          countryObj = new DropDownList({ 
            dataSource: this.countriesList, 
            fields: { value: "CountryCode", text: "CountryName" }, 
             value: args.rowData[args.column.field],   // need to set value peroperty to show the row data in the dropdown 
            placeholder: "Select a country", 
          }); 
          countryObj.appendTo(countryElem); 
        } 
      } 

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


Marked as answer
SH Shivani June 16, 2020 02:28 AM UTC

Hello, 
Thiyagu Subramani

Thank you for your reply.
1) If I set Drop down list = primary key so, then go for edit it should be disabled mode only. but in my case still, its enables and can edit country code.

// DropDwonList
      countryParams: {
        create: () => {
          countryElem = document.createElement("input");
          return countryElem;
        },
        read: () => {
          return countryObj.value;
        },
        destroy: () => {
          countryObj.destroy();
        },
        write: args => {
          countryObj = new DropDownList({
            dataSource: this.countriesList,
            fields: { value: "CountryCode", text: "CountryName" },
            isPrimaryKey: true,
            value: args.rowData[args.column.field],
            placeholder: "Select a country",
          });
          countryObj.appendTo(countryElem);
        }
      }


<e-columns>
                                            <e-column field='CountryCode1' type='checkbox' width=30 :visible='false'></e-column>
                                            <e-column field='CountryCode' :headerText='localizedArray.Lbl.countryCode' :isPrimaryKey="true" :validationRules='countryCodeRules' editType= 'dropdownedit' :edit='countryParams' ></e-column>
                                            <e-column field='DistrictCode' :headerText='localizedArray.Lbl.districtCode' :isPrimaryKey="true" :validationRules='districtCodeRules' ></e-column>
                                            <e-column field='AreaCode' :headerText='localizedArray.Lbl.areaCode' :isPrimaryKey="true" :validationRules='areaCodeRules'></e-column>
                                            <e-column field='AreaDescription' :headerText='localizedArray.Lbl.areaDescTitle' :validationRules='areaDescRules' ></e-column>
                                            <e-column field='AreaChineseDescription' :headerText='localizedArray.Lbl.areaChiDescTitle' ></e-column>
                                        </e-columns> 



So, Basically I want drop down list for country = primary key when going for edit it should be disabled only as it is a primary key, but in my case, it still enables in edit mode.



MF Mohammed Farook J Syncfusion Team June 16, 2020 06:50 AM UTC

Hi Shivani,  
 
We have validated your requirement , by default the Primarykey is unique key of your table(data list) definition. We have performing the CRUD operation based on Primarykey reference. The PrimaryKey value is unable to change. This is the  default behavior of data operation. So the Primarykey column is move to disable state while performing editing.  If you want to change the ‘CountryCode’ column value while editing, you can’t set the PrimaryKey for this column , instead of  you can set the PrimaryKey is any other unique column of your data definition.  
 
 
Please find the documentation about Editing for your reference. 
 
 
 
Regards, 
J Mohammed Farook   


SH Shivani June 16, 2020 08:24 AM UTC

hello, I also don't want to change country code in edit mode.
I want country code  =  primary key in the drop-down list. 
but in my case, it can be changed in edit mode. 
I don't want to change in edit mode.
I hope you get my query. 
Please share an example in vue.  


BS Balaji Sekar Syncfusion Team June 17, 2020 07:54 AM UTC

Hi Shivani 

We analysed your query with information from of the forum(155137) mentioned earlier. In the three columns(CountryCode, DistrictCode and AreaCode), you have defined isPrimaryKey property, so Grid considers the primary column to be AreaCode instead of CountryCode, it is causes the problem. Our DataGrid allow one PrimaryKey column alone.  

If you used multiple primarykey columns in the Grid, it will consider primarykey column to be the defined last column of primaryKey as you face this problem in your application. We recommend that you use isPrimaryKey property in CountryCode column alone, then in CountryCode column in editing you can see disable mode. 

   <e-column field='CountryCode1' type='checkbox' width=30 :visible='false'></e-column> 
   <e-column field='CountryCode' :headerText='localizedArray.Lbl.countryCode' :isPrimaryKey="true"   editType= 'dropdownedit' :edit='countryParams' ></e-column> 
   <e-column field='DistrictCode' :headerText='localizedArray.Lbl.districtCode' :isPrimaryKey="true" :validationRules='districtCodeRules' ></e-column> 
   <e-column field='AreaCode' :headerText='localizedArray.Lbl.areaCode' :isPrimaryKey="true" :validationRules='areaCodeRules'></e-column> 
   <e-column field='AreaDescription' :headerText='localizedArray.Lbl.areaDescTitle' :validationRules='areaDescRules' ></e-column> 
   <e-column field='AreaChineseDescription' :headerText='localizedArray.Lbl.areaChiDescTitle' ></e-column> 


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

Regards, 
Balaji Sekar 


SH Shivani June 17, 2020 08:16 AM UTC

Hello,

I understand. But I want 3 columns as Primary key. Country Code, District Code, Area Code.

I have done something like this, and its working. I remove drop down list while edit the record. as country code is the primary key so it cannot be editable.

countryParams: {
        create: () => {
          countryElem = document.createElement("input");
          return countryElem;
        },
        read: () => {
          if (countryObj != null || countryObj != undefined) {
            return countryObj.value;
          }
        },
        destroy: () => {
          if (countryObj != null || countryObj != undefined) {
            countryObj.destroy();
          }
        },
        write: args => {
          if (args.requestType == "add") {
            countryObj = new DropDownList({
              dataSource: this.countriesList,
              fields: { value: "CountryCode", text: "CountryName" },
              isPrimaryKey: true,
              value: args.rowData[args.column.field],
              placeholder: "Select a country"
            });
            countryObj.appendTo(countryElem);
          } else {
            countryElem.value = args.rowData[args.column.field];
          }
        }
      }

<e-column field='CountryCode' :headerText='localizedArray.Lbl.countryCode' :isPrimaryKey="true" :validationRules='countryCodeRules' editType= 'dropdownedit' :edit='countryParams'></e-column>



MF Mohammed Farook J Syncfusion Team June 19, 2020 07:27 AM UTC

Hi Shivani , 
 
Yes, if you are setting the isPrimaryKey as true in any Grid column. You can’t edit that columns. 
 
 
Regards, 
J Mohammed Farook  
  


Loader.
Up arrow icon