87293

Kendo UI grid, issue saving new record (AngularJS)

Question:

I have an order line grid with a custom edit form, whose fields are pre-populated for adding a row. I thought I had this working based on help I received from this question: <a href="https://stackoverflow.com/questions/25651164/how-to-populate-add-row-form-programmatically-for-kendo-ui-grid-angularjs" rel="nofollow">How to populate add-row form programmatically for Kendo UI grid (AngularJS)</a>

However, though it works in the simplified plunker, there are a couple of issues when trying to implement it in a real project.

Here is an updated plunker to show the issues below: <a href="http://plnkr.co/edit/wtW4RzVu7uuhrJJbWvVd?p=preview" rel="nofollow">http://plnkr.co/edit/wtW4RzVu7uuhrJJbWvVd?p=preview</a>

Here is the relevant HTML:

<div id="wrapper" class="container-fluid" ng-controller="ticketEntryController"> <div ng-controller="ticketLineController"> <div kendo-grid="ticketLineGrid" k-options="getTicketLineGridOptions()"></div> </div> <button id="addButton" ng-click="addRow()" class="btn btn-primary btn-sm">Add Row</button>

Clicking the addButton button calls $scope.addRow on the ticketEntryController:

(function () { 'use strict'; angular.module('app').controller('ticketEntryController', ticketEntryController); function ticketEntryController($scope) { $scope.lineGrid = {}; $scope.addRow = function () { var item = { itemNo: "TEST 123", id: 0, itemDescr: "new item description", cat: "CAM", mfg: "ACME", mfgPartNo: "ABC123456", itmStat2: "N", price: 133, qty: 1 }; var ticketId = 200; $scope.$broadcast('AddRow', ticketId, item); } } })();

addRow() above broadcasts to $scope.$on in ticketLineController:

(function () { 'use strict'; angular.module('app').controller('ticketLineController', ticketLineController); function ticketLineController($scope) { $scope.$on('AddRow', function(event, ticketId, item) { console.log("ticketLineController, AddRow: " + item.itemNo); $scope.ticketId = ticketId; $scope.itemForAdd = item; $scope.ticketLineGrid.addRow(); }); $scope.getTicketLineGridOptions = function () { return { dataSource: { type: "json", transport: { read: function (options) { console.log("--- read ---"); options.success(ticketLines); }, create: function (options) { console.log("--- create ---"); ticketLines.push(options.data); options.success(options.data); }, update: function (options) { // Why is it calling "update" for addRow?? console.log("--- update ---"); ticketLines.push(options.data); options.success(options.data); }, destroy:function (options) { // Why is it calling "destroy" for addRow (issue 2)? console.log("--- destroy ---"); }, }, schema: { model: { id: "id", fields: { id: { type: "string" }, orderId: { type: "number" }, lineNo: { type: "number" }, ... }, } }, sort: [{ field: "ItemNo", dir: "asc" }], pageSize: 50 }, ... edit: function (e) { if (e.model.isNew()) { e.model.set("orderId", $scope.ticketId); e.model.set("lineNo", 0); e.model.set("id", $scope.ticketId + "_0"); ... e.model.set("qty", 1); } var popupWindow = e.container.getKendoWindow(); e.container.find(".k-edit-form-container").width("auto"); popupWindow.setOptions({ width: 640 }); },

<strong>Issue #1: When adding a row, "update" is getting called instead of "create" on the grid's dataSource.</strong>

<strong>Issue #2: After cancelling out of the edit form, the next time you try to add a row, it for some reason calls "destroy" after the "update"</strong> To reproduce: 1) Click Add Row 2) Click Cancel in the edit form 3) Click Add Row again 4) Click Update

Answer1:

I heard back from Telerik on this, and the reason "update" was being called instead of "create" is that the id field must be empty for a new record (=0 for integer or "" for string id fields). Once I fixed that, both issues were resolved.

On a related note, the record returned from the server POST (to add record) must contain a populated id field, so that subsequent edits call the "update" instead of "create" in the grid.

Answer2:

I had exactly the same issue. Actually The ID field is autogenerated in my database and the issue was resolved simply by assigning newly created id back to the ViewModel as below:

dbContext.Shipping.Add(entity); dbContext.SaveChanges(); //int newID = entity.Id; ShippingViewModel.Id = entity.Id;

Hope this would help.

Recommend

  • How to refresh grid after update from modal form in atk4?
  • Default cell values when Inserting new row in Google Sheets
  • jQuery selectors: Can I use .class for Select Lists?
  • set plugin toolbar icon using class names in CK Editor
  • App Crashing- Core Data Problem Or Memory Management?
  • Referring to an open database connection inside a function - Golang
  • Custom plugin with DOM manipulation CKEditor 4.x
  • “stack level too deep” When Processing Carrierwave Image Versions in Nested Form
  • DataTables+RequireJS: Cannot read property 'defaults' of undefined
  • Angularjs - Pagination appear after search filter
  • Python error: len() of unsized object while using statsmodels with one row of data
  • Add foreach value to Ajax
  • Angular transclude in a directive containing a ng-template (generic Confirm Modal)
  • Eventbus onMessageEvent not getting called
  • Formatting a text in a table cell with PHPWord e.g. bold, font, size e.t.c
  • Creating a Multi-Step Modal Using Jquery
  • AlertDialog style when using setView()
  • Hide buttons on title bar in Java
  • Keep this build forever option - Jenkins
  • Why querying a date BC is changed to AD in Java?
  • Unity3D & Android: Difference between “UnityMain” and “main” threads?
  • Database structure design with variable amounts of fields
  • Why ng-show works with ng-repeat but ng-if doesn't? [duplicate]
  • recyclerView does not call the onBindViewHolder when scroll in the view
  • Does CUDA 5 support STL or THRUST inside the device code?
  • To display the title for the current loaction in map in iphone
  • jquery mobile loadPage not working
  • Unanticipated behavior
  • Data Validation Drop Down Box Arrow Disappearing
  • PHP: When would you need the self:: keyword?
  • using conditional logic : check if record exists; if it does, update it, if not, create it
  • How do you join a server to an Active Directory (domain)?
  • Angular 2 constructor injection vs direct access
  • Java static initializers and reflection
  • Android Google Maps API OnLocationChanged only called once
  • How to get Windows thread pool to call class member function?
  • Can't mass-assign protected attributes when import data from csv file
  • Recursive/Hierarchical Query Using Postgres
  • UserPrincipal.Current returns apppool on IIS
  • Unable to use reactive element in my shiny app