Primary Id is not displayed when adding a new record
When a new record is added to the grid it gets displayed at the end of the grid and the ID which is the primary key is blank. Why is the primary key not getting updated?
Example:
The Id is 1149 but it is not displayed in the new row which is causing the row to display at the end of the grid instead fo the beginning. The Id is not assigned until the new record is saved and returned from the server/
After I refresh the page ti displays correctly:
Code:
<div id="UpdateAlert" class="alert alert-success" role="alert" style="display:none">
<a rel='nofollow' href="#" class="close" data-dismiss="alert">×</a>
<strong>The tool has been updated.</strong>
</div>
<div id="AddAlert" class="alert alert-success" role="alert" style="display:none">
<a rel='nofollow' href="#" class="close" data-dismiss="alert">×</a>
<strong>The tool has been created.</strong>
</div>
@{
//variables
<ejs-grid id="Grid" dataBound="dataBound" height="510px" allowPaging="true" allowSorting="true" allowFiltering="true" allowGrouping="true" allowReordering="true" allowResizing="false" allowMultiSorting="true" allowPdfExport="true" allowExcelExport="true" showColumnChooser="true" toolbarClick="toolbarClick" printComplete='printComplete' actionComplete="actionComplete" actionBegin="actionBegin" toolbar="@(new List<string>() { "Add", "Edit","Print", "PdfExport", "ExcelExport", "Search","ColumnChooser" })">
...
<e-data-manager json="@Model.Tools.ToArray()" adaptor="RemoteSaveAdaptor" insertUrl="/Home/AddTool" updateUrl="/Home/UpdateTool"></e-data-manager>
<e-grid-columns>
<e-grid-column field="LocationDescription" headerText="Location" valueAccessor="locationAccessor" width="120"></e-grid-column>
<e-grid-column field="LocationID" headerText="Location" visible="false" editType="dropdownedit" edit="@(new {create = "createLocation", read = "readLocation", destroy = "destroyLocation", write = "writeLocation"})" width="50"></e-grid-column>
<e-grid-column field="ReferenceID" headerText="Reference" visible="false" editType="dropdownedit" edit="@(new {create = "createReference", read = "readReference", destroy = "destroyReference", write = "writeReference"})" width="50"></e-grid-column>
<e-grid-column field="ToolID" headerText="ID" isPrimaryKey="true" allowEditing="false" width="50"></e-grid-column>
...
</e-grid-columns>
</ejs-grid>
}
<script>
var cancelFlag = true;
var flag = true;
function dataBound() {
if (ej.base.Browser.isDevice && flag) {
this.autoFitColumns();
flag = false;
this.refreshColumns();
}
this.autoFitColumns();
}
function actionBegin(args) {
if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
for (var i = 0; i < this.columns.length; i++) {
if (this.columns[i].field === "Feet" || this.columns[i].field === "Inches" || this.columns[i].field === "LocationID" || this.columns[i].field === "ReferenceID" || this.columns[i].field === "InventoryID") {
this.columns[i].visible = true;
}
if (this.columns[i].field === "GroundLength" || this.columns[i].field === "ToolID" || this.columns[i].field === "LocationDescription") {
this.columns[i].visible = false;
}
}
}
}
function actionComplete(args) {
if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
for (var i = 0; i < this.columns.length; i++) {
if (this.columns[i].field === "Feet" || this.columns[i].field === "Inches" || this.columns[i].field === "LocationID" || this.columns[i].field === "ReferenceID" || this.columns[i].field === "InventoryID") {
this.columns[i].visible = false;
}
if (this.columns[i].field === "GroundLength" || this.columns[i].field === "ToolID" || this.columns[i].field === "LocationDescription") {
this.columns[i].visible = true;
}
}
var dialog = args.dialog;
// change the header of the dialog
dialog.header = args.requestType === 'beginEdit' ? 'Edit Tool' : 'Add New Tool';
var grid = document.getElementById('Grid').ej2_instances[0];
// The edit input of the column to be hidden is retrieved using its id(will be set as – ‘Grid element id’ + ‘column field’)
var editInput = args.form.querySelector('#' + grid.element.id + 'LocationDescription');
// The edit input’s parent ‘td’ element is hidden
editInput.closest('td').style.display = 'none';
}
if (args.action === 'add') {
document.getElementById("AddAlert").style.display = "block";
setTimeout(function() { hideAlert(); }, 5000);
}
if (args.action === 'edit') {
document.getElementById("UpdateAlert").style.display = "block";
setTimeout(function() { hideAlert(); }, 5000);
}
}
function hideAlert() {
document.getElementById("AddAlert").style.display = "none";
document.getElementById("UpdateAlert").style.display = "none";
}
}
</script>
controller:
public IActionResult AddTool([FromBody] CRUDModel<Tool> tool)
{
var notes = _repository.GetNotes();
var newTool = GetToolDetails(tool.Value,notes);
newTool.Created = DateTime.Now;
_repository.SaveTool(newTool);
//tool id is returned after the record is saved.
GetNotes(newTool, notes, false);
return Json(newTool);
}
SIGN IN To post a reply.
3 Replies
SIGN IN To post a reply.
