Adding unbound column

The wijgrid widget allows you to add unbound columns to the grid. These columns do not obtain data from a data source or data field, they are populated either manually or by using values of the bound columns.

For example, the sample below shows how you can add an unbound column to the grid and assign data using the values of bound columns.

Live Widget
Script

Script	Copy Code
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijgrid"], function () { $(document).ready(function () { $("#wijgrid").wijgrid({ cellClicked: function (e, args) { alert(args.cell.value()); }, allowSorting: true, data: [ { FirstName: "Tom", LastName: "Mathew" }, { FirstName: "Joy", LastName: "Henry" }, { FirstName: "Lucy", LastName: "Hilfiger" }, { FirstName: "George", LastName: "Franco" }, { FirstName: "Peter", LastName: "Louis" } ], columns: [ { dataKey: "FirstName", headerText: "FirstName" }, { dataKey: "LastName", headerText: "LastName" }, { dataKey: null, headerText: "Wijmo ID (Unbound Column)", // add unbound columns cellFormatter: function (args) { //add data to unbound columns if (args.row.type & wijmo.grid.rowType.data) { args.$container.empty().text(args.row.data.FirstName + "." + args.row.data.LastName + "@wijmo.com"); return true; } } } ] }); }); }); </script>

Script

Copy Code

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijgrid"], function () {
        $(document).ready(function () {
            $("#wijgrid").wijgrid({
                cellClicked: function (e, args) {
                    alert(args.cell.value());
                },
                allowSorting: true,            
                    data: [
                        { FirstName: "Tom", LastName: "Mathew" },
                        { FirstName: "Joy", LastName: "Henry" },
                        { FirstName: "Lucy", LastName: "Hilfiger" },
                        { FirstName: "George", LastName: "Franco" },
                        { FirstName: "Peter", LastName: "Louis" }
                          ],
                columns: [
                   { dataKey: "FirstName", headerText: "FirstName" },
                   { dataKey: "LastName", headerText: "LastName" },
                   {
                   
                     dataKey: null,
                     headerText: "Wijmo ID (Unbound Column)",  // add unbound columns
                     cellFormatter: function (args) { //add data to unbound columns
                       if (args.row.type & wijmo.grid.rowType.data) {
                                  args.$container.empty().text(args.row.data.FirstName + "." + args.row.data.LastName + "@wijmo.com");
                     return true;
                  }
               }
             }
              ]
  });
     });
        });   
</script>