Primary Key field disabled by default

[Ronald Dirkx]

I set IsPrimaryKey to true using GridColum builder. However in the grid the column is then disabled. Although it is the primary key I want this field to be editable by the user. Can this behavior be modified or should I not use IsPrimaryKey?

[Pavithra Subramaniyam]

Hi Ronald, 

We have checked your query and In Essential JavaScript 2 Grid CRUD actions will be done based on the primaryKey value. So if you change the Primary key then the CRUD operations will get malfunctioned. So If you want to perform CRUD actions then it is necessary to assign a PrimaryKey column with unique value. Please refer to the below documentation link for your reference. 

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit.html  

Regards, 

Pavithra S. 

[Ronald Dirkx]

Hi Pavithra 

is it possible to have the column assigned as primaryKey editable for the user?

[Venkatesh Ayothi Raman]

Hi Ronald, 

Thanks for contacting Syncfusion support. 

 

Query : is it possible to have the column assigned as primaryKey editable for the user? 

 

We have analyzed your query and we suspect that would you like to change the primary key field as editable. To achieve your requirement, we have used the actionComplete event of the grid and in the event, we are getting the disabled primarkeyField td element and removing the disabled properties. Please refer to the below sample and documentation for your reference. 

Code Example: 

[.cshtml] 

 

<div> 

    <ejs-grid id="Grid" dataSource="ViewBag.DataSource" allowPaging="true" actionComplete="actioncomplete" toolbar="@(new List<string>() {"Add", "Edit", "Delete", "Cancel", "Update"})"> 

        <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings> 

        <e-grid-columns> 

... 

            <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" width="120"></e-grid-column> 

... 

        </e-grid-columns> 

         

    </ejs-grid> 

</div> 

 

<script> 

    function actioncomplete(args) { 

       if (args.requestType == "beginEdit") { 

           var field = args.primaryKey[0]; 

            var elem = args.row.querySelectorAll(".e-disabled");  //elements with disabled class 

 

            for (var i = 0; i < elem.length; i++) { 

                if (elem[i].name == field) {              //disabled primary key td element 

                    elem[i].classList.remove("e-disabled"); 

                    elem[i].removeAttribute("disabled"); 

                    elem[i].parentElement.classList.remove("e-disabled"); 

                     

                } 

            } 

        }    } 

</script > 

 

 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/enable-edit_PK-2020285985  

Documentaion: https://ej2.syncfusion.com/documentation/grid/api-grid.html#actioncomplete  

Note: As we have already said in previous update “ if you change the Primary key then the CRUD operations will get malfunctioned” 

 

Please get back to us for further assistance. 

 

 

Regards, 

Venkatesh Ayothiraman. 

[Ronald Dirkx]

Hi

I copied your script and it works when the grid is in Normal editMode but not when in Batch or Dialog mode. I have an option in the toolbar that allows the user to change the editMode at runtime. Any idea how to handle this?

I want to better understand your statement “ if you change the Primary key then the CRUD operations will get malfunctioned”. Does this mean that the DataOperations class in the Controller methods may have issues or is it the grid itself that can behave strange? For your information: I'm using UrlAdaptor with specific code to access the back end database through an API, so I'm not using DataOperations. I perform sorting, searching, filtering, paging etc on server side.

thanks

[Hariharan J V]

Hi Ronald, 

Thanks for contacting Syncfusion support. 

 

Query : editing primaryKey field in Normal and Dialog Mode 

 

We have analyzed your query. To achieve your requirement, we have used actionBegin event and actionComplete event of the grid. Initially, grid is rendered without a primary Key column and in the actionBegin we are setting the primaryKey to a column as true since CRUD operations are performed based on the primaryKey field and setting as false in the actionComplete event of the grid. Please refer to the below sample and documentation for your reference. 

Code Example: 

[.cshtml] 

 

<div> 

    <ejs-grid id="Grid" dataSource="ViewBag.DataSource" allowSorting="true" actionBegin="actionbegin" beforeBatchSave="batchsave" actionComplete="actioncomplete" allowPaging="true" toolbar="@(new List<string>() {"Add", "Edit", "Delete", "Cancel", "Update"})"> 

        <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog"></e-grid-editSettings> 

        <e-grid-columns> 

            <e-grid-column field="OrderID" headerText="Order ID" width="120"></e-grid-column> 

... 

        </e-grid-columns> 

 

    </ejs-grid> 

    <button onclick="changeMode()">change mode</button> 

</div> 

 

<script> 

    function actioncomplete(args) { 

        if (args.requestType == 'save' || args.requestType == 'batchsave') 

            this.columns[0]['isPrimaryKey'] = false; 

    } 

    function actionbegin(args) { 

        if (args.requestType == 'save') 

            this.columns[0]['isPrimaryKey'] = true; 

     } 

</script>  

 

Query: editing primaryKey field in Batch Mode 

 

To achieve your requirement in batch mode, BeforeBatchSave is used and in the event we are setting the isPrimaryKey to true then in actionComplete event if the requestType is “batchsave” we are again setting the isPrimaryKey to false. Please refer to the below sample and documentation for your reference. 

 

[.cshtml] 

<div> 

    <ejs-grid id="Grid" dataSource="ViewBag.DataSource" beforeBatchSave="batchsave" actionComplete="actioncomplete" allowPaging="true" toolbar="@(new List<string>() {"Add", "Edit", "Delete", "Cancel", "Update"})"> 

        <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog"></e-grid-editSettings> 

        <e-grid-columns> 

... 

            <e-grid-column field="OrderID" isPrimaryKey="true" headerText="Order ID" width="120"></e-grid-column> 

... 

        </e-grid-columns> 

 

    </ejs-grid> 

    <button onclick="changeMode()">change mode</button> 

</div> 

 

<script>              

   function batchsave(args) { 

        this.columns[0]['isPrimaryKey'] = true; 

    } 

    function actioncomplete(args) { 

        if (args.requestType == 'save' || args.requestType == 'batchsave') 

            this.columns[0]['isPrimaryKey'] = false; 

    } 

    function changeMode() { 

        var grid = document.getElementById("Grid").ej2_instances[0]; 

        grid.editSettings.mode = "Batch" 

    } 

</script>    

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/enablingEdit-pk-1514783002  

Documentaion: https://ej2.syncfusion.com/documentation/grid/api-grid.html?lang=typescript#beforebatchsave  

Please get back to us for further assistance. 

Regards, 

Hariharan