Skip to main content

Knockoutjs check/uncheck all checkboxes using header checkbox.

While working with Knockoutjs ViewModel, if we implement the select all checkbox feature using traditional JavaScript/JQuery, then in such scenario we can see that Knockoutjs observable property is not getting updated when all checkboxes are checked/unchecked.

To handle such situation, we can create Knockoutjs computed property (with read/write) and can bind it to header checkbox and there is no need to use the traditional JQuery. Below is the sample code to demonstrate the same:

As usual create the Knockoutjs ViewModel and then bind it to UI using ko.applyBindings
function CheckViewModel() {
    var self = this;
    self.Countries = ko.observableArray(                                                       [
                    new Country("Australia"),
                     new Country("India"),
                     new Country("Russia"),
                    new Country("United Kingdom"),
                    new Country("United States")                                                ]);

    self.SelectAll = ko.computed({
        read: function () {
            var country = ko.utils.arrayFirst(self.Countries(), function (ctr) {
                return !ctr.Selected();
            });
            return country == null;
        },
        write: function (value) {
            ko.utils.arrayForEach(self.Countries(), function (ctr) {
                ctr.Selected(value);
            });
        }
    }).extend({ throttle: 1 });
}
Country = function (name) {
    this.CountyName = name;
    this.Selected = ko.observable(false);
}
ko.applyBindings(new CheckViewModel());

Once Knockoutjs ViewModel is ready to use, create the HTML and use Knockout binding.
<table>
    <thead>
        <tr>
            <th>
              <input type="checkbox" data-bind="checked: SelectAll" />
              Select All Countries
            </th>
        </tr>
    </thead>
    <tbody data-bind="foreach: $data.Countries">
        <tr>
            <td>
              <input type="checkbox" data-bind="checked: Selected" />
              <label data-bind="text: CountyName"></label>
            </td>
        </tr>
    </tbody>
</table>

See highlighted part of HTML and Scripts, we are binding header checkbox with property SelectAll and this property will help us implementing the check/uncheck all checkboxes feature.

Note: There is problem of ordo n ^ 2 when selecting deselecting all if we use simple Knockoutjs computed property.
To handle this either we can use a pasuable computed property or we can also extend the computed with a throttle, as shown below and also used in our script.

.extend({ throttle: 1 })

You can also see the working jsfiddle of this example.

Popular posts from this blog

Difference between Web API, WCF and Web Service

So now we have got the basic idea about Web API, now let’s do some comparison of Web API with WCF and web services.
Web Service WCF Web API Web services created as file with .asmx extension. WCF create with .svc extension Web API are simple class file with .cs(for C#) extension. Web API is inherited from “ApiController” and class name must end with “Controller”. It is SOAP based service and return data in XML form. It is also based on SOAP and return data in XML form. Web API is HTTP based service and by default it return data in JSON or XML form. It supports only HTTP protocol. It supports various protocols like TCP, HTTP, HTTPS, Named Pipes, and MSMQ. It supports HTTP protocol. It can be hosted only on IIS. It can be hosted with in the application or on IIS or using window service. It can be hosted with in the application or on IIS. It is not open source but can be consumed by any client that understands xml. It is not open source but can be consumed by any client t…

C#: Merging Excel cells with NPOI HSSFWorkbook

In this post we’ll see how to merge the two or more cell with each other while creating the excel sheet using NPOI.
Mentioned below is code to merge multiple cells, in this example we are merging first cell to fifth cell of first row (you can adjust row or cell range by passing particular parameters in CellRangeAddress).
//Created new Workbook var hwb = new NPOI.HSSF.UserModel.HSSFWorkbook(); //Create worksheet with name. var sheet = hwb.CreateSheet("new sheet"); //Create row and cell. var row = sheet.CreateRow(0); var cell = row.CreateCell(0); ; //Set text inside cell cell.SetCellValue("This is Merged cell"); cell.CellStyle.WrapText = true; //define cell range address // parameters: -> first row to last and first cell to last cell var cra = new NPOI.SS.Util.CellRangeAddress(0, 0, 0, 4); //Add merged region to sheet. sheet.AddMergedRegion(cra);
Hope this solution helps you J

SignalR Tutorial: Your first SignalR chat application with ASP.net MVC 4

In last post I explained what SignalR, why do us need it is and what are the prerequisites.
In this tutorial we’ll use ASP.NET SignalR to create a real-time chat application.
First of all we’ll add SignalR library to an MVC 4 application and then create hub class (to push content to client) and after that we’ll use SignalR jQuery library to send messages and display updates from the hub.
·Open Visual Studio -> Select ASP.NET MVC4 Web Application template (under Web Templates) and enter the name of application as “MVCSignalRApp” and then click OK.

·On the next screen select “Internet Application” template and then click OK.

·Your basic MVC application is ready to use, now we need to add SignalR libraries to this application. To add SignalR libraries open Package Manager Console (TOOLS - >Library Package Manager -> Package Manager Console) and then run following command.

install-package Microsoft.AspNet.SignalR

·It’ll add all the required SignalR libraries to our application. For inst…