Demo - Column Properties

by Joel Parks

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<div class="container">

  <h1>
    Column Properties</h1>
  <p>
    The <b>wijmo.grid.Column</b> class has 
    <a href="https://wijmo.com/5/docs/topic/wijmo.grid.Column.Class.html" target="_blank">
      almost 40 properties 
    </a> you can use to configure each column's appearance and behavior.</p>
  <p>
    These properties are set automatically for auto-generated
    columns, but when creating columns in code you will normally
    set a few of these:</p>
  <ul>
    <li>
      <b>binding</b>:
      Defines the property of the data item that will be shown in this
      column.</li> 
    <li>
      <b>header</b>:
      Defines the content of this column's header cell.</li>
    <li>
      <b>format</b>:
      Format string used to convert numbers and dates into display
      strings for this column.</li>   
    <li>
      <b>width</b>:
      Width of this column in pixels. You may also use 'star' sizing
      to specify the column width in relative units (e.g. '2*' is 
      twice as wide as '*').</li>   
    <li>
      <b>align</b>:
      Defines the horizontal alignment of items in this column.
      This is set to null by default, which aligns data based
      on the column's data type. You can override the default 
      by setting this property to 'left', 'right', or 'center'.</li> 
    <li>
      <b>isReadOnly</b>:
      Determines whether this column can be edited by the user.
      You can disable editing altogether by setting the grid's
      <b>isReadOnly</b> property to false.</li> 
    <li>
      <b>isRequired</b>:
      Determines whether users should be able to set values
      in...

CSS

.wj-flexgrid {
  height: 150px; 
  margin: 10px 0;
}
body {
	margin-bottom: 24pt;
}

JavaScript

onload = function () {

  // generate some random data
  var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
      data = [],
      sortAscend = false,
      sortColumn = 0,
      freshInitialize = true;
  for (var i = 0; i < countries.length; i++) {
    data.push({
      country: countries[i],
      downloads: Math.round(Math.random() * 20000),
      sales: Math.random() * 10000,
      expenses: Math.random() * 5000
    });
  }

	// grid with custom columns
  var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
  	allowResizing: 'None',
  	autoGenerateColumns: false,
    columns: [
    	{ binding: 'country', header: 'Country', width: '2*', align: 'center', isReadOnly: true },
    	{ binding: 'sales', header: 'Sales', format: 'c0', width: '*' },
    	{ binding: 'expenses', header: 'Expenses', format: 'c0', width: '*'  },
    ],
    itemsSource: data,
    formatItem: function(s, e) {
    	if(freshInitialize == false) {
        if(e.panel.cellType == 2) {
          if(e.col == sortColumn) {
            console.log(e.panel.columns[sortColumn].header);
            if(sortAscend == true) {
              e.cell.innerHTML = e.panel.columns[sortColumn].header + '<span class="wj-glyph-up"></span>';
            } else {
              e.cell.innerHTML = e.panel.columns[sortColumn].header + '<span class="wj-glyph-down"></span>';
            }
          }
        }
      }
    },
    sortedColumn: function(s, e) {
    	freshInitialize = false;
    	sortColumn = e.col;
      console.log(e.col);
      if(sortAscend == true) {
      	sortAscend = false;
      } else {
      	sortAscend = true;
      }
    }
  });
}