[Solved] Custom edit form with fields not displayed in grid

[Lars]

Hello,

I am writing an order-entry app using AngularJS and Kendo UI Grid.  I am new to both and am looking for some guidance on how best to approach the scenario below.

The order line grid is populated with Json data from a server (ASP.NET Web API).  For example, for order # 3:

[ 

   { 

      "OrderId":3,

      "Line":1,

      "ItemId":"0023",

      "Description":"Alcaline substrat-234",

      "Class":"A34",

      "Manufacturer":"AA123",

      "PartNo":"12347354",

      "Qty":2,

      "ExtCost":12.72,

      "ExtPrice":19.10,

      "ExtTax":1.80,

      "Comment":"Some comment... Could be long...",

      Serials: [

        "AAAA1234",

        "BBBB2222"

        ]

   },

   { 

      "OrderId":3,

      "Line":2,

      "ItemId":"0056",

      "Description":"Bee pulsating epox",

      "Class":"34",

      "Manufacturer":"ZB83",

      "PartNo":"52234623",

      "Qty":1,

      "ExtCost":252.31,

      "ExtPrice":290.11,

      "ExtTax":20.10,

      "Comment":"Some other comment about this line...",

      Serials: [

        "AAAA1234",

        "BBBB2222"

        ]

   }

]

In the grid, I only display a few of the fields:
ItemNo, Description, Manufacturer, PartNo, Qty, ExtPrice

For adding and editing records, a custom pop-up form should display additional fields:

ItemNo (R/O): 
Description (R/O): 
Manufacturer (R/O): 
PartNo (R/O): 
Comment (not in grid):
Qty:
Price:
Serial Numbers (not in grid): (button which opens up S/N form)

There are two approaches that come to mind:
1) Do an additional json call to retrieve the edit-form fields (for editing) + another for saving the edits / new records.  I would also reduce the fields in the json above to only include fields shown in the grid.
2) Use some kind of local caching to reduce the server round-trips.  Perhaps Breeze (but I have never used it)?  Need something simple, robust and AngularJS friendly.  
3) ...?

Recommendations / advice would be appreciated!

A sample / JsFiddle or similar that shows how to use a custom edit form (preferably with some extra field [not in the grid]) with Kendo UI grid and AngularJs would also be very helpful.

Thanks,
Lars

[Alexander Popov]

Hello Lars,

The best approach would be to include all items that you wish to edit in the JSON used to populate the Grid. You can then control which columns to be displayed in the Grid by modifying their hidden option. Hidden columns however will still be shown inside the editing pop-up (see example). Regarding your second question - the Grid's DataSource pulls all items it is told to (depending on whether serverPaging,  serverFiltering and etc. are enabled) and persists them as long as it is necessary. This means that in case you are using client operations you will have a single Read request at the beginning, then single Update, Create or Destroy requests for each item that is being modified, added or deleted. In case that does not fit your requirements I would ask you to share some additional information so we could suggest a more suitable approach.

Regards,
Alexander Popov
Telerik

 

 

[Lars]

Hello Alexander,

Thanks for your reply - it answers at least part of what I need.

I have attached a screen shot to provide more details.  As you can see, I have a grid with order lines.  When you edit / add a line, I need a custom form (so that I can control the layout), which also includes one or more additional fields (hidden in the order line grid).  There is also a Serial Number button, which opens up another modal window for entering / scanning serial numbers for the order line.

So two question:
1) Could you provide a sample for using a custom edit form for adding / editing a record (preferably using AngularJS)?
2) How do you recommend handling the serial numbers?  A separate Json call when they click that button from the popup in the custom edit form?  Or include this information as well in a hidden column / sub grid of the main grid?  A sample would be good, if possible.

Thanks,
Lars

[Alexander Popov]

Hello again Lars,

A similar layout could be achieved by using a custom editor template. The next step would be to resize the popup window and add the "Serials" button. This could be done by subscribing to the Grid's edit event and accessing the Window widget through the handler's e.container argument.  You can also subscribe to the click event of the Serials button and once it is triggered - open a Window displaying a Grid populated using the ID of the currently edited item (got through the e.model reference). For convenience I prepared a very simplified example here.
Including the serials in the Grid's DataSource might be the better approach in this case, as otherwise you might run into some problems when creating new items. For example you wouldn't be able to save the serials if the order line is not save before that.

Regards,
Alexander Popov
Telerik

 

 

[Lars]

Hello Alexander,

Ok, I'll give this a try.  But could you explain why I cannot include the button in the template instead of injecting it into the DOM and resizing the window?

Thanks,
Lars

[Alexander Popov]

Hi Lars,

Actually you could use the template to render the button, however it will not be displayed on the same line as the Update and Cancel buttons like illustrated in the wireframe you shared (see updated example).

Regards,
Alexander Popov
Telerik