Binding Various HTML Controls With Knockoutjs - Part 4

Introduction

In my previous articles I explained binding of various types of HTML Controls with Knockout, you can go through them before reading this article. Click on the links provided below to reach those articles.

1. How to Bind Various types of HTML Controls with Knockoutjs
2. How to Bind Various types of HTML Controls with Knockoutjs-Part 2
3. How to Bind Various types of HTML Controls with Knockoutjs-Part 3

Today's article is a continuation of those articles. This article explains the binding of some more HTML Controls with Knockout.

1. Binding Multi Select List Using Knockout

Here we will bind the Multi Select List and will show the selected data from the list using a label.

First of all we will work on the ViewModel of our application. We are working on the same application on which we had worked earlier in the previous article so just add this single line of code in the function that was already created.

      this.multipleSelectedOptionValues = ko.observable(["Male"]);

This code will create an Observable named "multipleSelectedOptionValues" and will make "Male" as it's default value.

So, now your View Model will be like this:

        <script>

            function x() {

                this.stringValue = ko.observable("Hello");

                this.passwordValue = ko.observable("mypass");

                this.booleanValue = ko.observable(true);

                this.optionValues = ["Male", "Female", "Common"];

                this.selectedOptionValue = ko.observable("Male");

                this.multipleSelectedOptionValues = ko.observable(["Male"]);

                //this.radioSelectedOptionValue = ko.observable("Beta");

            };

            ko.applyBindings(new x());

        </script>

Now it's time to move to the second part, in other words to the View of our application. Here we will add a multi-select Drop Down List and a Label.

Write this code in the View of your application.

        <tr>

            <td class="label">Multi-selected options:</td>

            <td data-bind="text: multipleSelectedOptionValues"></td>

        </tr>

       <tr>

              <td class="label">Multi-select drop-down list:</td>

              <td><select multiple="multiple" data-bind="options: optionValues, selectedOptions: multipleSelectedOptionValues"></select></td>

       </tr>

Here first a Label is used that is bound to the multipleSelectedOptionValues and will show the result depending on the selected value in the Checkbox. It's value will change depending on the change in selection of the Multi-Select List.

Then I took a Multi Select List that is also bound to the multipleSelectedOptionValues.

Now you can run your application to see the output. On running the application you will see the output like this:

Now if you select some other value then you can see the change in the Label that is bound to multipleSelectedOptionValues.

You can select all of the options by pressing "Ctrl" and then clicking on all the values.

2. Binding Radio Buttons Using Knockout

Now we will try to bind the Radio Buttons using Knockout, so again we will first work on the ViewModel of our application.

Add this code to you application:

        this.radioSelectedOptionValue = ko.observable("Male");

I had created an Observable named "radioselectedOptionValue" that is selecting an option by default.

Now we will work on the View of our application. In the View I will add some Radio Buttons and a Label that will show the selected value.

        <tr>

            <td class="label">Radio button selection:</td>

            <td data-bind="text: radioSelectedOptionValue"></td>

        </tr>

         <tr>

         <td class="label">Radio buttons:</td>

        <td>

                  <label><input type="radio" value="Male" data-bind="checked: radioSelectedOptionValue" />Male</label>

                  <label><input type="radio" value="Female" data-bind="checked: radioSelectedOptionValue" />Female</label>

                 <label><input type="radio" value="Common" data-bind="checked: radioSelectedOptionValue" />Common</label>

              </td>

    </tr>

Here first I took a Label that is bound to "radioSelectedOptionsValue" to show the selected Radio Button.

After this I took three Radio Buttons that are also bound to "radioSelectedOptionsValue", now if you select any of these Radio Buttons then a related Label will show the selected Radio Button Value.

Now you can run your application to see the output. On running the application you will see the output like this:

Now if you select some other Radio Button then you will see the change in the Label.