How to pre-populate the fields of a custom add-row form

[Lars]

I am writing an order-entry system using Angular with Kendo-UI.  To add lines to an order, the user will either scan a barcode or pick an item using an item-lookup grid.  When an item is picked, the popup edit/add form for order line grid should open up with most of the fields pre-populated with values based on the item picked.  The custom edit form contains many read-only informational fields that the sales person needs to see when adding the item, such as item #, description, manufacturer, manufacturer's part number, cost, etc., along with some editable fields such as quantity and price.   

Here is the HTML snippet that renders the line grid as well as a simple addButton to simulate an item being picked from the item lookup grid:

<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>
</div>

Here is the ticketEntryController:

(function () {
    'use strict';
    angular.module('app').controller('ticketEntryController', ticketEntryController);

    function ticketEntryController($scope) {
        $scope.lineGrid = {};
        $scope.addRow = function () {
          var item = { itemNo: 'TEST123', itemDescr: 'Some description' };
          $scope.$broadcast('AddRow', item);
        }
    }
})();

Here is part of the ticketLineController:

function ticketLineController($scope) {
    $scope.$on('AddRow', function(event, item) {
        console.log("ticketLineController, AddRow: " + item.itemNo);
        $scope.itemNo = item.itemNo;
        $scope.itemDescr = item.itemDescr;
        $scope.ticketLineGrid.addRow();
    });

When the Add Row button is clicked, the editor popup form opens up, but all fields are empty. How can I populate the fields (like they are when you click the Edit button for an existing row)?  Also, of course the sales person could click Cancel from the edit form, in which case the item should not be added to the order line grid.

Here is a Plunker

Thanks,
Lars

[Lars]

The plunker link in my post does not work, here it is again:
http://plnkr.co/edit/VG39UlTpyjeTThpTi4Gf?p=preview

[Alexander Popov]

Hello Lars,

This could be done by adding the item to the Grid's DataSource and keeping the reference to the model. Then you can find the corresponding row by the model's uid and the row's data-uid attribute and pass it to the Grid's editRow method. For convenience I prepared an updated plunkr example.

Regards,
Alexander Popov
Telerik

 

 

[Lars]

Works great, thanks!!

[Lars]

Hi Alexander,

As I was implementing this solution in my actual project, I came across one issue: when I save the new record, it using the "update" instead of the "create" definition of the dataSource.transport.  The back-end is RESTful, so creates are done via POST and updates are done via PUT.  How can I add a row in such a way that it uses the "create" instead of "update" to persist it?

Also, I posted the original question on Stack Overflow as well, and received a slightly different solution for adding a row:
http://stackoverflow.com/questions/25651164/how-to-populate-add-row-form-programmatically-for-kendo-ui-grid-angularjs/25669383?iemail=1&noredirect=1#25669383

Do you see any potential issues with this solution? 

Thanks,
Lars

[Lars]

Hi Alexander,

I just noticed one other problem: when I click Cancel in the pop-up edit window, it leaves the new row in the grid (though it does not persist it to the server).  A page refresh of course removes it.  This is strangely enough not happening in your plunker.  

After adding a record to the datasource, how do you remove it if the user clicks Cancel in the edit form?  I do not see any Cancel event (and I would rather not use a jQuery hack to hook up a click listener to the cancel button, etc.)

Thanks,
Lars

[Lars]

Hello Alex,

You can disregard the "Cancel" issue in my last comment - it is working now (but I still do not know why).

The issue of how to make it call "create" instead of "update" when adding rows remains.

I also came across one more issue:
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."  To reproduce: 1) Click Add Row 2) Click Cancel in the edit form 3) Click Add Row again 4) Click Update

Here is an updated plunker to show both issues:  http://plnkr.co/edit/YHiupWy49mvk4kZAqJTA?p=preview

Please advise.

Thanks,
Lars

[Alexander Popov]

Hello Lars,

The Updated method is called instead of Create, because the newly added items are assigned an ID. Basically, new items should have an ID equal to the default value of the ID field (0 for numbers, empty string for string and etc). The ID is usually generated on the server side (while creating the item in the database) and returned back to the DataSource with the create request's response. Keep in mind that in case the ID is not updated after creating the new item, the DataSource will continue to treat this item as new, so editing it will again trigger the create method instead of update. Here is an updated plunkr where the Grid makes a Create request for newly added items,  because the ID field is not pre-populated.

Regards,
Alexander Popov
Telerik

 

 

[Lars]

That took care of both issues!

Thanks,
Lars