ComponentOne Studio for LightSwitch HTML is a set of jQuery Mobile controls, screen templates, and design-time extensions for use with the LightSwitch HTML Client and is based on the popular Wijmo widgets for jQuery UI and jQuery Mobile.

In this blog, you will see how you can add custom columns like an Image column and a column with Radiobuttons in Wijmo Grid for LightSwitch HTML.

First of all, you need to create a LightSwitch HTML project with ComponentOne screen templates and may refer to this documentation link. After doing so, you can add a Wijmo Grid Screen(Scrolling) and bind it to a datatable say Product table of Northwind database.
WijmoScreen

Now, if you run the application, you will get the Wijmo Grid displaying the data columns in the following manner:

WijGrid
You can add new columns in Wijmo Grid by using Push method of its Column collection. However, the basic approach for adding custom columns is to handle the CellFormatter event of the new column and append the desired element such as image, radiobutton in it. Here is the code which you can add in the JS file :

//add a new Image Column
grid.Columns.push(
 {
   //set the column name
   headerText: "Image Column",
   width: 180,
   "cellFormatter": function (args) {
   if (args.row.type & $.wijmo.wijgrid.rowType.data) {
       args.$container
              .empty()
              //add the image tag
              .append($("<img alt="" />")
              .attr("src", "https://www.componentone.com/newimages/Company/Logos /componentone_gc_logo_horiz_160.jpg"));
      }
   return true;
   }
 },
 //add the radiobutton column
 {
   headerText: "RadioButton Column",
   cellFormatter: function (args) {
   if (args.row.type & $.wijmo.wijgrid.rowType.data) {
      args.$container
.empty()
       .append("<input class="myrb" type="radio" name="RdBtn" />", "Yes",
                "<input class="myrb" type="radio" name="RdBtn" />", "No");
    return true;
   }
  }
 }
);

The modified JS file will look like:

Code
That’s it. You have successfully added an image column and radiobuttom column in Wijmo Grid for LightSwitch HTML.

Wijgrid_CustomColumns

Tags: , , ,