I want to create an invoice form similar to http://metaware.github.io/angular-invoicing/, is possible to achieve this? If yes, I will appreciate some direction about.
Best regards,
Hi Carlos,
For the invoice header you can use Rows with one/two Columns and TextBoxes without border (you can set desired styles in client/src/styles.css). For the image you can use Image component, etc. For the rows part you can use DataGrid bound to an array of objects with desired properties:
You can use templates for grid columns to define desired components and logic.
Best Regards,
Vladimir
Thank you for your directions!
I followed your suggestions and I made a page creating an empty object in load page event:
I'm populating this object with change event of Angular controls in the page.
I added an empty form and used submit event to invoke data souce method:
Could you provide me an example about the steps to bind the datagrid with an array of objects and save it? I'm unsure about how to do it.
Thanks in advance.
Hi Carlos,
I’ve not used Form in my example since the original demo does not have any Form submission, just Reset and Print. You can build such layout using plain Rows/Columns with TextBox, Image, DropDown and Link components. For the grid I’ve used array page property like this:
${[{Description: ‘’, Quantity: 0, Cost: 0}]}
If you bind the DataGrid to such page property you will be able to auto-generate columns. The Total column and the first (button) column are template columns not bound to any object properties. You can use ${data.Const * data.Quantity} as expression for Total column and place a button with desired logic in the first column.
Best Regards,
Vladimir
Thanks Vladimir. I really appreciate your support.
