In this article we will see how to create a dynamic grid using knockout js and how to add a row wise validation by using knockout validation. We also look how add, insert and delete a row in a grid.
What we will achieve at final:
1) Dynamically adding and inserting a row in grid and also deletion of row from grid.
2) Validation by using Knockout Validation api.
3) Generating json of records.
Our final output should be something like below:
1) If you click on Insert, it will add new record above the selected row likewise excels.
2) If you click on Add New Row, it will add new row at the bottom of the grid.
3) Now when you press Save it will validate all the row and notify by highlighting the border of the controls and if all the data validation is success it will generate json for you.
Now follow me step by step to achieve the above output:
1) Reference the following script files:
c) Knockout validation
d) Bootstrap (optional)
2) Add this style part for highlighting the border of controls in case of validation failed:
3) Now create a script file or script section in a page and replace the script with the below given script:
I had explained a use of every object and function by commenting above of each. Please read it, I hope u got it easily.
4) Now in the body section of html create a table and a paragraph by using following script:
Now you can browse the page and see the output. I hope it will give same output as I shown in above two screenshots.
Thanks for reading this article. If you have any doubts or suggestion, please enter by using comment box.