[Solved] Custom edit form for complex type (order lines with serial numbers)

[Lars]

Hello,

I have a grid for ticket lines, bound to this data (some fields removed for brevity):

[
   {
      "lineId":"2_1",
      "ticketId":2,
      "lineNo":1,
      "itemNo":"EVERAA",
      "qty":1,
      "price":0.99,
      "isSerialized":false,
      "serials":[ ]
   },
   {
      "lineId":"2_2",
      "ticketId":2,
      "lineNo":2,
      "itemNo":"S-022933",
      "qty":2,
      "price":189.94,
      "isSerialized":true,
      "serials":[
         {
            "serialNo":"AAAAAAA"
         },
         {
            "serialNo":"BBBBBBBB"
         }
      ]
   }
]

Please note the "serials" array.

The grid has a custom edit form, in which there is a button to add / remove serial numbers.

In the schema for the grid, I have included the serials field like this:

schema: {
    model: {
        id: "lineId",
        fields: {
            lineId: { type: "string" },
            ticketId: { type: "number" },
            lineNo: { type: "number" },
            itemNo: { type: "string" },
           isSerialized: { type: "boolean"},
            price: { type: "number" },
            qty: { type: "number" },
           serials: { defaultValue: { serialNo: "" } }
        }
    }
}

The problem is that I do not know how to bind the serial number array to the grid in the serial number form, so that serial numbers can be added or deleted and of course persisted to the data store when the ticket line they belong to is saved.

Here is a plunker: http://plnkr.co/edit/VJXUoTn2qCHbgGauWXGi?p=preview

In the plunker, two lines are displayed in the grid.  The second line has two serial numbers; when you click Edit on it, and then on the Serial Number button, I would like for the two serial numbers to show up there (in such a way that they additions / deletions are persisted properly, per the above).

Thanks,
Lars

[Mihai]

Hello,

Thank you for providing example code.

I got it working, somewhat: http://plnkr.co/edit/ggeEZRpjRDeI83LgO9YE?p=preview

There is one bug though: the grid's popup template is compiled through Angular twice.  I pushed a fix for this and it will be available in the next internal build.

Here are some notes:

1. we require Angular 1.2.21 (it's actually shipped with Kendo).

2. I placed the <serial-number-window> tag inside the popup editor template.  The reason for that is that we want another window + grid to be created for each data item, instead of reusing the same widgets.

3. The popup editor template is compiled through Angular and a $scope.dataItem variable will be available, pointing to the record currently being edited.  Therefore, to get the serials we can use $scope.dataItem.serials.

4. Rather than manually inserting a button to open Serials, I added this code to the popup editor template:

    <button class="k-button" ng-click="openSerials()">Serials</button>

It's both simpler, and the click handler will run in the correct scope, that is, your serialNumberWindow directive will have access to the current dataItem.  You can use CSS to better position this button.

5. Having access to the current item, in serialNumberWindow directive we simply state that the grid's dataSource is $scope.dataItem.serials, and it'll show the correct data.

Again, because an unfortunate bug the popup template is compiled twice, so when you click "Serials" it will open two dialogs (the ng-click effectively runs twice).  This should be fixed in the next internal build.

Hope this helps.

Regards,
Mihai
Telerik

 

 

[Lars]

Hi Mihai,

Thanks for figuring out how to do this!

When do you estimate the internal build with the bug fix will be available to me?

By the way, regarding the Angular JS version, is there a list of Telerik CDN URLs somewhere that you can point me to (for future reference)?

Thanks,
Lars

[Lars]

Hello Mihai,

I just noticed another problem: when you click Cancel in the edit form (no need to even go into the Serial number form), you get 700+ javascript exceptions, followed by a stack overflow.

This is one of the many repeated exceptions:  

TypeError: Cannot read property 'find' of null
    at N.ui.DataBoundWidget.extend._destroyColumnAttachments (http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js:22:28346)
    at N.ui.DataBoundWidget.extend.destroy (http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js:22:26887)
    at http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js:42:8538
    at k.$broadcast (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:114:99)
    at k.$destroy (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:110:233)
    at c (http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js:42:6478)
    at http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js:42:11477
    at Object.q [as forEach] (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:7:290)
    at Object.<anonymous> (http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js:42:11418)
    at n.(anonymous function) [as angular] (http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js:42:6882) angular.js:10023

Here is the stack overflow that ends the barrage

RangeError: Maximum call stack size exceeded
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:68:12
    at k.$broadcast (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:114:122)
    at k.$destroy (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:110:233)
    at c (http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js:42:6478)
    at http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js:42:11477
    at Object.q [as forEach] (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:7:290)
    at Object.<anonymous> (http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js:42:11418)
    at n.(anonymous function) [as angular] (http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js:42:6882)
    at N.ui.DataBoundWidget.extend._destroyColumnAttachments (http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js:22:28277)
    at N.ui.DataBoundWidget.extend.destroy (http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js:22:26887) angular.js:10023

You can easily reproduce this using the modified plunker you provided (it was not happening in my original plunker).  

Please advise.

Thanks,
Lars

[Mihai]

Hi Lars,

This problem is also related to the double-compilation of the edit template, and it's fixed on our production branch.

Internal builds are released every Friday.  The next one should contain this fix.

I don't know of an official CDN list, but the links to the minified Kendo files from the last public release can be found in the default HTML on http://dojo.telerik.com/

As for Angular, you can fetch it from any CDN you like, for example the Google CDN.  Just make sure to use version 1.2.21 or newer (note that we don't officially support Angular 1.3 at this point).

Regards,
Mihai
Telerik

 

 

[Lars]

Hi Mihai,

I just wanted to let you know that with the new internal build, it works perfectly!!

Thanks again!
Lars

[DJ]

This one hangs upon clicking Edit in IE11.  I suspect that is related to the template being compiled twice?

http://plnkr.co/edit/UoL4fslcNTPVHNBle4Ls?p=preview

[Alexander Popov]

Hello DJ,

I noticed that the plunker example you shared uses Kendo UI 2014.2 903, where the double-compilation issue is still present. I would recommend using the latest internal build instead. If that does not help then the issue is different and I would suggest opening a new support ticket for it.

Regards,
Alexander Popov
Telerik