Dynamically Add New Data in the Observable Array and Make Data Editable Using Knockout

Introduction

In my previous article I explained How to use "Observable Array" and "foreach binding" in Knockoutjs.

This article is a continuation of that article. This article explains how to dynamically add new data in an Observable Array and how to make data editable using Knockoutjs in an ASP.NET Application.

Step 1

First of all we will help the user to dynamically add new data to the Observable Array, this will be done using the View Model so let's work on the View Model.

<script>

function x(car, features) {

var self = this;

self.name = car;

self.feature = ko.observable(features);

}

function y() {

var self = this;

self.carModel = [

{ carName: "I20", price: 600000 },

{ carName: "Verna", price: 1200000 },

{ carName: "Duster", price: 800000 }

];

self.cars = ko.observableArray([

new x("Anubhav", self.carModel[1]),

new x("Mohit", self.carModel[0])

]);

self.addCar=function(){

self.cars.push(new x("",self.carModel[1]));

};

}

ko.applyBindings(new y());

</script>

In the function "x()" we create a class for storing the Buyer Name with the Car Selection made by him. Notice that the "feature" property is made observable .

After that a new Function y() is created in which first the Car Name and it's prices are declared under the carModel and then in the self.cars, the selection made by the buyer is shown, along with his name. The self.cars is the Observable Array; that means that it will show the results instantly on the UI.

To make a new entry in the Array we need to push the new entry in the cars array, this is done by this code

self.addCar=function(){

self.cars.push(new x("",self.carModel[1]));

};

In the end, as always, Bindings are applied to the "y()" that will be bound to the View of Knockout.

Step 2

Now our work on the View Model is completed. We will move toward the View of our application.

The View will help to make our array editable.

<table>

<thead><tr>

<th>Buyer Name</th><th>Car Name</th><th>Price</th><th></th>

</tr></thead>

<tbody data-bind="foreach: cars">

<tr>

<td><input data-bind="value: name" /></td>

<td><select data-bind="options: $root.carModel, value: feature, optionsText: 'carName'"></select></td>

<td data-bind="text: feature().price"></td>

</tr>

</tbody>

</table>

<button data-bind="click: addCar">Add</button>

You can see that the changes are made in the first and second <td> tags, In the first tag I had made the data available in the TextBox that can be edited and in the second <td> tag I had made the data available in the Drop Down Menu, this is done by using the "options" and "optionsText" options that help the data to appear in the DropDown Menu and optionText is used to represent the option property that is used to represent each item on the screen.

In the end I took a Button to which addCar is bound, when it's clicked a new entry in the array will be created.

The complete code of the application is as follows: