Add a Strike-Through Line On a WijGrid Cell Upon Selection

DESCRIPTION

WijGrid supports different kinds of customizations and it could vary from user to user. In this blog article we will cover one such user scenario and extend WijGrid's functionality. The idea is to add a checkbox column to the WijGrid to select a row. On the basis of the selected row, we will add a strike-through line to any cell present on that row. It is easy to implement a checkbox column in WijGrid and we already have a couple a blogs on this topic. Well it is simple to implement. Let us first take a look at what exactly we are trying to achieve:

IMPLEMENTATION

Basically what we are doing here is on checkbox check, we are adding that row to the WijGrid selection. Next we get the current cell and toggle a class for the preceding cell. This class contains the line image which is applied to the cell. So let us first see the code which is handling this functioanality:

    columns: [
       { dataType: "number", headerText: "Number" },
       { headerText: "Nationality" },
       { headerText: "Player" },
       { headerText: "Position" },
       {
           //add the checkbox column
           headerText: "CheckBox Col",
           cellFormatter: function (args) {
               if (args.row.type & $.wijmo.wijgrid.rowType.data) {
                   args.$container
                      .empty()
                      .append(
                         $("input class="mycb" type="checkbox" /")
                           .click(function (e) {
                               e.stopPropagation();
                           })
                           .change(function (e) {
                               //add the row if checkbox is selected
                               if (e.target.checked) {
                                   $("#demo").wijgrid("selection").addRows(args.row.dataRowIndex);
                                   //ADD THE STRIKETHROUGH LINE TO PREVIOUS CELL
                                   if ($(this).parent().parent().hasClass("ui-state-highlight")) {
                                       $(this).parent().parent().prev().removeClass("ui-state-highlight");
                                       $(this).parent().parent().prev().addClass("strikethrough");
                                   }
                               }
                               else {
                                   $("#demo").wijgrid("selection").removeRows(args.row.dataRowIndex);
                                   $(this).parent().parent().prev().removeClass("strikethrough");
                               }
                          })
                      );
                   return true;
               }
           }
       }

]

Please note that in the code above, I have skipped the greater than and less than symbols from the line where the checkbox is being added as the code section does not render it correctly. As you can notice we are toggling the "strikethrough" class on the basis of checkbox checked state. This is how this class looks:

    .strikethrough
    {
        background: transparent url('http://davidrhysthomas.co.uk/linked/strike.png') 0 50% repeat-x;
    }

So, its done. Just throw this code to your HTML page and you are good to go. A sample application demonstrating this implementation can be downloaded from the link provided below: Download Sample