<!DOCTYPE html> <html> <head> <!-- Ignite UI Required Combined CSS Files --> <link href="http://cdn-na.infragistics.com/igniteui/2019.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" /> <link href="http://cdn-na.infragistics.com/igniteui/2019.1/latest/css/structure/infragistics.css" rel="stylesheet" /> <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script> <!-- Ignite UI Required Combined JavaScript Files --> <script src="http://cdn-na.infragistics.com/igniteui/2019.1/latest/js/infragistics.core.js"></script> <script src="http://cdn-na.infragistics.com/igniteui/2019.1/latest/js/infragistics.lob.js"></script> <style> .ui-widget-header { background: rgba(185, 150, 101, 1); } .ui-iggrid .ui-iggrid-addrow td, .ui-iggrid .ui-iggrid-addrow th, .ui-iggrid .ui-iggrid-footer .ui-state-default, .ui-iggrid .ui-iggrid-footer .ui-state-hover, .ui-iggrid .ui-iggrid-toolbar .ui-state-default { background-color: rgba(222, 204, 157, 1); } .ui-iggrid .ui-iggrid-footer, .ui-iggrid .ui-iggrid-toolbar { background-color: rgba(222, 204, 157, 1); } .ui-iggrid th, .ui-iggrid th.ui-state-active, .ui-iggrid th.ui-state-default, .ui-iggrid th.ui-state-hover { text-align: center; } </style> </head> <body class="samplePage"> <br /><br /> <table id="grid2"></table> <script type="text/javascript"> var northwind = { "results": [ { "Name": "Tom", "Month": "January", }, { "Name": "Robin", "Month": "December", }, { "Name": "John", "Month": "October", }, { "Name": "Smith", "Month": "March", }, { "Name": "James", "Month": "June", } ] } $(function () { /*----------------- Instantiation -------------------------*/ $("#grid2").igGrid({ width: "100%", autoCommit: true, dataSource: northwind, dataSourceType: "json", responseDataKey: "results", caption: "Employee Details", autoGenerateColumns: false, autofitLastColumn: false, primaryKey: "Name", columns: [ { key: "Name", headerText: "Customer Name", dataType: "string", width: "50%" }, { key: "Month", headerText: "Birthday Month", dataType: "string", width: "50%" }, ], features: [ { name: "Paging", pageSize: 10, pageSizeDropDownLocation: "inpager", type: "local" }, { name: "Updating", columnSettings: [ { columnKey : "Name", readOnly: true } ], editMode: "dialog", rowEditDialogOptions: { height: "350px", width: "390px", containment: "window", showDoneCancelButtons: true } } ] }); }); </script> </body> </html>
Hi Infragistics Team,
In this grid, we have add, edit and delete functionality. And as per our data, there are two columns – “Customer Name” & “Birthday Month” and out of which column “Customer Name” is primary key as string type.
But in grid, when we click on “Add new row”, dialog box opens with Customer Name value as “6” by default. As Customer Name is string, it should not display any predefined numeric value. Here, we are stuck.
Is there a way by which we can avoid predefined values appearing in the field?
I have attached code and snapshot as well for better understanding.
Hello Tapas,
Thank you for posting in our community.
This is an expected behavior when setting a column for a primary key.
To change the behavior you can handle the generatePrimaryKeyValue event and modify the emitted value:
features : [ { name: "Updating", generatePrimaryKeyValue: function (evt, ui) { ui.value = "" } } ]