current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I have an order line grid where I need to be able to open the popup editor form programmatically with the edit form fields pre-populated (using AngularJs).

In the HTML, I have a lineGrid and an addButton, which calls addRow() on the ticketEntryController:

<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();
    });

Plunker: http://plnkr.co/edit/VG39UlTpyjeTThpTi4Gf?p=preview

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)?

share|improve this question
    
What values do you want to populate on a new row? Isn't a new row supposed to have empty values since it is "new" –  JoseM Sep 3 at 19:20
    
@JoseM The user will scan a barcode or look up an item in a grid and then pick the item to add to the order. This should bring up the add/edit popup form, which is a custom form that contains several read-only (informational) fields that displays the item description, manufacturer, manufacturer part#, cost, etc., along with some editable fields, such as quantity and price, which the user will edit as needed before adding the line to the grid. –  Lars335 Sep 3 at 19:29
    
@JoseM Just to clarify my last comment: the word "grid" in "the user will scan a barcode or look up an item in a grid", refers to a separate item-lookup grid. The plunker is very simplified and does not include this item lookup grid, etc. - it only contains enough to show the specific problem and hopefully obtain an answer. –  Lars335 Sep 3 at 19:57

1 Answer 1

up vote 1 down vote accepted

I figured out how to get a row to be pre-populated for you, although I'm not sure if this is necessarily the best way to do it, but it does accomplish the job - I'm more familiar with AngularJs, not so much with Kendo UI.

The only place that the Kendo API allows you to change/set the new item that you are adding is in the edit event but I couldn't see a way to send your own object along to the event when you call addRow so you need to have a reference to a shared object in your controller with I called itemForAdd. Before calling addRow() in your controller, you need to set the itemForAdd object with the actual object that you want to pre-populate the form with.

    var itemForAdd = {};
    $scope.$on('AddRow', function(event, item) {
        // save reference to item to use for pre-population
        itemForAdd = item;
        $scope.ticketLineGrid.addRow();
    });

Now in the edit event that the Kendo API sends out, you can populate the items from your selected item in the model item. It's not really required, but I also like to clear out objects that I use like this so in the save and cancel events, I clear out the shared itemForAdd object.

            edit: function (e) {
                if (e.model.isNew()) {
                  e.model.set("itemNo", itemForAdd.itemNo);
                  e.model.set("itemDescr", itemForAdd.itemDescr);
                }

                var popupWindow = e.container.getKendoWindow();
                e.container.find(".k-edit-form-container").width("auto");
                popupWindow.setOptions({
                    width: 640
                });
            },
            save: function(e) {
              if (e.model.isNew()) {
                // clear out the shared object 
                itemForAdd = {};
              }
            },
            cancel: function(e) {
              if (e.model.isNew()) {
                // clear out the shared object 
                itemForAdd = {};
              }
            }

With the previous changes, the functionality that you want is mostly working but the data in the table in the edit popup doesn't show the updated values. This is because the Kendo data bindings apparently didn't know they had to update. I couldn't figure out how to make that work, so I just used the AngularJs style bindings for that table (where you had +=itemNo=+), so that the values in the table would update based on the changes in the model object:

              <tbody>
                  <tr>
                      <td>{{dataItem.itemNo}}</td>
                      <td>{{dataItem.itemDescr}}</td>
                      <td>{{dataItem.cat}}</td>
                      <td>{{dataItem.mfg}}</td>
                      <td>{{dataItem.mfgPartNo}}</td>
                  </tr>
              </tbody>

But there was one more issue at this point, only the itemNo was being updated, not the itemDescr and that was because itemDescr was set as editable: false in your grid configuration, so I had to changed it to editable: true

                        fields: {
                            id: { type: "string", editable: false },
                            itemDescr: { type: "string", editable: true },
                            ...
                        },

And finally, here is an updated plunker with my changes: http://plnkr.co/edit/rWavvMh4dRFAsJjuygQX?p=preview

share|improve this answer
    
Thanks a ton for doing this! Works great (and I kinda prefer to use the Angular bindings instead of the Telerik bindings)! Also, I have a question into Telerik about this as well (I did not think I would get an answer here). But they take about 72 hours to reply, so I might not hear back until after the weekend - I will post back here if they come back with a "better" solution. Lastly, I do not have enough reps to up-vote, but if I remember, I'll come back and do that once I have been granted such powers.... –  Lars335 Sep 4 at 21:37
    
I ran into a couple of issues with your solution when I tried to implement in my project. Your solution worked fine for the limited plunker here, so your answer here is still valid, but if you want to take a stab at the issues that came up: stackoverflow.com/questions/25695180/… –  Lars335 Sep 5 at 23:15

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.